Tendencias en diseño web en 2016

tendencias en diseño web

Las tendencias en cuanto a diseño evolucionan de forma constante y más en ámbitos relacionados con las últimas tecnologías. En mi opinión, estos son los cambios más importantes a seguir en cuanto a diseño web:

Colores planos

Los degradados hace tiempo que pasaron a mejor vida, los colores se han vuelto más puros y cercanos al RGB y los colores secundarios que nacen de su mezcla. Ahora podemos usar color rojo, amarillo, verde, morado, azul o naranja en grandes partes del diseño sin miedo. Ya no es necesario hacer tonos pastel o suavizarlos mezclándolos con gris.

En gran parte este cambio se lo debemos al éxito del diseño flat, que popularizó las paletas de colores simples pero elegantes. A partir de ahí han surgido versiones derivadas como el Material Design de Google o el Modern UI de Microsoft, que evolucionan ese minimalismo cromático permitiendo más libertad al diseñador pero sin salirse de unas normas claras y funcionales.

Por supuesto hemos dicho adiós a las texturas, usando colores planos y puros nuestras páginas web ya son suficientemente llamativas. ¿Quién las necesita?

Formas minimalistas

Ya no necesitamos llenar un diseño de formas complejas para que parezca trabajado. Ahora impera un minimalismo que parece retomar el estilo de la casa Bauhaus de principios del siglo pasado. Donde menos siempre es más y recuperamos la sobriedad de las estructuras cuadradas, que solo a veces suavizaremos con bordes ligeramente redondeados gracias a las facilidades que llegaron con CSS 3.

En este sentido, podemos también inspirarnos por Material Design, donde la sencillez en las formas contrasta con las animaciones fluidas que nos cambian el contenido sin que casi nos demos cuenta. Ya no cambiamos simplemente entre páginas mediante enlaces, sino que el contenido cambia partes de una única página para adaptarse al usuario.

Vuelven los efectos pero con disimulo

Por suerte no volvemos a la edad oscura de los efectos gráficos de los años 90, que llegaron en una época donde todos nos asombrábamos con interfaces con efectos de cristal, metal cromado o sombras exageradas, como en el estilo Aqua de las primeras versiones de MacOS X. Que llegaron a repetirse hasta el hartazgo de usuarios y diseñadores.

Ahora los efectos son muy sutiles y solo buscan resaltar partes del contenido en las que queramos llamar la atención del usuario. Con sombras muy transparentes o efectos de perspectiva para dar sensación de profundidad de forma minimalista, apenas apreciables si no nos fijamos bien. Ya no buscamos edulcorar el diseño, sino jugar con partes concretas del contenido para dirigir la experiencia de usuario hacía donde los diseñadores queramos.

Las tipografías reclaman su trono

Muy atrás en el tiempo quedó la época donde las tipografías de fantasía o graciosas llenaban los textos de un sitio web. Cuando todos vimos autenticas aberraciones de textos enteros en colores chillones con la odiada Comics Sans. Ese abuso de las tipografías llevó a que perdieran importancia durante años en el diseño web, se seguían usando pero de forma tímida y huyendo de excentricidades.

Pero ahora vemos el resurgir de las tipografías y ya no pretenden hacer más llamativos los textos, sino ser la base del propio diseño. Con titulares en fuentes serif llamativas, con apariencia vintage o incluso imitando haber sido escritas a mano. Con el contenido en fuentes san serif de formas muy limpias y que buscan la mejor legibilidad en cualquier dispositivo. E incluso, porque no, con detalles en fuentes mono espaciadas.

Y no solo en textos, gracias al auge de los frameworks CSS (como Bootstrap o Foundation) se han popularizado también las tipografías de símbolos. Ya no tenemos que hacer decenas de pequeñas imágenes .gif o .png para añadir iconos o símbolos a nuestros diseños. Ahora todo se resume en cargar una tipografía y usar los que necesitemos.

Los dispositivos móviles mandan

Y si hay algo que ha marcado clara tendencia en el diseño web en los últimos años es el responsive design. Si antes era lo aconsejable, ahora es simplemente imprescindible en cualquier diseño actual de un sitio web.

Vivimos en una época donde el 70% de las visitas a un sitio web son desde un smartphone o un tablet. Y aunque sigamos diseñando desde un ordenador debemos tener este dato muy claro. No solo a la hora de adaptar la estructura de la web o el menú a distintas resoluciones de pantalla, sino también al conseguir contenido escalable que sea perfectamente legible tanto en una pequeña pantalla de móvil, como en una enorme pantalla de 30 pulgadas de un PC o Mac.

Ejemplos

Ahora veamos ejemplos de estas tendencias en la conocida plataforma Wix. Si no la conocéis es un servicio donde todo el mundo puede tener una página web gratis. Solo hay que registrarse con una cuenta gratuita y usar su asistente paso a paso, que nos permite personalizar el diseño y añadir imágenes o texto como contenido de forma muy sencilla, incluso si no se tiene ninguna experiencia previa haciendo sitios web.

En este vídeo se puede ver como funciona el servicio de Wix, está en inglés pero tiene subtítulos en español:

Entre las muchas plantillas que tienen para que sus usuarios elijan la que mejor se adapta a sus necesidades, son más de un centenar, hay muchas que siguen estas nuevas tendencias en diseño web. Varios ejemplos:

Vemos muchas de las tendencias antes nombradas, como formas minimalistas, colores puros, uso de tipografías como núcleo del propio diseño y efectos sutiles. Y por supuesto, un diseño responsive que prioriza poder ver el contenido en cualquier tipo de dispositivo.

Aparte han estado adaptando algunas de sus plantillas para usar el efecto Parallax. Para quien no lo conozca, es un efecto que busca añadir sensación de profundidad a un sitio web, funciona mediante cambios en la velocidad de desplazamiento de las imágenes de fondo con respecto al contenido. Suena complejo pero es más sencillo de entender de lo que parece, las imágenes de fondo se mueven con mayor lentitud respecto al texto principal, de esa forma el usuario tiene una sensación 3D.

En su blog podeis encontrar más información sobre el efecto Parallax. Explican de forma detallada como funciona y en que situaciones es mejor usarlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *