1. Área Hero solamente con texto, sin imágenes

Las áreas Hero también conocida como el área “por encima del pliegue” o el área en donde se coloca un banner de gran tamaño en una página web, fueron más evidentes a lo largo de 2019 y para el 2020 la tendencia es a usar “solo texto”, sin imágenes. Es decir, se elimina la imagen de fondo típica y simplemente deja que la tipografía haga el trabajo.

Ejemplos:

El sitio web de Phase3

También puedes ver esta Tendencia de Diseño Web con The New York Times, que combinó una fuente personalizada con animaciones para su encabezado de solo texto para el sitio web de Food Festival.

2. Las Ilustraciones como Tendencias de Diseño Web para el 2020

Amber Leigh Turner dice que si bien las ilustraciones han prevalecido en los sitios web durante muchos años, existe una tendencia creciente de tener ilustraciones personalizadas, detalladas y bien ejecutadas y está seguro de que esta es una tendencia que recién comienza. Además, combinar las ilustraciones con un poco de animación realmente ayuda a captar la atención y puede emplearse como otra forma de comunicarse con sus visitantes. Las ilustraciones animadas son excelentes como una herramienta complementaria para el texto, y a menudo son mejores para ilustrar y comunicarse cuando se utilizan como características más sutiles y secundarias en lugar de la principal. Definitivamente, esta será una Tendencia de Diseño Web en el 2020.

Ejemplos:

Sitios web como DottedSign

Sitio web de Fixate

3. Colores y tipografía de inspiración vintage.

En 2020, la tendencia vintage tomará una forma diferente. En lugar de ir todo en un aspecto retro, habrá sitios web que toman partes y piezas nostálgicas y las mezclan con un estilo moderno.

Una de las partes más comunes de inspiración de diseño que se está utilizando en los sitios web hoy en día es usar colores y/o tipografía vintage como una forma de transmitir esta sensación de nostalgia.

Ejemplos:

El nuevo sitio web de Chrissy Teigen es un gran ejemplo del uso de una fuente de influencia vintage con un esquema de colores de inspiración vintage (terroso, pero brillante).

El popular sitio web de tendencias de tipografía Typewolf también usa tipografía y colores antiguos para influir en el diseño de su sitio mientras se mantiene moderno en estética. Su fuente combinada con el color de fondo se siente vintage, pero no anticuada.

4. Blanco y Negro

2020 será el año en el que más y más sitios experimentarán sin ningún color, solo en blanco y negro con muy poco en el medio. Monocromático y minimalista.

Ejemplos:

El sitio de Cahn Wilson está centrado principalmente en blanco y negro con imágenes en escala de grises. El sitio web es limpio, nítido, moderno y moderno con otros sitios contemporáneos. Es un gran ejemplo del diseño en blanco y negro que será Tendencia de Diseño Web en el 2020.

El sitio de Alexsandr Yaremenko también mantiene el esquema de color blanco y negro fuera de los ejemplos de su cartera.

5. Aumenta el uso de Tarjetas o Cuadrículas

La mayoría de los sitios web están diseñados en un sistema de cuadrícula invisible que ayuda a mantener los elementos de la página organizados y en línea. Sin embargo, Turner prevé ver estas rejillas más dominantes visualmente como Tendencias de Diseño Web para este año 2020. Considera que serán usadas en la estética del diseño principal, claramente inspiradas en la tendencia popular del diseño de “tarjetas”.

Ejemplo:

El sitio de Frames for Future es un gran ejemplo del uso de la cuadrícula como una estética de diseño en lugar de solo una herramienta de diseño. El contenido de su sitio está organizado en grandes rectángulos alineados en un formato de cuadrícula.

La mayor parte del sitio de Evergib también se presenta en una cuadrícula, con “celdas” de diferentes tamaños para darle dimensión, interés visual y cambiar la cadencia.

6. Tipografía contorneada

Una de las Tendencias de Diseño Web emergente es el empleo de la tipografía resumida, y se puede esperar ver esto cada vez más en 2020.

“Ser tipográfico distintivo se ha convertido en un imperativo en la web, lo cual es sorprendente teniendo en cuenta que no fue hace tanto tiempo cuando los diseñadores solo tenían un puñado de fuentes con las que trabajar”, explica Vinh de Adobe. “Tenemos más fuentes web; también necesitamos una tipografía web más atrevida y diversa”. No hay duda de que esto es evidente no solo en esta tendencia, sino en otras que ya se mencionaron aquí.

Ejemplo:

El sitio web de Phase3  mencionado al comienzo de este artículo presenta esta tipografía contorneada.

El sitio web de Redscout también utiliza una fuente contorneada grande como parte de su estética de diseño web, combinando animación para extraer el “relleno” de las letras dejando solo el contorno cuando se desplaza hacia abajo en la página.

7. Tamaños de fuente masivos – Tendencias de Diseño Web para el 2020

