El Diseño Web avanza muy rápido y hay que mantenerse al día de las novedades y tendencias técnicas y de diseño. Es importante adelantarse a las tendencias para que nuestras páginas web no luzcan antiguas en poco tiempo.
El año pasado escribí las tendencias en diseño web 2013. Algunas de aquellas tendencias ya son algo normal en cualquier página web bien hecha.
A continuación encontrarás lo que pienso serán las tendencias en Diseño Web para este 2014.
1. Mobile First
Si 2013 fue el año en que “Responsive Design” se impuso como estándar, en 2014 será “Mobile First”.
Hasta ahora una página web se desarrollaba primero para ordenadores y después se realizaban ajustes para adaptarlo visualmente a móviles y tablets.
Mobile First es una mejora del “Responsive Design” y se haría justo al revés. La programación de la página web se hará primero para móviles, y luego se añadirán y adaptarán los elementos para tablets, y ordenadores. Dentro de poco las páginas web tendrán más visitas desde smartphones que desde ordenadores, así que la técnica de “Mobile First” es un paso lógico.
2. Menú desplegable lateral
Para optimizar el espacio en dispositivos móviles, el menú está oculto y se muestra haciendo clic con un pequeño botón en la parte superior de la web. Se impone como estándar el Menú desplegable lateral que desplaza la página y permite visualizar el menú aprovechando todo el espacio de la pantalla.
Tienda onine de Iberochina en un smartphone. www.iberochina.com
3. Sticky menu
El término “Sticky menu” (menu pegajoso) se refiere a la función mediante la cual el menú principal queda pegado al borde superior de la web cuando el usuario se desliza hacia abajo. Así, el menú siempre está visible y el usuario no tiene que volver hacia arriba para ver el menú.
La Guía de Másters – www.laguiademasters.com
4. Simple y claro. “Menos es más”
Está comprobado que los usuarios se tomarán alrededor de 3 segundos para decidir si una página les interesa o no. Así que no se puede desperdiciar espacio en contenido innecesario.
La página de inicio de una web tiene que ir al grano, informar en pocas palabras el servicio o producto que se ofrece, sus ventajas y una “llamada a la acción” clara.
La “llamada a la acción” puede ser que vean tus trabajos, solicitar presupuesto, o lo que sea que te interese que el usuario haga. Es importante guiar al usuario y facilitarle la navegación hacia el contenido importante.
Galerias de 20 fotos, textos eternos que nadie leerá, homepage “misteriosas” con botones tipo “entrar a la web”, son cosas que no convencen a nadie.
5. GIFs animados
A veces lo una foto no es suficiente para mostrar algo. Si necesitas más de una foto pero un video sería demasiado complicado… ¿porque no un gif? Como los de arriba! :-)
6. Videos en lugar de textos.
Si el objetivo de la página web es explicar los beneficios de un producto o servicio, es mucho más atractivo un buen video que un texto larguísimo. La gente lee poco pero le encantan los videos!
Ejemplo: www.facebook.com/paper
7. Parallax
El efecto Parallax ya tiene un par de años, pero su uso no para de crecer.
Parallax se llama a este efecto en el cual el fondo se desplaza a una velocidad diferente de los contenidos que tiene por delante.
También se usa para que determinados elementos se muevan vinculados al movimiento del mouse.
Ejemplo: https://wagerfield.github.io/parallax/
Ejemplo: https://lagier-kevin.com/#social-coke
8. Transiciones HTML5 + CSS3
Ejemplo de kitkat.com
9. Pre-loadings
Normalmente las páginas web van cargando por partes, primero aparece el texto, luego las fotos, etc. Esto es algo normal en HTML porque cada elemento tiene diferente peso y tiempo de carga.
Con un “pre-loading” (carga previa) se visualiza un pequeño símbolo de “cargando” y luego la página se muestra completa una vez que haya cargado completamente, con un fundido suave u otro tipo de transición.
Pre-loading en la web de Clipper México
10. No más fuentes “seguras”
Hasta el más desactualizado de los diseñadores web ya se debe haber enterado que hace 4 años que se puede usar cualquier tipografía en una página web.
Antes sólo se podían usar las “fuentes seguras” (arial, verdana, trebuchet, y unas pocas más).
Desde hace ya unos años se pueden usar una cantidad de fuentes gratuitas de “Google Fonts”. Y si quieres usar una tipografía que no esté en “Google Fonts” también es posible subir cualquier fuente al servidor, vincularla por CSS y que ésta se vea correctamente en cualquier dispositivo aunque éste no tenga esa tipografía instalada.
Así que ya no hay excusa para usar tipografías aburridas.
¿Alguna tendencia más para agregar?
Compártela en los comentarios!
