12 tendencias en diseño web

para 2015De Hazhistoria

Adaptación: A. Mucha Camarena

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:

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

12 tendencias en diseño web para

2015

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/

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

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

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/

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/

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/

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/

É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

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.

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/

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/

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.