Siempre que termina un año y comienza uno nuevo, circulan en Internet infinidad de conteos y listas de las tendencias que dominarán X o Y disciplina o sector. El diseño web no está exento, y cada año leemos interminables blog posts de tendencias en lo que al diseño de páginas web se refiere.
¿Cuáles serán las tendencias más populares que dominarán el diseño web en 2020? ¿Cuáles van de salida? Si eres diseñador o fan del diseño, estás de suerte, ya que después de leer mucho contenido al respecto, he hecho una lista de las tendencias que, a mi parecer, dominarán, o ya están dominando, el diseño de páginas web en 2020.
1. Hero Images minimalistas (sin imágen, sólo texto)
Este importante elemento del diseño web es, generalmente, la primera impresión que tiene un visitante sobre nuestra empresa. Se le conoce como Hero Image y suele ser el elemento visualmente más sobresaliente de una página web. Puede atraer e invitar al visitante a seguir viendo el contenido o puede provocar que abandone el sitio por falta de interés.
Las Hero Images le dan a una empresa la posibilidad de expresar su propuesta única de valor, su propósito y, como dijimos, es generalmente la primera impresión que nos llevamos cuando visitamos un sitio web.
Es el elemento con el que enganchamos o perdemos un visitante.
Suele contener información sobre temas importantes, como los valores de la empresa, algún beneficio sobresaliente de un servicio, el artículo más vendido, una noticia, etc.
Algunas Hero Images han experimentado con elementos que van más allá del texto sobre una imagen; otra sólo utilizan texto, evitan la imagen de fondo y dejan que la tipografía y el copy hagan todo el trabajo.
Podemos ver claramente esta tendencia es el sitio web Food Festival website donde se utiliza tipografía diseñada especialmente para la página con animación.
2. Uso de ilustraciones
El uso de ilustraciones en diseño web no es algo nuevo. Sin embargo, existe una creciente tendencia a utilizar ilustraciones bien hechas, detalladas y pensadas específicamente para un proyecto.
Utilizar ilustraciones ligeramente animadas ayuda a atrapar la atención de los visitantes y establecen otro tipo de comunicación con ellos. Son también excelentes complementos para el texto y bien utilizadas pueden ser muy útiles para destacar beneficios.
Sitios como el de Take a Break y el de Fixate son ejemplos de esta tendencia que, a mi parecer, empezará a tomar fuerza en los próximos meses. Los sitios utilizan ilustraciones no solo en sus Hero Sections, sino también a lo largo del sitio.
3. Colores y tipografía vintage
Para algunas empresas y negocios puede funcionar muy bien el uso de la nostalgia para transportar a los visitantes a tiempos pasados. Esto, frecuentemente está influenciado por otros medios de la época que se quiere evocar, como la televisión, las revistas, el cine o el arte. Especialmente, si buscan transportarnos a tiempos anteriores al Internet.
En 2020, es posible que encontremos pequeños elementos de nostalgia mezclados con elementos modernos, como en el sitio de Stepto & Son.
4. Uso de blanco y negro
2019 fue el año monocromático en términos de diseño web. En 2020 veremos cada vez más páginas web experimentando el uso de 2 colores o sin color; utilizando diseños basados en blanco y negro completamente (y, posiblemente, con un pequeñísimo acento de algún color). Para entenderlo mejor, pensemos en monocromático-minimalista.
Los diseños a dos colores estarán en boga, reinventándose para mantenerse como favoritos. Veremos combinaciones audaces de colores totalmente opuestos para lograr visuales verdaderamente vívidos.
El sitio del escultor David Guzmán es un sitio que utiliza poco color y marcos blancos para ofrecer una sensación de limpieza y modernidad y colocar las fotografías en un papel protagónico.
Otro buen ejemplo es el sitio del bufé de abogados Cahn Wilson, donde podemos ver una ausencia de color. Está diseñado únicamente en blanco y negro, con escalas de grises.
5. Uso de cuadrículas para presentar contenido
La mayoría de los sitios web están construidos usando una cuadrícula invisible cuya función es mantener organizados y alineados los elementos del sitio. Podemos anticipar que en 2020 estas cuadrículas serán más evidentes y visualmente dominantes, tomando un lugar preponderante en la estética de los sitios web e inspiradas en la popular tendencia de presentar información en forma de “tarjetas”.
Un ejemplo puede ser la página de proyectos de mi sitio web, donde presento algunos de los trabajos que he realizado. Elegí este tipo de diseño porque me gusta la forma limpia y organizada de presentar mi portafolio.
6. Tipografía contorneada y transparente
Una de las posibilidades que como diseñadores web disfrutamos actualmente es la posibilidad de jugar con un gran número de tipografías. Hace no mucho tiempo,existían pocas opciones en lo que a fuentes tipográficas para sitios web se refiere. Actualmente existen muchos fonts, con estilos más desafiantes y diversos, lo que ha establecido una tendencia hacia la diversidad de tipografías, lo que va de la mano con la siguiente tendencia en diseño web.
7. Tipografía de gran tamaño
Otra tendencia que tiene que ver con la tipografía es el uso de letras de gran tamaño. Cada vez vemos más páginas web que utilizan, por ejemplo, tipografía de gran tamaño en títulos, subtítulos, hero sections, etcétera.
El sitio web de la agencia Hallo Basis utiliza tipografía de gran tamaño (que además funciona como menú) en todas sus secciones.
8. Formas y patrones geométricos
Durante 2019 se vio una tendencia a usar formas orgánicas y fluidas. En 2020, regresará el uso extendido de figuras geométricas sólidas, líneas y patrones (en fondos, por ejemplo).
Un gran ejemplo de esta tendencia es el sitio de Future London Academy’s, que utiliza de forma increíble formas geométricas animadas en su Hero Section.
9. Animaciones activadas por el visitante
Estamos acostumbrados a ver animaciones que se activan de forma independiente, sin estar relacionadas a una acción realizada por el usuario en un sitio web. Una tendencia que está creciendo es la de tener en los sitios web animaciones que se activan por algo que el usuario hace (como pasar el puntero del mouse por una foto o botón o al hacer scroll, por ejemplo).
Y así como el diseño web empieza a tener la misma expresividad que puede plasmarse en un medio impreso, el movimiento y la animación le dan una nueva y emocionante dimensión. Un claro ejemplo de esta tendencia (y de otras que hemos visto en este artículo) es el sitio de Bike Bear.
10. Esquemas de color modernosos
Generalmente, notamos las combinaciones de colores que están de moda en ámbitos como la música, la ropa, medios sociales, etcétera. Muchas de estas tendencias de color serán aplicadas en el diseño web.
En 2020 veremos combinaciones de colores atrevidas y utilizadas estratégicamente para crear diferentes sensaciones en quien visita un sitio. El diseño web está volviéndose cada vez más audaz, utilizado colores muy saturados, con sombras y fondos oscuros, para dar un efecto de luminosidad.
Un ejemplo de un sitio web con esquema de color modernoso, puede ser el de Essentially Geared Wine Co., donde la combinación de colores, el uso de la fotografía, las sombras y la tipografía se combinan de forma muy acertada para crear una sección donde el producto es el elemento a resaltar y que nos da una sensación de modernidad, limpieza y congruencia muy bien lograda.
11. Elementos 3D inmersivos
Los visuales en 3D siempre nos han atraído. Hoy en día, existen las herramientas para diseñar elementos en 3D a un costo muy accesible y, en lo que la realidad virtual se vuelve más común y accesible (económicamente hablando), el diseño hiper-realista en 3D estará ocupando pantallas completas para crear experiencias inmersivas en los sitios web.
Puedes ver un ejemplo excepcional de esta tendencia en el sitio web de Gucci.
Así que mientras 2020 avanza, esperemos ver más elementos 3D inmersivos en páginas web para atraer usuarios y retenerlos por más tiempo.
12. Sombras suaves, capas y elementos flotantes
Los elementos que conforman esta tendencia están enfocados en crear la sensación de profundidad en un espacio plano, como lo son las pantallas. Las sombras suaves y los elementos que parecen flotar dan a los sitios web un toque de 3D light.
Los diseñadores pueden aprovechar estos elementos para llevar el diseño 2D un paso adelante, añadiendo sombras suaves y elementos superpuestos en capas para dar profundidad a una página. Bien utilizados, estos recursos dan una sensación de ligereza.
Un buen ejemplo del uso de estos 3 elementos combinados puede apreciarse en el sitio de Marc Mendell.
13. Layouts poco usuales, con diseño asimétrico
Veremos muchos sitios web con cuadrículas de diseño asimétricas o “rotas” para mostrar contenido. Los diseñadores web usarán esto a su favor para exponer contenido o productos de forma muy clara, limpia y atractiva en layouts donde se buscará minimizar lo más posible la monotonía.
El sitio Dada Data lleva esta tendencia al límite con un layout interesante.
14. Marcos sólidos y mucho espacio blanco
El diseño a pantalla completa (de borde a borde) es una tendencia aún muy utilizada. Pero hoy en día, los diseñadores están probando formas de tener mucho espacio blanco (o de otro color) en los sitios web, combinados con estructuras sólidas.
Combinado con el uso de marcos anchos en color blanco, lo anterior dará al diseño más estructura y limpieza.
Rodear los elementos de mucho espacio blanco crea las condiciones perfectas para que los elementos visuales sobresalgan y permite establecer una separación clara entre las diferentes secciones de una página web. Muchos de los ejemplos aquí mencionados hacen gala de este recurso.
15. Navegación minimalista
Con el auge de dispositivos usables (wearables), los diseñadores deben empezar a pensar en pequeño. No en el mal sentido, sino en el espacio limitado desde donde los usuarios llegan a los sitios web.
El área más afectada con esta limitación del espacio es la navegación (por ejemplo, los menús), que es la que da cohesión al contenido de un sitio web.
La navegación ha tenido que simplificarse para ajustarse a pequeños espacios y a una atención cada vez más dispersa por parte de los usuarios. La navegación en extremo minimalista resuelve problemas de usabilidad. Entre más sencilla sea la navegación, más tiempo pasarán los usuarios inmersos en un sitio web.
Al mismo tiempo, lo visual se está convirtiendo en lo más importante. Las fotos de gran tamaño y los vídeos funcionan bien para captar la atención de los navegantes, por lo que debemos asegurarnos que son poderosos y expresan bien el mensaje de una marca o empresa.
Tendencias de diseño web: ¿será 2020 un buen año?
Algunas de las tendencias en diseño web más importantes de 2020 involucran animaciones, ilustraciones y tipografía, mezclados con nuevos esquemas de color e interacción. Al parecer, la tipografía desempeñará un papel fundamental en el diseño web en 2020.
Los diseñadores y las marcas tendrán que moverse para dejar atrás la gran monotonía tipográfica que ha dominado Internet.
Si a lo anterior agregamos elementos visualmente muy llamativos, efectos 3D y combinaciones de color audaces, todo indica que 2020 será un gran año para el diseño web.
En el umbral de la nueva década, los diseñadores web están mirando simultáneamente al futuro y al pasado buscando inspiración. Vemos corrientes, movimientos y estilos opuestos que están integrándose, para que 2020 sea un gran año para el diseño web.
Así que si eres diseñador o fanático del diseño, espera encontrar muchas sorpresas mientras navegas la web. Si estás pensando rediseñar tu sitio web, también podría interesarte este artículo.