Sí, otra tendencia de diseño web basada en la tipografía, pero ¿cómo se puede pasar por alto los tamaños de fuente cada vez mayores en la web? Una tendencia hacia 2020 es la tipografía más grande que la vida, que se pueden leer desde el otro lado de la habitación.

Ejemplo:

Los sitios web de Redscout y The New York Times Food Festival (ambos presentados anteriormente en este artículo), son excelentes ejemplos de esta tendencia.

Baina lleva el tamaño de letra de su nombre a alturas muy grandes, ocupando casi la mitad de la vista de su página de inicio.

HalloBasis presenta una tipografía muy grande que llena la ventana gráfica como un estilo de navegación para ayudar a los visitantes a ir a diferentes partes de su sitio.

8. Formas y patrones geométricos.

Las formas más fluidas y orgánicas fueron tendencia en 2019. Por consiguiente, no es sorprendente que lo contrario de eso también esté de moda. Las formas geométricas, las líneas y los patrones están regresando para 2020.

Ejemplo:

El sitio web de Future London Academy presenta formas geométricas animadas en el área hero de tu sitio. También en línea con la forma geométrica y las tendencias de animación mencionadas anteriormente.

El sitio web de XXXI para su Introducción a la codificación utiliza formas geométricas de manera similar.

9. Animaciones activadas por el usuario

Por lo general, cuando pensamos en animaciones, las vemos sucediendo por sí mismas, independientemente de cualquier acción que podamos realizar en la página como visitantes del sitio. Sin embargo, una de las Tendencias de Diseño Web para el 2020, es tener animación activada por algún tipo de entrada o acción del visitante.

Vinh de Adobe ciertamente está de acuerdo: “Combinar la interacción del usuario con la animación de buen gusto y el tipo de buen gusto es una de las cosas más emocionantes que le suceden a la tipografía en una generación”. A pesar de que el diseño web es cada vez más capaz de coincidir expresivamente con el diseño de impresión, poner el tipo en movimiento en respuesta a las entradas del usuario agrega una nueva dimensión a cómo pensamos sobre la comunicación escrita ¡Más de esto por favor!

Ejemplo:

El sitio de Romain Avalle es un gran ejemplo de esta tendencia. En el centro de su sitio web, los contornos de las iniciales se mueven según la ubicación del cursor. Este tipo de animación interactiva ayuda a atraer al espectador y los ralentiza para descubrir la animación, lo que los diferencia de la experiencia del sitio web y no de un consumidor pasivo.

Seguramente, veremos mucho más de este tipo de animaciones en diseños web en este 2020.

10. Los esquemas de color de moda llegan como Tendencias de Diseño Web

Todos estamos familiarizados con las combinaciones de colores y los esquemas de colores que están de moda en otras partes de nuestras vidas, ya sea música, ropa, redes sociales, etc. Turner espera que en 2020 algunas de estas combinaciones de colores hagan su camino a los diseños de sitios web.

Un ejemplo de una combinación de colores de moda es el esquema de rubor primario azul y rosa pálido popularizado por Pinterest e Instagram.

Ejemplos:

El sitio web de Collate Art

Sitio web Datalands

Otros ejemplos de esquemas de colores modernos que veremos con más fuerza en el 2020 incluyen tonos de joyas (verdes, púrpuras), tonos terrosos (bronceados, marrones, verdes, texturas de madera) y esquemas de colores iridiscentes / perlados (pasteles que se funden como un líquido, dando un aspecto casi metálico).

Palabras finales en Tendencias del Diseño Web para el 2020

Algunas de las Tendencias de Diseño Web más importantes que probablemente veremos en 2020 incluyen animaciones, ilustraciones y tipografía, mezcladas con nuevos tipos de esquemas de colores e interacciones.

Sin embargo, la tipografía parece ser el gran ganador en el 2020.

Vinh en Adobe tiene esto que decir sobre la tipografía en las tendencias de diseño web a medida que avanzamos en una nueva década, “Diseñadores: y las marcas: deben superar la gran uniformidad que ha dominado la tipografía web. Todavía hay demasiadas empresas tecnológicas que intentan sacar ventaja de sus actividades menos aparentes a través de tipos de letra redondos y sin serifas. Y demasiadas marcas de consumo que usan tipografía serif para identificarse con esta noción ilusoria del clasicismo inconformista al estilo de Brooklyn”.

Desde la tipografía grande hasta la tipografía esbozada, los esquemas de colores de inspiración vintage hasta los esquemas de colores modernos, y todo lo demás mencionado aquí, 2020 parece ser un gran año para diseñadores y fanáticos del diseño, y por su parte, la Diseñadora Amber Leigh Turner dice no poder esperar a ver como estas Tendencias de Diseño Web cobran vida en el 2020.

Fuente: Escrito por Amber Leigh Turner para TNW y Publicado en julio de 2020.