10 tendencias de diseño web imposibles de obviar en 2019

  Agencia, Empresa, Medios

Como cada año, hice un profundo rastreo por Internet en busca de las nuevas tendencias presentes en los sitios web en 2019. En mi investigación he tenido en cuenta desde el diseño en sí a los colores, pasando por la tipografía y el uso del espacio en blanco. Mi objetivo: señalar cualquier elemento que pueda marcar las tendencias de diseño web de 2019.

Debajo encontrarás 10 tendencias que, muy probablemente, vayan cobrando peso y mayor popularidad a medida que el calendario avance a lo largo del año.

1. Cuadrícula rota y diseños asimétricos

Esta tendencia la incluí en la guía de predicciones de diseño del año pasado, pero parece que en 2019 sigue muy presente.

El concepto de cuadrícula en términos de diseño es un plano imaginario con líneas horizontales y verticales, utilizadas para ayudar a posicionar los elementos en la página o pantalla. En la mayoría de los sitios web, la cuadrícula es fácil de identificar: puedes mirar hacia abajo a la izquierda del sitio web, por ejemplo, y ver el logotipo, el título y el contenido, alineados juntos en la mayoría de los casos. Cuando estás ante una cuadrícula rota o irregular, los elementos se disponen en el plano de manera más imprevisible y hace que el diseño sea menos rígido.

El sitio web de Times Talks muestra un diseño de cuadrícula irregular en la mayor parte de la página, especialmente en la zona mas destacada (como se muestra arriba), así como en diferentes secciones del sitio.

Este tipo de diseño —que favorece lo inesperado, conduce a nuevos límites y experimenta con la asimetría— no es ninguna novedad de última hora y ya lleva algún tiempo poniéndose en práctica. Se ha utilizado para destacar respecto a la norma, llamar la atención o, simplemente, para experimentar con el diseño. En cualquier caso, en 2019, lo que se ve es que la tendencia se ha establecido y que cada vez es más popular en la web.

El Studio Revelé experimenta con la estética de un diseño asimétrico de cuadrícula rota en su página de inicio (los círculos pueden moverse alrededor de la pantalla para facilitar más este concepto de cuadrícula irregular).

Creo que en 2019 seguirá creciendo el uso de la cuadrícula rota y los diseños asimétricos, y que poco a poco iremos dejando atrás las cuadrículas rígidas que tanto hemos usado en los últimos años. Mi predicción es que a la experimentación con la cuadrícula y la asimetría en los diseños web aún le queda mucho camino por delante.

2. Diseños y elementos fluidos u orgánicos

Poco a poco, nos estamos alejando de las líneas rectas propias de los diseños planos y comenzamos a experimentar con formas y líneas más fluidas. A este tipo de formas —hablamos de aquellas que no son círculos, cuadrados, rectángulos o figuras con lados rectos— se las conoce habitualmente como figuras fluidas u orgánicas.

Una pequeña parte de la página de inicio de Wandering Aimfully presenta formas y líneas orgánicas que se ven detrás de las imágenes del círculo y como un fondo sutil del titular que hay debajo de ellas.

Al deshacernos de las líneas muy rectas y casi clínicas que estamos acostumbrados a ver online, y reemplazarlas con elementos extraídos de la naturaleza y la vida (como formas de estanques y lagos o trozos de papel), estas formas y líneas orgánicas pueden hacer que los diseños se sientan más cercanos y se alineen con la naturaleza humana.

El sitio web de Mawla utiliza formas y líneas orgánicas en su página de inicio, especialmente en la zona más destacada y visible.

En 2019, las formas típicas que se han utilizado en el diseño web durante tanto tiempo (véase círculos y cuadrados) se unen a otras más orgánicas o son directamente reemplazadas por ellas, ofreciendo un look nuevo que aporta intriga y despierta curiosidad por el sitio web.

3. Estética nostálgica / diseño retro

Lo viejo vuelve a ser nuevo. Más allá del diseño plano, donde la experimentación parece no tener límites, también ha llegado el momento de recuperar elementos de diseño antiguos con un toque de nostalgia.

El sitio web de Statamic presenta un diseño con un esquema de colores retro con claras reminiscencias a las imágenes y a la paleta cromática brillante que se usaba en los ochenta.

Experimentar con la nostalgia y los estilos retro puede crear una bonita yuxtaposición entre el diseño de antes y el de ahora. Y lo que hace incluso más interesante a este ejercicio es que podemos recrear o reinterpretar estilos de diseño anteriores a la generación web, por lo que para muchos usuarios jóvenes los diseños serán totalmente novedosos.

El sitio web de Great Jones muestra un esquema de color y una tipografía muy de los setenta, con una estética que era muy popular antes de la simiente de Internet: ARPANET de 1983.

El pasado tiene un amplio influjo en la actualidad, y lo que se ve en 2019 es que cada vez más sitios web se adhieren a todo tipo de estilos vintage. Algunos de estos elementos de “otro tiempo” incluyen esquemas de color de tendencias de diseño de antaño y tipografías que nos llevan muchas páginas atrás en el calendario.

4. Tratamiento de imágenes para mejorarlas / elevarlas

Las imágenes siempre han presentado oportunidades de diseño interesantes, sobre todo en la web. Se pueden poner en círculos, convertirlas a blanco y negro, agregarles sombras… en fin, hay un montón de técnicas que los diseñadores utilizan para mejorar el contenido y/o llamar la atención de los sitios web (aunque podría ser extensible a casi cualquier otro tipo de diseño).

El sitio web de KOBU presenta imágenes recortadas de sus profesionales en lugar de mostrarlos en una imagen estándar, lo que permite que el diseño fluya entre los “recortes” de los diferentes miembros del equipo.

Llevar el tratamiento del contenido visual un paso más allá puede atraer la atención hacia una imagen o desviarla hacia otro lado. Todo depende de lo que se quiera lograr. La mayoría de los sitios web suelen tener una imagen muy grande destacada que abarca todo el ancho de la página, ocupando una gran cantidad de altura y sin modificar la imagen demasiado. Eso sí, cambiar la forma en la que se presentan las imágenes, por ejemplo recortándolas, es una tendencia de diseño que ha empezado a pegar con fuerza en 2019.

El sitio web de Drip muestra imágenes que han sido recortadas y a las que se les ha añadido dibujos y siluetas para realzar la imagen y hacer mayor énfasis en el diseño del propio sitio web.

En lugar de la ejecución de un solo tipo de tratamiento de imagen, lo que se ve son sitios web con tratamientos por capas que llevan la imagen tan lejos como sea posible, tanto para atraer la mirada sobre ella como para derivar la atención a otra parte. Los tratamientos monocromáticos, los recortes o la adición de patrones en la parte superior para hacer una nueva imagen de marca son cada vez más profusos en el diseño web de 2019.

5. El monocromo y la ausencia de color

Tener millones de colores al alcance de la mano es genial, pero ¿qué pasa si te limitas a un solo color o a ninguno? Si lo haces bien, este tipo de diseño te ayudará a elevar tu pieza y dejar una huella más profunda y duradera con ella.

El sitio web de Digital Bro adopta un esquema de color muy monocromático, utilizando un tono determinado de amarillo y rara vez alejándose de él (ten en cuenta que el negro y el blanco se consideran neutros).

Limitarse a un solo color puede ayudar a fortalecer la imagen de marca aunque añade restricciones en términos de flexibilidad de diseño. En un ecosistema en el que la mayoría de los sitios web utilizan entre dos y cinco colores, usar solo un color podría tener un potente efecto para destacarse de la competencia y generar una huella visual potente.

El sitio web de Climate apuesta por un esquema de color en la escala de grises, dejando de lado el resto del arco cromático y utilizando el gris (blanco y negro) incluso en los vídeos.

Ir más allá y eliminar el color por completo es definitivamente una opción si lo que se busca es simplificar la paleta de colores (en arte y en diseño, el negro, el blanco y el gris no se consideran colores, se los denomina neutros). Y esto es lo que están haciendo muchas compañías en 2019 para demostrar que no es de color todo lo que brilla en la web.

