2012 es un año calentito, no sólo en cuanto a pura tecnología de consumo (móviles, tablets, coches eléctricos…) o avances más hacker (HTML5, node.js, JQuery mobile, phonegab, la muerte de flash…), también el diseno web no deja de evolucionar.
Siendo justos, las tendencias web no dejan de ser el reflejo del contexto en el que vivimos, adaptándose a un mundo dónde hay móviles táctiles, los usuarios exigen cada vez más a las webs que visitan y HTML5 nos abre puertas hasta hace poco soñadas.
Responsive design
Como no podía ser de otra manera, el responsive design parece haber llegado para convertirse en una manera estándar de entender el futuro de la web. Un futuro en el que la web alcanza su mayoría de edad, le dice adios con la mano al formato papel y empieza su propio camino, con sus propias limitaciones y ventajas (que las tiene, aunque algunos diseñadores solo vean sus “disenos rotos” ).
la web no es papel, no tiene un tamaño fijo, la web debe adaptarse a cualquier dispositivo en el que se visualice.
Yendo más lejos podríamos hablar también de los cambios en los botones, que crecen para adaptarse a los dispositivos táctiles (48px parece ser la superficie estandar para el comodo uso con los dedos) y de como el mundo táctil se fusiona con el viejo mundo de escritorio. De hecho, creemos tanto en esta tendencia que ya estamos adaptando nuestra web a responsive design
Recuerda redimensionar la ventana de tu navegador para ver el responsive design de los ejemplos en acción.
- http://css-tricks.com/
- http://www.dbswebsite.com/
- http://www.ngaky.org/
- http://www.eleventhedition.com/
- http://www.hicksdesign.co.uk/
Enormidad y tipografía hardcore
Los demás dirán lo que quieran pero a mi me gustan grandes
Todo parece llevarnos a la enormidad, posiblemente influenciado por los nuevos formatos táctiles que se sienten más cómodos con botones y tipografías grandes. Precisamente las tipografías están creciendo bastante en muchas páginas de inicio y aumentando su “descaro” a la hora de utilizar tipografías que se salen de la norma, algo tradicionalmente tabú en el medio web.
- http://viljamis.com/
- http://www.gobloomhealth.com/
- http://mariecatribs.com/
- http://dimitropoulos.info/
Imágenes a pantalla completa
La enormidad parece funcionar especialmente con las buenas fotografías. Una buena imagen puede vestir una página mejor que muchos recursos de diseno y… reconozcamoslo, todos preferimos ojear fotos antes que leer textos.
Considero que es un formato con sus limitaciones pero totalmente indicado para aquellos escenarios donde las fotos van a decir más que cualquier cosa que digamos. Nosotros lo aplicamos en webs hoteleras como la de Atlantis Bahía Real, donde la imágenes venden al hotel de una manera que creemos muy acertada.
De todas formas este formato ya es algo clásico y quizá tenga que buscar la manera de encajar en la tendencia responsive design.
- http://www.bahiarealresort.com/granhotel/
- http://www.fuerteventurasurfschool.es/
- http://www.culinariafoodandwine.com/
- http://www.uber-london.com/
- http://www.hoddows-gastwerk.de/
Animaciones sin flash
Especialmente gracias a CSS3 parece que las animaciones ahora están a nuestro alcance de una manera amigable, sin flash y ni siquiera Javascript… ¿Qué mejor que controlarlo todo desde la hoja de estilos css?
Esperemos que internet explorer 7 y 8 mueran pronto para que la web pueda seguir su camino. Con algo de suerte Windows 8 barrerá a todos los XP y así la gente podrá acualizarse a internet 9+
Sitios de una sóla página
Y no me refiero al típico sitio de una página… esto es más como fusionar el concepto de un Slider y de un vídeo, presentando una animación secuencial a medida que bajas haciendo scroll. Escapan un poco del concepto clásico de lo que es una página web pero son realmente fantásticos y sí que les veo mucho sentido en ciertos escenarios tipo “landing page”, especificaciones de producto, etc.
Últimamente se están viendo muchas páginas de coches en este formato, haciendo uso intensivo de la técnica parallax, de la que hablamos en el punto siguiente.
- http://www.dangersoffracking.com/
- http://www.lor.in/
- http://www.janploch.de/
- http://benthebodyguard.com/index.php
Parallax
Esta técnica dota de profundidad a las webs, y se suele usar en sitios de una sóla página. Cada día se ve más, aunque suele dejarme casi siempre con una sensación agridulce. Personalmente creo que es un efecto que puede “embellecer” en casos muy concretos… pero los usos intensivos, especialmente en formatos de una sóla página con mucho scroll me han resultado cargantes.
- http://www.beautifulexplorer.com
- http://www.iutopi.com/
- http://www.redirectdigital.com.br/
- http://www.beetle.com/
- http://www.ds5.citroen.com/fr/
Las tendencias web pueden parecer a veces cambiantes y arbitrarias, llevándote a pensar ¿por qué deben importarme?. Fácil: es la manera de seguir siendo competitivo en un mundo en el que cada vez el usuario es más exigente.
En cualquier caso la tendencia web no es ésta.
Pingback: fsgb80v7cbwe