¿Cómo? ¿Ya se acaba este año? Pues sí, ya llegamos a la recta final del año y quiero hacer recopilación de las tendencias de diseño web en 2019.
Después de unos cuantos años dedicándome a esto del diseño web, he podido ver épocas más o menos ajetreadas a nivel de diseño. Creo que entre el año pasado y este ha habido de verdad un auténtico cambio en diseño web. Y ya era hora.
¿Porqué creo que ha pasado esto? Por la democratización del diseño web.
Seamos realistas: a día de hoy, cualquiera sin muchas nociones puede montarse una web. Eso sí, que le quede bonita es otra historia. Ha llegado la época dorada para diseñadores en la que podemos sacar pecho y sentirnos orgullosos de nuestra tendinitis, ganada a golpe de lápiz y de clic.
La gente ha aprendido a valorar la diferencia entre un trabajo profesional y uno «de estar por casa». Ahora más que nunca es cuando se tiene que notar que una web la ha diseñado un experto y no un amateur. Y precisamente uno de los aspectos más notorios de un diseñador es el estar al tanto de lo trendy.
Te traigo en este artículo aquellas estrategias y tendencias que he tenido que perfeccionar al máximo este año porque son puro fuego en el mundo del diseño web profesional.
Mira otros años:
Tabla de contenidos
Estas son las 14 mayores tendencias de diseño web en 2019
#1 Mobile First
Ah… esos tiempos en los que hablábamos de Responsive Design. Ahora eso es cosa del pasado, eso se da por hecho. Una web que no es responsive es como un coche sin cinturones: una reliquia. La tendencia ahora es tener una web «Mobile First».
Diferencias entre responsive design y mobile first
La diferencia entre estos dos métodos de diseño web reside en el proceso mediante el cual se elabora el diseño web.
En el responsive design diseñamos los elementos de la web para la pantalla de un ordenador y vamos adaptándolos a pantallas más pequeñas. Con lo que ocurre esto:
En el mobile first, en cambio, diseñamos para pantallas de móvil y vamos enriqueciendo a medida que aumentamos el tamaño del dispositivo. Con lo que el resultado es:
En ambos casos el resultado a nivel técnico es el mismo: una web que se ve bien en ordenadores y móviles.
Pero el resultado conceptual es muy diferente. La ventaja es que mejora la experiencia del usuario móvil. Y esto es importante pues la mayoría del tráfico en Internet a día de hoy viene desde dispositivos móviles.
Ejemplos de la tendencia diseño mobile first
El mobile first no es fácil, hay que pillarle el tranquillo. Reconozco que al menos a mí aún me cuesta invertir el proceso de diseño.
Incluso los clientes con los que trabajo este 2019 comentan que es raro para ellos tener que valorar más el diseño web móvil que el del ordenador.
Sin embargo, los gigantes de Internet llevan años optimizando esto del Mobile first. Los ejemplos los tienes en webs que visitas a diario.
Por ejemplo, Youtube fue de los primeros en anunciar oficialmente un rediseño Mobile First. Mucha gente opina que su app es mucho más intuitiva que la web para escritorio.
#2 Títulos grandes
Esta tendencia de diseño web es de las que más me ha costado implementar en 2019. El motivo es que soy una persona algo tímida, y poner unos titulazos nada más entrar en una web me da algo de corte.
Además, es muy difícil meter títulos grandes y que queden bonitos. Por eso es necesaria tener algo de experiencia con las tipografías para implementar esta tendencia sin morir en el intento.
No obstante, he de admitir que un encabezado grande tiene un efecto WOW innegable.
Por ejemplo, este año hemos rediseñado nuestra web. He aprovechado esta tendencia para venirme arriba y poner títulos grandes en muchos apartados de la web.
#3 Tipografías cuidadas
Bueno, bueno, bueno.
Esto de las tipografías ha pasado a otro nivel en 2019.
Hemos pasado de ver «Roboto», «Lato» y «Open Sans» a ver una variedad de tipografías muy interesante. De hecho, la parte más interesante de esta tendencia de diseño web yo diría que es que por fin hemos dado el salto sin miedo a las tipografías con serifas en web.
¡Y me encanta! Aportan legibilidad al contenido y un toque de clase innegable.
Eso sí, úsalas con cuidado: no son aptas para principiantes. Usar este tipo de tipos requiere tener una personalidad de marca muy fuerte y atrevida.
Por ejemplo, fíjate en Vogue y cómo usa las tipografías en su web. ¿Alguien puede dudar de su elegancia?
Si quieres saber más sobre cómo usar tipografías en la web, te dejo este artículo que escribí hace un tiempo.
#4 Formas orgánicas y naturales
En un post que hice sobre tendencias de diseño en 2017 hablaba de que las formas geométricas estaban empezando a pisar fuerte. Pues dos años después esta tendencia ha evolucionado y ahora podemos ver cantidad de formas geométricas integradas con formas más orgánicas y naturales.
Burbujas deformadas, lineas curvas e irregulares, triángulos y cuadrados… todo integrado en un elemento gráfico de lo más interesante que le da un toque muy moderno a cualquier diseño.
Mira como estas dos webs han incorporado esta tendencia de 2019 en su diseño web.
#5 Ilustraciones
Cada vez veo más webs con ilustraciones personalizadas. Esta tendencia está pisando fuerte por dos motivos:
- Porque aportan personalidad, sobre todo en empresas de servicios que no tienen producto a mostrar.
- Porque en formato SVG pesan muchísimo menos que una imagen en .png o .jpg, y eso ayuda a la velocidad de carga de la web.
Tengo que admitir que me encanta esta tendencia de 2019.
Debido a ello, he optado por implantarla con fuerza en el diseño de nuestra nueva web.
#6 Animaciones
Con las ilustraciones personalizadas parece que han venido también las animaciones.
Las posibilidades son infinitas, ya que gracias al avance de los navegadores podemos animar cualquier imagen sin necesidad de crear GIFs. Buena noticia pues un GIF suele pesar mucho.
Pero no vale cualquier tipo de animación. En 2019 tienen que ser animaciones suaves. No deben llamar la atención demasiado. Sólo lo suficiente para que el ojo humano lo capte y focalice su atención en ese elemento que se mueve.
Las animaciones bien hechas nos ayuda con las conversiones y es un recurso para darle un toque a ese «Call to action» que nos interesa.
Como verás en nuestra web he puesto MOGOLLÓN de animaciones. Quizás en 5 años me avergüence de ello, ¡quién sabe!
#7 Minimalismo
Hace años que el minimalismo es una tendencia en diseño web. De hecho, desde lo del Flat design.
Esta tendencia cobra especial importancia si tenemos en cuenta la cantidad de webs que llegamos a ver en un día. Y muchas de ellas tienen estilos diferentes.
El minimalismo en 2019 pretende aliviar el dolor de cabeza en términos de diseño web. Mantener la pantalla limpia, sin demasiadas florituras, nos permite navegar más tiempo por una web sin que nos explote la cabeza.
Sin embargo, resulta difícil mantenerse fiel al minimalismo porque generalmente queremos demostrar todo lo que podemos hacer en nuestra web.
Ahí reside la importancia del criterio del diseñador web.
¿Cuantas veces habré oido por parte de un cliente «esta sección la veo un poco sosa»? Demasiadas. Siempre contesto lo mismo: no analices solamente la sección que ves, analiza la web en su globalidad.
Y es que soy la primera a la que le encanta el efecto «wow», pero me lo reservo para esa sección de la web que más me interesa vender.
Si a todo le ponemos picante, al final la comida no nos sabe a nada más que a picante, ¿no crees?
Te dejo con un ejemplo que sigue la tendencia de diseño web en 2019 del minimalismo. Sin duda, es agradable y permite descansar la vista.
#8 Diseño material
El minimalismo es tendencia, sí. Pero el «menos es más» ya no es una regla que aplique al diseño web.
La frase de ahora es:
Simple es mejor.
El minimalismo llevado al extremo puede llegar a ser aburrido. Las webs americanas son un buen ejemplo y algunas son poco más que blanco sobre negro.
El diseño material (o material design) es una tendencia impulsada sobre todo por Google, en el que recuperamos algunos elementos del maximalismo de las décadas de los 90 y 2000.
Entre otras cosas recuperamos los sombreados, los degradados, animaciones y formas más naturales. Así devolvemos la profundidad y naturalidad a los elementos digitales: los acercamos más a una experiencia física.
La idea es mantener la simplicidad gráfica pero añadiendo un poquito de sal al asunto.
Aunque llevo tiempo tonteando con esta tendencia, hasta este año 2019 no me he tirado del todo a la piscina con ella.
¿Por qué?
Sentía que necesitaba crecer más en el concepto de la simplicidad. Dicho de otra forma, hay que dominar el arte de simplificar el diseño web para aplicar bien el material design.
Pero he de admitir que una vez me he atrevido me encanta los resultados que estoy logrando.
Mira qué web diseñé este año basándome en el material design:
#9 Colores vibrantes
La tendencia del punto anterior nos ha llevado a arriesgar más con los colores. La mayoría de webs tienen el fondo blanco, con lo que aplicar colores vibrantes nos aporta las vitaminas que tanto necesitan para llamar la atención.
Personalmente soy más de colores suaves. De hecho, debo confesar que no me gusta demasiado esta tendencia. Me ocurre igual que me ocurría con el material design: siento que es demasiado para mí.
Sin embargo, siendo sincera debo admitir que, bien ejecutada, esta tendencia de diseño web permite llegar a diseños espectaculares.
Por ejemplo, Spotify siempre ha destacado por usar colores vibrantes y enérgicos.
#10 Degradados
Degradados o gradientes…. llámalos cómo quieras, pero ¡úsalos!
La era del brilli brilli ha vuelto este 2019 gracias a la explosión de colores y los degradados tienen mucho que ver.
Me encanta esta tendencia, aunque no es fácil de dominar.
Cualquier combinación de colores no nos sirve. Tienen que ser colores que se complementen y que se integren bien en todas sus tonalidades.
Si quieres que te salga bien el degradado, y no acabes con un churro, te aconsejo adquirir nociones de teoría del color.
Aquí tienes unos cuantos diseños web que he hecho este 2019 siguiendo esta tendencia:
#11 Videos de fondo
Aunque esta tendencia ya hace años que la observo, todavía está en la cresta de la ola.
Añadir un video como fondo a una sección siempre da un toque de atención. Ayuda a mantener la atención del visitante y a explicar una historia.
A menudo un video de unos pocos segundos explica más rápido a qué te dedicas.
Por eso solemos encontrar el video de fondo nada más entrar en una web, en lo que llamamos el above the fold: es la sección más importante de toda tu web ya que es la que debe convencer al usuario de seguir en tu web.
He aquí un proyecto en el que optamos por usar un vídeo de fondo:
La desventaja que presenta esta tendencia de 2019 es que hace que la web cargue más lenta, ya que los videos suelen pesar mucho.
Si quieres poner un video de fondo, o bien no te importa la optimización de carga de la página, o lo pones en una página que no sea la Home.
Personalmente pienso que los vídeos de fondo van a acabar como los pases de diapositivas: sobreutilizados y desfasados. Y me sabe mal, porque me gustan, pero es que veo vídeos en demasiadas webs y sin un motivo concreto.
En mi opinión, los vídeos en el above the fold son ideales para webs que venden experiencias o que quieren comunicar más fácilmente el uso de su producto o servicio porque es complicado de entender en una frase.
#12 Velocidad de carga o WPO
El punto anterior me viene de perlas para introducir este concepto.
Aunque hace tiempo que existe y no es nada nuevo, la creciente competencia por aparecer lo más arriba posible en Google ha convertido la velocidad de carga en una tendencia en el diseño web.
El WPO (Web Performance Optimization) trata de optimizar a tope la web para que cargue lo más rápido posible.
Esto es importante puesto que Google puntúa, entre otras cosas, la velocidad de carga de la web. Como normalmente lo que queremos posicionar bien es la Home, es la página que se suele optimizar más.
A nivel de diseño, esta otpimización suele suponer hacer lo siguiente:
- Usar imágenes en el formato más ligero posible.
- Evitar usar archivos pesados (cómo vídeos).
- Usar animaciones creadas con CSS (y no GIFs).
- Escoger las fuentes tipográficas en función del tiempo de carga.
- Minimizar el código usado para presentar el diseño web.
Desde luego las tendencias actuales ayudan a optimizar la carga de las webs. Y esto también es una buena noticia para el medio ambiente: ¿sabías que los servidores web contaminan igual que todos los aviones del mundo?
Así que ya sabes, si quieres seguir las tendencias de diseño web en 2019, ¡ponte verde!
#13 One Page
Un diseño One Page es aquel que presenta toda la información de tu negocio en una sola página. Es decir, se trata de una web con solamente una página de portada o Home.
Este tipo de diseño está en auge por dos grandes motivos:
- No todas las empresas tienen tanto a explicar como para dedicar un mínimo de 700 palabras a cada página de su web. Con una página a modo de tarjeta de presentación tienen suficiente.
- El coste del diseño de una web one page es menor que el de una web corporativa completa. Hay empresas que no quieren renunciar a tener una imagen en Internet pulida y profesional. Por eso, cuando el presupuesto es reducido, optan por este tipo de diseño.
Una característica principal de la One Page es el menú de navegación. Sus opciones hacen que nos deslicemos arriba y abajo en la página. De este modo, existe cierta navegación, aunque sin cargar páginas nuevas.
Te dejo con un proyecto One Page que diseñé en 2018:
#14 Parallax (efecto de scrolling)
El parallax es el efecto que hace que los elementos de una web se muevan a velocidades distintas a medida que nos deslizamos en ella.
Tradicionalmente en diseño web se aplicaba a las imágenes de fondo, pero hoy en día se puede aplicar a cualquier elemento y modificar las velocidades.
Esta es una tendencia diseño web que ha irrumpido muy fuerte este año. Y es que gracias al avance de los navegadores, cada vez es más seguro y estable aplicar estos efectos en las webs.
El resultado es algo que el usuario no espera y le descoloca. Por este motivo, suele atraer bastante su atención.
Por ejemplo, fíjate en este diseño web de 2019 en el que usé parallax en diferentes elementos y a velocidades distintas:
Mi selección de tendencias de diseño web 2019
La verdad es que 2019 ha sido un gran año para mí como profesional. He tenido la suerte de encontrarme con clientes maravillosos que han confiado en mí y me han dejado disfrutar jugando con estas tendencias de diseño web en 2019.
Gracias a eso he podido crecer y aprender muchísimo con sus proyectos. El resultado ha sido un año repleto de webs muy modernas y que estoy segura de que durante años van a seguir actualizadas a nivel de diseño.
Porque cuando reviso los posts de tendencias de años anteriores, me doy cuenta que lo que estaba en la vanguardia en 2015 sigue viéndose moderno en 2019. Así que vale la pena atreverse con las tendencias de cada año.
Si me preguntas cual de estas tendencias en diseño web son las que más me gustan y por las que más pongo mi tableta gráfica en el fuego serían:
- Mobile first.
- Diseño material (o material design).
- Optimización de carga o WPO.
- Ilustraciones personalizadas.
- One pages.
- Parallax discreto y poco convencional.
Estas son mis 6 favoritas y las que más aplico este año en mi diseños web en WordPress.
No quiere decir que el resto no me gusten, sino que estas son las que son una apuesta segura si quieres que tu web siga siendo bonita, funcional y moderna en 2019 e incluso en 2023.
Y a ti, ¿qué tendencia de diseño web de 2019 te gusta más? ¿Y la que menos?