6. Elementos de diseño superpuestos

En línea con las cuadrículas irregulares y los juegos asimétricos, los elementos superpuestos pueden resultar muy efectivos para generar un foco de interés sobre un contenido específico de la página. Su efecto conecta con lo inesperado, ya que al ver una web estamos acostumbrados a que los elementos tengan su propio espacio y estén separados de otros elementos que puedan estar a su alrededor (de hecho, es muy raro que se toquen entre ellos).

El sitio web de Mad Studio presenta los elementos superpuestos como seña de identidad del sitio, todo ello enriquecido con animaciones sutiles que consiguen darle una sensación tridimensional.

Cuando se hace con una intención medida, la tendencia de superposición de elementos en una página puede ayudar a realzar la estética general de un sitio. Hay que advertir que para el mundo móvil llevar a cabo este tipo de idea puede ser difícil, ya que si los elementos superpuestos no están bien hechos y dispuestos de manera clara pueden crear confusión y frustración para los usuarios.

El sito web de Hers presenta elementos superpuestos en algunas partes importantes, incluyendo la zona más destacada de su página de inicio.

Usar elementos superpuestos que comparten un mismo espacio es una tendencia que ha ido creciendo a lo largo de 2019, y lo que se busca con ella es un efecto de volumen cercano a lo tridimensional.

7. Reimaginando la zona de titulares y de imágenes destacadas

Como indiqué anteriormente, la mayoría de las zonas destacadas (formalmente conocidas como “áreas por encima del pliegue”) cuentan con una imagen grande que abarca la mayor parte de la ventana visual, a menudo con un poco de texto en la parte superior para enfocar la atención del usuario. Lo cierto es que en los últimos dos años no ha habido mucha experimentación con este área de los sitios web (sin duda, la más importante).

Aquí vemos el original enfoque de Zoo Creative, que trata el área destacada como si fuera un cartel con un interesante uso de la animación y color.

Si bien algunos sitios web han empezado a llevar un poco más lejos los límites en lo referente a la zona más destacada de sus sitios web, dejando atrás las típicas imágenes ocupando el ancho y con un texto sobre ellas, todavía queda recorrido para seguir experimentando en el diseño de este área.

El sitio web de Andreas Nymark muestra una zona destacada con una gran espacio en blanco y un sencillo titular debajo (algo que también da forma a otra tendencia que veremos más adelante).

En 2019 se vislumbran diferentes tipos de experimentación en esta zona destacada de un sitio web, algunas de las variantes incluyen minimizar el área o cambiar la presentación del contenido (y usar algo alternativo a una imagen a todo lo ancho). Y todo con el mismo objetivo: captar la atención a primera vista.

8. Navegación a lo grande y experimental

Da la impresión de que todos los años surge una tendencia en lo relativo a la navegación web. Quizás no nos encontremos con demasiadas nuevas ideas porque, sin duda, es uno de los elementos más complejos de diseñar. Y es que es tan esencial para el uso de la web que muchas veces es un auténtico quebradero de cabeza encajar funcionalidad con estética.

El sitio web de 56 Digital presenta un cuadro de navegación bastante grande, situándolo en el centro del sitio en lugar de hacerlo en una pequeña parte esquinada.

En 2019, vemos algunos ejercicios experimentales en torno a la navegación que confirman la tendencia. Pero en lugar de solo cambiar algunas cosas como pueden ser el emplazamiento del menú en la página, el tamaño de las fuentes o el diseño en sí mismo, la experimentación llega incluso a convertir la navegación en la parte principal del sitio web, llevando el foco de atención hacia ella.

El sitio web de Gander tiene sus botones de navegación en las cuatro esquinas del sitio en lugar de presentarlos en la típica barra en la parte superior o inferior.

Como la navegación se ha convertido en una tendencia del propio diseño, no me cabe duda de que veremos cómo sigue ganando peso en los sitios web, con páginas de inicio que no serán más que cuadros navegables y menús y barras en los que las animaciones tendrán más peso sin restar funcionalidad.

