Ahora que han pasado las primeras semanas del año, es el momento perfecto para conocer ya las tendencias de diseño web para 2020.
Es algo que me entusiasma investigar pues aprovecho la ocasión para adaptar mis proyectos de este año en base a las tendencias que observo que van a seguir los diseñadores web que sigo. Aquellos que forman parte del nivel más top y que marcan lo que se va a cocer en este mundillo un poco snob y etéreo en el que trabajo.
Mi conclusión general es que este año no van a haber grandes incorporaciones. Creo que las tendencias de diseño web para 2020 refuerzan el concepto de que una página web debe ser útil y agradable para el usuario, sobretodo el usuario móvil.
Cierto que cada año ello se traduce en una forma u otra, pero el hilo conductor es ese. A mi, que me va el diseño web moderno, limpio y con chispa, pues, claro está, me encanta.
A continuación verás para cada tendencia una explicación de la misma, así como varios ejemplos visuales que la ilustran de forma que se entiende bien.
Bueno, y para el final de todo, me he dejado estas ‘tendencias gurú’ de diseño web que sinceramente no creo que se vayan a ver mucho este 2020 pero que creo interesantes de mencionar pues quizás sí marcan los años venideros.
Tabla de contenidos
#1 Navegación ultra minimalista
Esta tendencia 2020 de diseño web da alas al diseño minimalista. Este tipo de diseño trata de quitar elementos innecesarios para despejar la pantalla. Es la supresión de distracciones llevada al extremo.
Ojo: Cuando digo minimalismo web, no tienes porque pensar en una web que es poco más que blanco sobre negro. Error.
Se lleva el diseño limpio, con elementos decorativos muy sutiles: el contenido es el protagonista.
¿Y cuál es el elemento que más ocupa y cuesta acomodar?
El menú.
Así que si agrupamos la navegación con lo que se llama un menú hamburguesa, liberamos un montón de espacio. Claro está, la gracia está en que se use tanto para resoluciones pequeñas (móviles) como grandes (ordenadores de escritorio).
Aunque a nivel de usabilidad y de SEO sea un dolor de muelas, el menú hamburguesa es una cosa que veo cada vez más. A mí particularmente, como diseñadora, me parece estupendo. De hecho, todo lo que sea despejar la pantalla me gusta.
Aunque aún me resisto a usarlo sin ton ni son, sí que me encuentro a mi misma tirando mucho de él en webs con una navegación muy extensa. Sobretodo en E-commerce.
Gracias al uso de dispositivos móviles, el usuario ya sabe cómo buscar las opciones de menú. Así que: ¿para qué cargar la vista con muchas opciones de navegación?
De hecho, hay otra opción. Se trata de una tendencia novedosa de este año.
En 2020, empezarán a circular webs que vayan mucho más allá, escondiendo totalmente la navegación:
Quizás sea un poco atrevido. De hecho no creo que se vea a menudo en los años venidos. Pero hay un beneficio clarísimo de ocultar la navegación: todo lo demás destaca de un modo que es difícil igualar con otras técnicas de diseño web.
#2 Imágenes simples (pero potentes)
Cada vez vemos menos el uso de imágenes a toda pantalla, las hemos sustituido por fondos con colores planos o degradados.
Pero si vamos a poner imágenes a toda pantalla, intentemos que sean muy sencillas y limpias, nada complejo visualmente. Eso queda ya en el pasado.
El motivo es que las imágenes complejas o con muchos detalles sobrecargan nuestra vista. Y en una era en la consumimos tanto contenido en Internet, el uso de una imagen limpia y diferente es un remanso de tranquilidad para el visitante.
#3 Pocos colores
Yo soy muy fan de usar pocos colores. Más que nada porque cuantos más colores le pones a una web, resulta más fácil que tenga aspecto de principiante.
Como en otros aspectos laborales y personales, menos es más (o mejor dicho, simple es mejor).
Los colores son difíciles de combinar, por eso, cada vez veo más diseños con uno o dos colores solamente. Podemos tirar de gradaciones del mismo color para tener mayor o menor contraste en función de lo que necesitemos.
#4 Animaciones
Esta tendencia ya la recogí en el post del año pasado (enlace al final). Si bien no es una novedad, sí es cierto que su uso se acentuará notablemente este 2020.
Con las nuevas posibilidades que tenemos para animar elementos en nuestra web, se nos ha abierto un gran abanico de movimientos e interacciones muy interesantes.
Los diseñadores ya no animamos con los anticuados GIFs, que pesan demasiado y tienen un movimiento poco fluido. Ahora animamos solamente con código, como el CSS, Javascript o SVG.
Esto nos permite crear experiencias más interactivas con el usuario, tales como efectos al pasar el ratón por encima de un elemento. Todo ello sin que afecte demasiado a la velocidad de carga de la web.
¿Pero por qué vuelven las animaciones?
La razón por la que se recuperan es que ayudan a la conversión y mantienen al usuario con la atención focalizada en nuestra página.
Si te interesa, te dejo con esta lectura rápida que muestra varias formas en la que las animaciones y, concretamente, las interacciones, ayudan a conseguir más engagemente entre los usuarios de una web: https://cxl.com/blog/animation-improve-user-experience/.
#5 Formato SVG
Esta tendencia 2020 en diseño web está relacionada con la anterior.
El SVG (en inglés, Scalable Vector Graphics) es un formato vectorial que permite mostrar imágenes en código.
La bondad de ello no es solamente, como ya he mencionado, que la imagen (en realidad no es una imagen al uso sino un código) pese mucho menos.
El beneficio principal del SVG es que, al ser un vector, se ve muy bien en cualquier resolución. Dicho de otra forma, podemos jugar con la imagen, hacerla pequeña o grande, que siempre va a conservar su calidad.
Fíjate en la imagen a continuación. En ella puedes comparar lo que pasa cuando amplías una imagen rasterizada (por ejemplo, una imagen en formato JPG o PNG) y, por otro lado, una imagen vectorial (formato SVG).
Como ves, el SVG no pierde calidad al hacer zoom y puede escalarse sin problemas.
Por último, el SVG, como ya hemos visto, al poderle aplicar estilos CSS o modificarlo con Javascript, es perfecto para las animaciones.
Por ejemplo, las dos que te he puesto a modo ilustrativo las puedes encontrar en nuestra página de inicio, junto a otras animaciones también hechas con SVG + CSS.
#6 Títulos enormes
Si el año pasado se pusieron de moda los vídeos grandes como fondo (vídeos héroes), en 2020 hablamos de títulos héroes (o hero headlines si te mola más).
Titulares con gancho que nada más entrar en la web a menudo te dejan claro a qué se dedican las personas que hay detrás, lo que pueden ofrecerte.
Si te animas a aplicar esta tendencia, reflexiona sobre qué palabras van a conformar este título héroe.
¡Resumir tu propuesta no es tan fácil como parece!
De todas formas, recomiendo, para que las tipos grandes den mejor resultado, usar un diseño web minimalista. Así el contraste será mayor.
#7 Fuentes Outline
Esta es sin duda la tendencia en diseño web para 2020 que más desprevenida me ha pillado y que más ganas tengo de implantar en los proyectos venideros.
Las fuentes outline no son otra cosa que las versiones trazadas de las fuentes web.
Me parece diferente y divertido.
Además, creo que se pueden crear efectos muy interesantes jugando con el fondo del texto.
#8 Diseños asimétricos
Cabe decir que a mi me parece que la simetría funciona mejor, pues permite focalizar la atención del usuario en la parte que más interese.
Sin embargo, los diseños asimétricos serán una de las mayores tendencias web 2020 y empezaremos a ver propuestas interesantes.
Las composiciones asimétricas deben estar muy bien pensadas: la distancia entre un diseño original y uno caótico es muy fina.
#9 Mezcla de fotografía y diseño gráfico
¿Por qué esto va a ser una tendencia?
Los diseños web de este año ya no van a quedar satisfechos únicamente con una fotografía profesional. Dicho de otra forma, que en una página web las fotos las haya hecho alguien que entiende del tema, es un básico.
En 2020 la fotografía va a unirse al diseño gráfico para transmitir mensajes personalizados. De esta forma se consigue trabajar mejor la marca y destacar entre la competencia.
Claro está, la gracia de esta tendencia es que la imagen resultante case bien con la personalidad de la marca.
#10 Mucho texto
En toda página web se trabaja tanto la parte gráfico como la parte textual. Se suele decir que lo visual capta la atención pero que son las palabras las que convencen en última instancia.
Hace ya unos pocos años en que el copywriting (es decir, la redacción de textos encarados a la conversión del usuario), así como como los textos SEO (encarados a posicionar en Google) están en auge.
Normal, pues el copywriting te permite obtener más de las visitas existentes en tu web y la redacción SEO mejora el posicionamiento SEO a través del buen uso de las palabras clave.
Entonces, ¿por qué esto es una tendencia de diseño web para 2020?
Los diseñadores web debemos ahora tener muy en cuenta los textos de una página web para llevar a cabo su diseño. De lo contrario, si tenemos un diseño moderno, minimalista y con cantidad de interacciones, queda raro usar textos encorsetados.
El diseño web juega un papel crucial para que los «tochos» de texto encajen de la mejor forma.
Cómo distribuyamos los párrafos y la forma de presentar esos interminables textos que gusten tanto a humanos como a robots es crucial. La lectura tiene que ser amena, fácil e incitar a seguir haciendo scroll.
Por eso nos ayudan mucho las webs minimalistas. En las que los contenidos están espaciados, en las que tenemos claro lo que es importante leer y lo que es accesorio.
¿Quieres ver un ejemplo de un diseño web que incorpora mucho texto? Paséate por nuestra web.
#11 Capas y elementos flotantes
Este 2020 muchas webs van a querer crear sensación de profundidad. Esta especie de ‘falso 3D’ hace que las páginas sean más interesantes.
Para ello es necesario saber usar bien las sombras suaves y lograr trabajar por capas. De confirmarse esta tendencia, el flat design dejaría de ser tan plano para en cambio reforzar el material design.
Tendencias en diseño web que no saldrán aún en 2020
Hasta ahora te he contado lo que lo petará este año.
¿Cuáles son las tendencias que se van a quedar (al menos por ahora) por el camino?
Diseños oscuros
Tras un 2019 en que muchas de las apps más famosas que usamos (Twitter, Instagram, etc.) han habilitado un modo oscuro, lo lógico es que ello se traslade a las webs.
Sin embargo, creo que este 2020 aún no veremos muchas webs que, o bien incorporen un modo oscuro (es un gasto poco asumible), o den protagonismo al negro en su único diseño.
Y eso que el negro es un color muy bueno para usar en términos de diseño web. Es elegante, aparienta lujo y todo lo que pongas encima (texto, botones, colores secundarios) resalta un montón, creando un buen contraste, permitiendo descansar a la vista.
Pero como decía, dudo que este año haya una explosión de webs oscuras con el negro de protagonista.
Interfaz de búsqueda por voz
Esta es supuestamente una de las mayores tendencias de diseño web para este 2020.
Y no lo entiendo.
A ver, llevamos unos años en los que, año tras año, se dice que todo el mundo tendrá un Amazon Alexa / Echo o un Google Home. De ser así, puede que una gran parte de las búsquedas se hagan por voz.
Si a alguien puede afectar esta posibilidad es al posicionamiento web, ¿no?
Pero lo que no acabo de ver es cómo se crea, en términos de diseño web, una interfaz visual para búsquedas por voz. Más de uno lo anuncia, pero nadie da pistas del cómo.
Esta «tendencia» me parece que son ganas de parecer un gurú. Veremos si me equivoco a la larga, porque este 2020 dudo mil que haya nada en este sentido.
Elementos 3D de verdad
La última tendencia de diseño web para 2020 listada era, te recuerdo, crear profundidad con el resultado de una especie de 3D.
Pero en este aportado me refiero al 3D de verdad. A esos elementos que puedes voltear en cualquier dirección.
Hay quién pregona que este año veremos un montón de 3D en el diseño web.
Lo dudo.
La explicación es sencilla: un 3D bien hecho tiene un coste elevado.
¿Y por qué invertir en 3D? Para la gran mayoría de páginas web, no lo veo nada claro.
De todas formas, para ponerte un ejemplo de una web que usa bien el 3D, y de forma extensa, he encontrado una de un diseñador que se ha hecho su web personal completamente en 3D. Y para más inri, le ha añadido muy bien el concepto de gamificación. Si te interesa verla (vale la pena, la verdad), puedes trastear con ella aquí: https://bruno-simon.com. Así verás el curro que supone.
Chatbots
Ya el año pasado se suponía que debíamos ver chatbots por un tubo. Como no es así, hay quién ahora cambia el año por el de 2020. No obstante, creo que tampoco serán tendencia este año.
Hay tres razones principales por las que creo que aún le queda tiempo para que los chatbots se usen mayoritariamente, si es que ese día llega:
- Suponen un coste extra. Los hay gratuitos, pero son malos. Los decentes, como todo, cuestan. Y sí, parece que hablo mucho de costes pero al menos para la mayoría de mis clientes, todo coste extra a lo que una web típica tiene, tiene que estar muy argumentado.
- Requieren trabajarlos. Para que el chatbot tenga cosas a aportar, más allá de lo que el usuario puede ver en cualquier footer (datos de contacto, etc.), se le debe llenar de contenido. ¿Este extra de curro y tiempo está justificado? En mi opinión, a menudo no.
- Y aquí el argumento definitivo: los chatbots no son humanos. Los usuarios de una página web tienen problemáticas e inquietudes muy dispares. Para muchos, el chat es con una persona en vivo. Por ello, descubrir que hablan con un «robot tonto» es frustrante.
Mis tendencias web 2020 favoritas
No sé si es porque me paso el día viendo webs, pero a veces me cuesta encontrar cosas nuevas en mi campo.
Hace un par de años que el diseño web ha dado un giro bastante interesante. Las tendencias se mantienen más o menos desde entonces, van surgiendo cositas nuevas, pero parece que hay varios elementos que se repiten cada año.
De todas las tendencias en diseño web para 2020 que te he listado, mis tres preferidas, y las que más voy a usar, son:
- Imágenes simples.
- Elementos flotantes.
- Fuentes outline.
Pero debo confesarte que hay otra tendencia, ésta del año pasado, que voy a seguir usando mucho: las ilustraciones personalizadas. Si quieres saber más, o saber qué otras cosas fueron tendencia, ojea el post de tendencias en diseño web para 2019 que hice.
