3 Tendencias de diseño esenciales, mayo de 2020

-

El estado del mundo que nos rodea puede tener un gran impacto en el diseño del sitio web. Desde los cambios emocionales que se correlacionan con la sensación de un diseño hasta la información y los datos para mostrar, el impacto de la pandemia mundial de COVID-19 está llegando a los proyectos (intencionadamente o no).

Esto es lo que está de moda en diseño este mes.

1. Uso «desequilibrado» del espacio

El espacio puede ser una gran influencia en un proyecto de diseño. Afecta el flujo visual y puede impulsar las conversiones.

Últimamente, muchos diseños han adoptado un enfoque más equilibrado y simétrico para usar el espacio, pero eso está cambiando nuevamente con más sitios web que cuentan con un uso «desequilibrado» del espacio. (Y a mi parecer es bastante agradable).

Llamamos a esta tendencia «desequilibrio» porque el espacio abierto puede o no usarse para evitar que el diseño se sienta desigual. Hay muchas formas diferentes de hacerlo: con espacios en blanco, en imágenes, con capas y cómo se apilan en ellas los elementos, y con patrones. Esta puede ser una técnica bastante desafiante porque los puntos de corte receptivos pueden cambiar drásticamente la apariencia del espacio si no tienes cuidado.

Cada uno de estos proyectos aborda este «desequilibrio del espacio» de una manera diferente e igualmente ordenada.

Yukon 1000 crea dos bits diferentes de desequilibrio de dos maneras diferentes:

  • En el lado izquierdo de la pantalla con un espacio en blanco de fondo en el que la imagen no se extiende e incluye capas de texto.
  • En la imagen en sí con una forma distinta y mucho espacio abierto en el agua.

Ambos elementos están desequilibrados cuando están solos, pero combinados, el espacio abierto a la izquierda y el espacio abierto en la imagen hacen que el ojo vuelva al área de contenido central del diseño.

yukon

Art Of Tea Este sitio web utiliza el espacio en la imagen con un bonito apilamiento y el uso de formas en el posicionamiento de objetos en un espacio desequilibrado. Ten en cuenta qué se compara el lado izquierdo de la imagen con la desolación del lado derecho. Incluso el texto solo se extiende hasta la mitad del espacio.

Esta estética ayuda a atraer los ojos primero a través de la pantalla para leer el texto y luego hacia abajo.

té

Growcase podría ser un caso de estudio sobre el uso del espacio en sí mismo, pero concéntrate en la parte superior de la pantalla. El logotipo e información de la marca se extiende alrededor de un tercio del espacio y solo se encuentra con un pequeño trío de enlaces de redes sociales / portafolio.

También hay mucho espacio debajo y espacios negativos con cada uno de los bloques de cartera. Las áreas negras lo atraviesan por el diseño, ya sea que esté listo para moverse por él o no.

growcase

2. Nuevos conceptos de sliders con imágenes

Hace mucho tiempo que los diseñadores de sitios web habían dicho que los sliders estaban muertos.

Pues parece que han vuelto.

Pero se ven muy diferentes y son mucho más interesantes.

La tendencia en el diseño del slider es el uso de elementos con animaciones y formas interesantes que no se parecen a los clásicos sliders. Lo interesante son los puntos en común entre ellos, a pesar de que se ven espectacularmente diferentes.

Cada uno de estos ejemplos de sliders:

  • Utiliza un puntero circular que se expande al pasar el mouse sobre un elemento clickable
  • Las señales visuales, como las flechas de navegación, están presentes
  • Cada sitio presenta algún tipo de contenido de portafolio
  • Las imágenes del slider pueden estar solas y no están cubiertas con texto u otros elementos

Además, cada ejemplo tiene algunos añadidos propios y divertidos.

Clarity usa un slider que se mueve automáticamente según la posición del mouse y todas las imágenes aparecen dentro del marco del círculo.

claridad

Revise Concept También utiliza un slider de desplazamiento automático con imágenes que se mueven en diagonal. También puedes usar las flechas para desplazarse hacia adelante y hacia atrás por tu cuenta.

revisar

Prezman solo muestra una vista previa del slider en la página de inicio, pero al hacer clic sobre él se expande a pantalla completa para mostrar una variedad de elementos de su portafolio con una animación simple pero ordenada.

prezman

3. Datos de coronavirus

El signo más obvio del coronavirus en el diseño de sitios web es la cantidad de sitios web que contienen información sobre el virus. Las tendencias parecen ser sitios web que proporcionan diferentes tipos de visualizaciones de datos sobre el COVID-19.

Google tiene una página (al realizar una búsqueda en el propio Google), pero estos ejemplos llevan los datos a nuevos niveles visuales. Las visualizaciones de datos varían en los datos presentados, local VS mundial, y en cómo se reúne la información.

Si bien todos estos sitios tienen propósitos distintos, proporcionan buenos ejemplos de cómo manejar grandes cantidades de datos en formato visual.

Coronavirus Now coge un tipo de datos y usa tubos virtuales de bolas para mostrar relaciones proporcionales entre tres tipos de datos. Lo realmente interesante de este diseño es el uso de animación y etiquetado para que los datos sean comprensibles.

coronanow

COVID-19 Global Data Dashboard desglosa diferentes informaciones y datos en una buena variedad de gráficos: barras, círculos y más. El uso de diferentes visualizaciones puede facilitar la comprensión de la información por parte de las personas que entienden y comprenden los datos de diferentes maneras.

coviddata

COVID-19 Community Vulnerability Index Map utiliza un sistema de mapeo para mostrar dónde podrían ocurrir brotes potenciales. El uso de datos de mapas puede ser una forma más comprensible de visualizar datos complicados.

coronamap

Conclusión

Si bien dos de estas tendencias de diseño de sitios web no tienen nada que ver con el coronavirus, comenzaremos a ver más cosas que están influenciadas por este problema de salud en todo el mundo. Presta atención, y es probable que el diseño comience a cambiar a elementos con menos grupos grandes de personas, el uso de la mascarilla en las imágenes será más común, e incluso los colores pueden desvanecerse en tonos más tenues. Ya estamos viendo el impacto en el diseño y es probable que continúe influyendo en las tendencias.

Alvaro González Palaciohttps://alvarogpalacio.com
De Cantabria a Catalunya, de vez en cuando escribo, otras soy un freelance más.

Comparte este post!

También puedes seguirme en Twitter

10SeguidoresSeguir

Por si te interesa:

IONOS - Colaborador oficial

Recent comments