Hazhistoria :: Diseño web y diseño gráfico

Las páginas web, como todo, evoluciona con el paso del tiempo. Vemos como se van adaptando a los cambios sociales y tecnológicos. Si os paráis a pensarlo, hoy en día, cuando vemos una página antigua de 800x600px hecha con tablas o con interminables intros en flash, la primera sensación que dan es de rechazo. Una web limpia bien montada y ordenada, con fotos y estilos, invita a seguir navegando e ir descubriendo qué nos ofrece. Por eso es recomendable actualizar el diseño de nuestra web cada pocos años, o hacerlo bastante neutro de manera que nos sirva el mayor tiempo posible. Aunque siempre habrá algo que se pueda mejorar y las modas irán cambiando.

Si te gusta que tu web tenga un estilo actual y destaque sobre las demás, aquí os dejamos 10 tendencias que, aunque algunas ya las conoceréis, irán in crescendo en 2015:

1. IMÁGENES Y VÍDEOS DE ANCHO COMPLETO: Antes teníamos limitaciones con los anchos de las páginas que han ido desapareciendo, dando paso a un estilo de imágenes de cabecera de ancho completo que nos encanta y nos parece de un impacto visual tremendo. Ejemplo: http://heathlife.co.uk/
2. DISEÑO RESPONSIVE O ADAPTATIVO: Ya hemos hablado en algún post anterior sobre el diseño responsive (http://bit.ly/1twnmze) y lo importante que es adaptar la web a los dispositivos móviles en estos tiempos donde un gran porcentaje de la navegación se hace ya desde smartphones y tablets. Por ello también es importante adaptar el menú de la web a lo que se llama menu mobile (las rayitas que aparecen, normalmente, en la parte superior izquierda para acceder al menú). Ejemplo web responsive: http://www.zara.com/es
3. MENÚ FIJO: Un menú superior sencillo y que se mantenga siempre visible, facilitará la navegación y hará la web más accesible. Una tendencia en alza. Ejemplo: http://www.ascensionlatorre.com/es/home
4. MENOS CLICK Y MÁS SCROLL: Hace tiempo, el tener que usar el scroll para ver entera una página parecía un pecado mortal. Siempre te pedían que se viera toda la información tal cual en la pantalla y, para ver el resto, navegando por el menú. Mucha gente sigue pensando así aún. La tendencia actual rompe con este sistema ofreciéndonos páginas interminables en las que tienes casi toda la información en la primera pantalla, utilizando el scroll y, desde ahí puedes acceder a los puntos más importantes a través de fotos o iconos. Simplificamos el menú y la navegación. Un ejemplo de una original tienda rusa de novias: http://marytrufel.ru/
5. ICONOS EVERYWHERE: Algo que nos encanta, el protagonismo de los iconos. Ya sean pictogramas sencillos u originales dibujos, nos ayudan a identificar las categorías visualmente de una manera rápida y amena. Por ejemplo: http://www.bluegg.co.uk/
6. PARALLAX: Seguramente las webs más impresionantes que se pueden ver ahora mismo. Se trata de un efecto que, al hacer scroll, ves como el fondo se mueve a diferente velocidad que el contenido, como en capas. Suelen ser páginas de navegación sencilla y que le dan importancia a la fotografía para dar esa sensación de profundidad. Seguramente habréis visto muchas con “dos capas”, pero hay trabajos espectaculares realmente complejos como este: Atentos a este efecto porque cada vez vais a verlo más. Nuestro favorito sin duda. Fijaros en esta divertida partida de Tetris jugada con el scroll del parallax, que se publicó por el 25 aniversario de la Game Boy: https://ihatetomatoes.net/happy-25th-birthday-game-boy/
7. BOTONES FANTASMA: Los botones fantasma o ghost buttons son formas planas sin relleno que se suelen usar para el call to action (llamada a la acción). Suelen ser botones simples, con un trazo tirando a fino, sin relleno, con textos simples y algo más grandes que el resto de botones. Suelen “camuflarse” sobre fotografías y en la parte centras de la pantalla. Un ejemplo: http://www.iuvo.si/
8. ÉNFASIS EN LA TIPOGRAFÍA: Cada vez vemos más diseño tipográfico en las páginas web, lo cual nos parece un toque muy elegante y diferenciador. Si no, ¿Qué os parece esta web canina tan divertida? http://packdog.com/preview?hasdog=true
9. CARD DESIGN: Dos estilos de diseño que hay que empezar a tener muy en cuenta. El mejor ejemplo de card design lo tenemos en Pinterest. Coloca la información en tarjetas, aparentemente desordenadas, rompiendo las alineaciones horizontales y verticales que resultan más aburridas y más vistas. Nos evocan los míticos cromos de cambiar y, a la vez, es una manera fácil de colocar la información. Muy válida para el e-commerce. Un ejemplo que vemos en dribble http://bit.ly/1A1grAa.
10. FLAT DESIGN: El flat design o diseño plano es la alternativa a la tendencia de las webs que basan su imagen en grandes fotografías. Es la vuelta a lo básico, las formas geométricas, los iconos y el dibujo vectorial. Todo en una presentación, eso sí, con mucho scroll. Por ejemplo: http://www.themeskingdom.com/
11. MICROINTERACCIONES: Os habréis dado cuenta que, cada vez más, os saltan en la pantalla mensajes para interaccionar con la página que estáis viendo, ya sea suscribiéndote al newsletter, pulsando algún botón, o contestando alguna pregunta. Eso incrementa el look&feel del usuario, que se siente parte de la página, no sólo un espectador como antaño. Por ejemplo: http://emptystat.es/
12. COOKIES: El camino hacia la web 3.0 va de la mano con el creciente “acoso” de las cookies y los consejos en la publicidad de las páginas de que compres esto o veas lo otro porque has estado navegando por esos lugares. Esta tendencia, que puede gustar más o menos, irá en aumento por el avance de la web semántica y la inteligencia artificial que tenderán a dirigir la navegación. Donde más lo notamos por ahora es en las webs con más publicidad y las tiendas online. Podemos ver ejemplos en la publicidad de Facebook, de Amazon, etc.

Esperamos que hayáis encontrado interesante este post. Al final, aunque ansíes combinar estas tendencias para crear algo diferente, tienes que adaptarte a los gustos y deseos del cliente, que no siempre conoce las tendencias o le parecen demasiado arriesgadas. En nuestras manos está también hacer ver las ventajas y desventajas de cada opción, y hacer que se vayan conociendo un poquito más lo que va a marcar la estética de internet en estos tiempos. Menos es más. Impacto visual. Feedback. Responsive. Palabras a tener en cuenta.