Tendencias en diseño web: ponte a la última

Diseño plano o Flat design.

No solo en diseño web sino en general, hemos pasado de degradados imposibles, sombras, biseles, relieves y efectos 3D varios a un diseño minimalista dominado por iconos en colores planos y saturados, con trazo grueso y nulo efectismo. Parece que Apple con el rediseño de IOS 7 no estaba tan equivocada y son legión los que se apuntan a esta moda. La posibilidad de usar por fin cualquier tipografía gracias a @font-face también ha cambiado la forma en la que leemos la web y la imagen toma gran protagonismo aunque solo utilizaremos las justas. A partir de ahora la legibilidad y la claridad en la maquetación primarán sobre otras cuestiones más «barrocas».

Scroll parallax

A pesar de que los desplazamientos en scroll horizontal han sido algo de lo que siempre se ha huido, las nuevas técnicas y dispositivos están permitiendo que las web se conviertan en algo más dinámico y se empiecen a fundir con otro tipo de formatos como presentaciones y publicaciones digitales. Si a esto le unimos la posibilidad de crear distintos planos de profundidad, animaciones de texto e imagen y las nuevas características de HTML5 y CSS3, puedes convertir un sitio web en algo dinámico e interactivo para dejar a tus visitantes con la boca abierta.

El microsite mobium de Puma es un ejemplo perfecto de scroll parallax

Todo en una página

La forma de navegar y presentar los contenidos está cambiando también. Una de las tendencias que ya han implementado algunos sitios web es presentar todo el contenido (o el más importante) en una sola página con scroll vertical, utilizando grandes imágenes y titulares sencillos para destacar cada concepto uno debajo del otro. Algunas son impresionantes presentaciones e infografías animadas, impensables hace solo apenas unos años y que facilitan la navegación por los contenidos al no tener que buscar lo que quieres en interminables barras de navegación o sitemaps. Por contra, al eliminar páginas, esta técnica puede ser perjudicial para el SEO en sitios web con poco contenidos.

La presentación del nuevo mac pro con animación mientras haces scroll es espectacular

Navegación fija

Colocar la barra de navegación fija (u otros elementos) se está convirtiendo también en tendencia. En lugar de que la cabecera y navegación de nuestro sitio web desaparezca por la parte superior de la ventana cuando hacemos scroll, al dejarla fija conseguimos que siempre esté accesible y resulte más cómodo para el usuario navegar por nuestro sitio web, simplemente añadiendo la propiedad position:fixed; a nuestro CSS.

Textos más grandes

No hace mucho, cuando las pantallas eran mayoritariamente de 15 pulgadas, se utilizaban tablas y marcos (¿¿marcos??), los sitios web con textos hiperpequeños estaban de moda. Darle 10px al cuerpo de texto era lo más normal y permitía meter mucha información en poco espacio. Hoy es al revés, cada vez leemos menos y lo ideal es resumir con el texto justo pero que vea en condiciones. Veremos textos cada vez mayores para ganar legibilidad con fuentes web específicas, bien definidas y modernas.

Diseño adaptable

Sin duda, la tendencia estrella. Cada vez más gente usa más los dispositivos móviles para navegar y tu web debe estar presentable en cualquier situación. Gracias a los media queries, conseguir una web que se adapte a cualquier tamaño de pantalla y se vea correctamente es muy sencillo y a estas alturas imprescindible. Y para ponerlo más fácil, con boilerplates como Bootstrap o plantillas con responsive design para WordPress, Joomla o Drupal ya no hay excusa para que tu web se vea sin problemas sea del tipo que sea.

Mediaqueri.es es una web con múltiples ejemplos de sitios web con diseño adaptable

¿Cuáles de estas técnicas seguirán usándose en el futuro? ¿Cuáles serán flor de una primavera y acabarán quedando como una curiosidad pasajera? Comentadnos vuestras impresiones y sacar la bola mágica…

Nos vemos en Nowe!