9. Más que solo un espacio en blanco

Usar el espacio en blanco de manera efectiva es un recurso que los diseñadores llevan poniendo en práctica desde hace décadas. Sin embargo, lo que quizás no sea tan común es el uso de una gran cantidad de espacio en blanco o incluso hacer que el espacio en blanco sea el punto focal por encima del contenido en sí.

El sitio web de Daniel Boddam utiliza un gran espacio en blanco en la zona del encabezado, atrayendo las miradas precisamente por ese efecto vacío.

El uso de espacios en blanco exagerados contrasta con las razones por las que solemos usar los espacios en blanco: demarcar márgenes o zonas para dar un descanso a nuestros ojos. Un espacio en blanco más amplio, sobre todo en sitios donde no se necesita, se convierte en sí mismo en una seña de identidad del diseño y crea sobre él un punto focal casi magnético que no deja indiferente a nadie.

El sitio web de Maxime Rimbert apuesta por un gran espacio en blanco (en este caso negro) como gancho estético para dirigir la atención sobre las obras que se ven debajo y, al mismo tiempo, distanciarlas de la introducción.

En 2019 hemos visto que empiezan a surgir sitios web que utilizan el espacio en blanco como una declaración estética de intenciones o, directamente, lo convierten en el protagonista de la pieza, algo impensable en el pasado; y es que hasta hace poco la idea generalizada era que un exceso de espacio en blanco era un espacio desperdiciado.

10. Llevando más allá los límites de la tipografía

Aunque siempre se espera que los diseñadores experimenten con la tipografía, lo cierto es que la web es más complicada que el papel a la hora de causar un efecto wow. Eso sí, a medida que la codificación se vuelve más sofisticada, la experimentación con tipografías en la web también ha empezado a conseguir resultados más espectaculares.

El sitio web de Kurppa Hosk experimenta con tipografías a las que les ha añadido animación y que interactúan con el usuario. El texto explota y forma un círculo alrededor del cursor del usuario.

La experimentación en torno a la tipografía puede incluir cortar o quitar partes de letras y palabras de manera intencionada (teniendo en cuenta el espacio negativo para completar el resto de las letras), utilizar fotografías dentro de la tipografía, escribir sobre una línea o forma diagonal, animar la tipografía y mucho más.

El sitio web de ARCHE68 presenta un juego tipográfico que busca ir más allá de las dos dimensiones. La tipografía no solo tiene un efecto de flexión, sino que también se desplaza automáticamente hacia la izquierda y hacia la derecha y se mueve con el cursor hacia arriba y hacia abajo (en este sitio, como vimos en otra tendencia de diseño anteriormente, la navegación se convierte en contenido y en elemento visual fundamental de toda la web).

En 2019, la experimentación y la búsqueda de nuevos límites con la tipografía es una tendencia sólida que seguirá ofreciendo novedades. Y a medida que siga avanzando la tecnología para codificar la tipografía para la web, los resultados se irán acercando a los que se consiguen en el universo de lo impreso.

Unas conclusiones para acabar

Estamos en un mundo de diseño plano, y en 2019 el diseño web ha pegado un salto adelante respecto a años anteriores en lo que se refiere a su enfoque experimental. Este año también vemos que prácticamente todos los elementos de la página web son susceptibles de prestarse a la experimentación.

¿Necesitas más inspiración? Échale un vistazo a nuestra Guía de diseño web 2018, Guía de diseño web 2017 y Guía de diseño web 2016.

Con el uso de grandes espacios en blanco, convirtiendo la navegación en un elemento principal estético de los sitios web o experimentando con la tipografía, en 2019 encontramos que cualquier área de los sitios web puede ser reinventada desde el punto de vista estético y hasta funcional.

Este artículo fue escrito por Amber Leigh Turner de The Next Web y se licenció legalmente a través de la red de editores NewsCred. Para preguntas sobre la licencia de este artículo, dirígete a legal@newscred.com.