Tendencias diseño web 2014

tendencias diseño web 2014

Estamos a 1 de Enero de 2014 y toca hacer de vidente. Estas serán para mi las 8 tendencias principales en diseño web que dominarán este 2014 que justo hoy empieza. Muchas ya empezaron a aparecer en 2013 pero se harán especialmente dominantes en 2014:

1) RESPONSIVE: Algo por todos conocido: páginas con layout responsivo para adaptarse a la multitud de tamaños y resoluciones de pantalla. En consecuencia irremediable, adiós a las versiones mobile de los sitios web.

Ejemplo: http://worldwildlife.org/

2) INFINITE SCROLLING: Popularizado inicialmente por Facebook y seguido por Pinterest o Tumblr, el contenido se va cargando a medida que bajas la página, y no llegas a paginar nunca.

Ejemplo: http://eurekasoft.com/

3) SINGLE PAGE WEBSITES: En parte relacionado con la tendencia anterior, en 2014 se verán más y más sitios web donde no se navega, sinó que está todo reunido en una página. Un sitio web entero en una sóla página. Una evolución de esta tendencia es abrir enlaces no en una página nueva, sinó en una capa por encima. La gente no quiere abandonar nada, quiere echar vistazos y leer sin que visualmente se pierda lo anterior.

Ejemplo: http://www.lexusls.asia/

4) FIXED HEADER: La vuelta de un clásico, antiguamente realizado con frames dentro de un , y ahora con CSS. No se pierde nunca el menú de navegación, por mucho que bajes queda fijo arriba.

Ejemplo: http://www.fhoke.com/

5) LARGE PHOTO BACKGROUNDS: Las conexiones rápidas actuales permiten cargar casi inmediatamente enormes y espectaculares imágenes de fondo. Dado que tienen un impacto visual muy importante, están predestinadas a ser más omnipresentes. La evolución de esto son los vídeos a todo el ancho y en el fondo, que ya empiezan a verse.

Ejemplo: http://taasky.com/

6) READ LESS, WATCH MORE: Hace tiempo que el vídeo se incursionó en los sitios web como un complemento muy útil, pero poco a poco ya no es complemento sinó que sustituye casi por completo el texto. Ponle a un usuario un párrafo de 400 palabras y un vídeo de 20 segundos y el 80% le dará al play antes que leer. Como epítome de esta tendencia encontramos sitios web donde la home es un vídeo (VIDEO AS HOME).

Ejemplo: http://y.co/

7) NAVEGACIÓN ESTILO METRO: Menús gigantescos, enormes, con navegación al estilo cajas de Windows 8. Cuadros de contenido uno tras otro, con efecto hover, siguiendo el estilo de Windows 8.

Ejemplo: http://theme.crumina.net/index.php?theme=onetouch

8) FLAT DESIGN: Diseño plano con pocas sombras, nada de biseles, brillos y resplandores, siguiendo el estilo de iOS 7.

Ejemplo: http://digital-minded.ca/

7 principios del diseño de aplicaciones

El diseño de aplicaciones web debe cumplir con una serie de requisitos para generar interfaces naturales, obvias y predecibles que no sólo aceleren el trabajo con la aplicación, sinó que además provean al usuario de seguridad, confianza y satisfacción en su uso. Estos requisitos los he agrupado en 7 principios fundamentales del diseño de aplicaciones:

Proximidad: Las funciones básicas deben aparecer de inmediato, mientras que las funciones avanzadas deben estar en un lugar menos para los usuarios nuevos. Los usuarios deben beneficiarse de tener más próximas las funcionalidades más utilizadas, al igual que un carpintero siempre quiere tener a mano las herramientas que más utiliza.

Familiaridad: Una de las características de una buena interfaz es que en su mayor parte no requiere un aprendizaje específico, sino que es utilizable inmediatamente porque se basa en conocimientos previos de la vida real de los usuarios. Utilizar conceptos, mecanismos e imaginería del mundo real como metáforas permite a los nuevos usuarios empezar a utilizar la aplicación casi de inmediato, porque intuyen su funcionamiento al encontrarse con conceptos conocidos. Además, emplear las convenciones típicas de las aplicaciones facilita también el aprendizaje, puesto que se aprovecha una parte del conocimiento previo en la utilización de otras aplicaciones.

Simplicidad: Una interfaz repleta de funciones avanzadas sólo distrae a los usuarios y les impide realizar las tareas comunes del día a día. Por el contrario, una interfaz que sustenta las acciones del usuario acaba desapareciendo como interfaz y se convierte en tapiz. Además, los objetos de la interfaz tienen que parecer lo que son. Los controles, los elementos y sus relaciones tienen que tener un significado obvio, claro y comprensible, de modo que de un vistazo el usuario pueda entender, sin llegar a tocar el ratón, cómo funciona la aplicación.

Transparencia: A diferencia de muchos otros sistemas como motores o máquinas de tabaco, las aplicaciones son sistemas interactivos que no hacen ruido mecánico por sí mismos. Por tanto, toda la comunicación debe vehicularse a través de la vista (ignoramos aquí aquellas que generan efectos sonoros, como aplicaciones de escritorio). Las mejores interfaces dialogan con el usuario de modo visual (y más que textual): estas pistas visuales evidencian qué está haciendo la aplicación, cuánto queda, y qué se espera del usuario. Con barras de estado, barras de progreso y técnicas como el empleo de focus y highlights, la interfaz comunica visualmente al usuario la actividad de la aplicación, que si no sería completamente silenciosa. La interfaz debe ser transparente y mostrar visualmente la acción que el usuario realiza, de modo que trabajar con la aplicación sea obvio, y que los efectos de utilizarla sean inmediatos.

Diálogo: Aparte de ser transparente en su funcionamiento, la aplicación debe comunicarse con mensajes de texto con el usuario. Mediante estos mensajes, que pueden ser de error, de alerta o de confirmación, la interfaz debe expresar lo que está ocurriendo “under the hood”, detrás de la pantalla. Estos mensajes deben estar bien redactados y ser precisos sobre el tipo de error que ha habido, sobre la acción que se ha completado o sobre el aviso que quiere darse al usuario. No deben ser genéricos sino específicos. Deben dar siempre la oportunidad de cancelar la acción, si no está hecha, o deshacerla, si ya está hecha.

Seguridad: El usuario debe tener la seguridad de que usar la aplicación no es ni peligroso ni arriesgado. Es decir, que no es posible equivocarse sin haber sido advertido previamente, ni que no es posible cometer un error sin poder restaurar el estado de las cosas antes de cometerlo, es decir, deshacerlo. Eso pasa por no situar ningún botón fatal en un sitio de paso cualquiera sino en un sitio protegido, dar el aspecto pertinente a los botones de acción fatal, pedir confirmación antes de realizar la acción, etc. El usuario debe tener la seguridad de que si va a realizar alguna acción crítica, la aplicación estará a la altura y sabrá advertirle de modo oportuno (en el momento adecuado) y pertinente (avisando con claridad las consecuencias de esa acción crítica).

Consistencia: Una interfaz consistente logra una de las mayores virtudes de las interfaces: la predictividad. La aplicación debe comportarse de una manera predecible. El usuario debe poder predecir y acertar sobre lo que pasará cuando haga click aquí o allí, porque antes ha visto a la aplicación responder de ese modo en una situación parecida. Eso se logra cuando elementos de la interfaz parecidos se comportan de manera parecida, y cuando ese comportamiento se mantiene de modo consistente a través de toda la aplicación. Los mismos objetos de la interfaz deben comportarse de la misma manera en cualquier lugar. Si van a comportarse diferente, su aspecto también debe ser diferente.

7 principios básicos en el uso de tipografías

He aquí 7 principios básicos que he ido recopilando de diferentes fuentes (y nunca mejor dicho) a tener en cuenta cuando se usan tipografías:

  1. Las tipografías con serif deben medir siempre algo más que las sin serif; por ejemplo si una sans serif tiene entre 9 y 11 puntos; si la cambiáramos por una serif ésta debería tener entre 11 y 12 puntos.
  2. Es bueno evitar columnas de texto con más de 80 carácteres por línea. Las líneas más largas de 80 cpl pueden llevar a que los usuarios lectores lean la misma línea dos veces; sin embargo, las más cortas de 80 cpl rompen tan a menudo que es difícil seguirlas.
  3. No abusar de letras todas mayúsculas, especialmente cuando se trata de composiciones con un uso intensivo de textos. Las mayúsculas reducen la velocidad de lectura un 30% y en cambio requieren un 30% más de espacio que las minúsculas.
  4. En diseño de revistas y periódicos, pero también en la web, el ancho de la columna debería ser tan largo como lo que ocupara una vez y media el alfabeto entero en la tipografía que quieres usar y en minúscula.
  5. En diseño de vallas exteriores, un buen anuncio no tendrá más de 7 palabras y no más de 2 cosas a las que mirar.
  6. En las tipografías en cursiva, el cuerpo de letra perfecto es aquel que su altura es 5 veces el ancho.
  7. Para saber la legibilidad de un texto a distancia, hay que que coger la mitad de la altura de la letra en pulgadas y multiplicarla por 100, para tener la distancia de la que es legible en pies

Bueno, pues eso eran 7 principios básicos en el uso de tipografías que siempre va bien tener a mano.

Las capas del diseño web

Desmenuzar el proceso de diseñar en varias capas es una manera muy útil de asegurarnos de que el diseño que produzcamos será completo e integral. El proceso del diseño se divide en capas. Hay diseñadores que dividen en capas su trabajo de un modo diferente, pero para mi ésta es la opción con la que me encuentro más cómodo:

  • Arquitectura de Información – Empieza decidiendo o planificando qué información está disponible, y dónde, cuando y bajo qué condiciones.
  • Comportamientos de interfaz – A veces se requieren o son aconsejables comportamientos de interfaz específicos. Estos comportamientos suelen afectar el diseño tanto desde el punto de vista funcional como desde el visual.
  • Jerarquía visual del contenido – Suele ser beneficioso para aportar pistas sobre lo que es más importante del sitio web, qué es lo siguiente en importancia, y así con el resto de elementos.
  • Layout – La parrilla visual fundamental en la que se alojan los elementos mencionados anteriormente.
  • Estilo – El look&feel del sitio web debe soportar y dar un aspecto a todo lo anterior y relacionar todos los elementos anteriores de una manera limpia y armónica

Cada capa es importante y, cuando se trabaja bien, contribuye a la totalidad del diseño. Olvida una de las capas y el diseño se resentirá y no alcanzará su potencial. En general, los diseños que ignoran alguna de estas capas son, simplemente, diseños pobres.