Este mes se trata de las imágenes. Cada una de las tendencias de diseño que hemos descubierto tiene que ver con las imágenes que eliges, o no eliges, para un proyecto y cómo las usas.
Esto es lo que es tendencia en diseño este mes.
Contenido del Articulo
1. Imágenes flotantes
A veces diseñas intencionalmente fuera de la red. Otras veces, está diseñando en una cuadrícula que puede no ser tan obvia. Una de esas cosas está sucediendo con la tendencia de diseño de sitios web con imágenes flotantes.
Aquí verá imágenes y contenedores de imágenes que parecen no tener dirección. Pueden o no incluir animaciones que enfatizan aún más el efecto flotante.
Las imágenes flotantes pueden incluir:
- Recortes que no están atados a nada ni a ningún contenedor.
- Imágenes que están dispersas por el lienzo.
- Imágenes en lugares inusuales que no parecen tener un propósito
- Cualquier imagen o elemento con una ubicación o distancia obvia fuera de la cuadrícula.
- Imágenes que usan diferentes orientaciones o no tienen profundidad para percibir
El problema con este estilo es que puede parecer cohesivo y organizado, o puede convertirse en un desastre con bastante rapidez. Es posible que se necesiten muchas pruebas de usuario para encontrar el equilibrio adecuado.
Repetir utiliza imágenes animadas de estilo de contorno en el fondo que parecen estar colocadas al azar. El efecto flotante se mejora aún más con animaciones y superposiciones de imágenes y otros elementos.
HummingYard usa imágenes en contenedores en el diseño, pero las ubicaciones no tienen ningún sentido obvio. También hay una hoja flotante en el lado derecho del lienzo y un botón de llamada a la acción que también parece estar fuera de la cuadrícula. Cada uno de los elementos parece estar ubicado casi al azar, creando el efecto de flotabilidad de todo el diseño.
Wealthsimple utiliza un conjunto de imágenes pequeñas para crear una cascada flotante de elementos. Los íconos 3D parecen estar cayendo sobre la pantalla. Algunos elementos de texto se superponen, pero la mayoría no. Todo parece un poco aleatorio, pero las imágenes crean un marco y ayudan a llamar la atención sobre los elementos de texto en el centro de la pantalla y la llamada a la acción.
2. Sin imágenes
Si no le gustan las imágenes flotantes al considerar un elemento de diseño de moda, tal vez la respuesta sea ninguna imagen.
En esta tendencia de diseño, la estética se une sin ninguna imagen real. El diseño utiliza principalmente texto con un icono, un logotipo o una pequeña sangría. El resultado puede ser un diseño bastante austero, pero se presta especial atención a las palabras.
Esta tendencia no es tan difícil de desarrollar, pero la narración y el lenguaje son vitales si desea que los usuarios interactúen con un diseño. La falta de imágenes a veces puede desanimar a los usuarios que buscan algo visual.
Fandes Consulting utiliza un diseño en blanco y negro muy simple con una simple llamada a la acción en la página de inicio. La señal de desplazamiento tiene una bonita animación que te ayudará a sumergirte rápidamente en el diseño. (También hay más elementos e imágenes interactivos después de desplazarse).
Diego también utiliza una estética simple y austera para su sitio web. Nuevamente, hay una animación simple para interactuar, así como más colores e imágenes fuera del pergamino.
Ashfield MedComms tiene el ejemplo más destacado de un sitio web sin imágenes. Con un fondo azul oscuro y un ícono verde, sentirás que tus ojos se mueven por la pantalla. También hay algo para leer y una animación de desplazamiento para una mayor interacción.
3. Combina texto e imágenes
La tendencia de fusionar texto e imagen es el más complejo de estos ejemplos de diseño. Aquí es donde los diseñadores crean capas superpuestas para elementos de texto y gráficos (o animados) en la pantalla para que haya mucho impacto visual. Este puede ser un concepto muy atractivo, pero también difícil de desarrollar.
Esta tendencia de diseño puede ser muy hermosa si se hace bien. Los elementos en capas son impresionantes y crean una sensación de “diseño”.
El desafío visual es este: mantenga las palabras y las letras legibles, especialmente cuando piensa en la capacidad de respuesta del sitio web. La animación o el movimiento pueden agregar otra capa de complejidad.
Si está planeando un diseño como este, es importante considerar los puntos de interrupción e incluso tener una alternativa sobre qué hacer cuando la legibilidad se convierte en un problema. La estética de escritorio y móvil puede tener una sensación diferente para garantizar que tenga un tema visual fácil de entender para ambos.
“Los lugares más peligrosos para los marineros” incluye texto y un elemento de imagen (barco) escondido detrás de una capa animada de agua. Lo que es especialmente bueno de este diseño es que el agua se ve tan peligrosa como las palabras, gracias al movimiento, la forma y el color del gráfico.
“Miau” se superpone al texto y la imagen de una manera que casi oscurece la legibilidad, pero la palabra tiene suficiente contexto para ser entendida. Si haces clic, también hay una divertida animación de un pequeño gato.
Champoleon the Valley of Dreams ocultó parte del texto en las montañas para el primer plano para mantener el texto en la capa de fondo agradable y unificado. Hay muchas capas en este diseño, lo que lo hace mucho más complejo de lo que parece. Al desplazarse, el resto del sitio continúa este tema en capas con texto e imágenes que se superponen y ocupan el mismo espacio.
Conclusión
¿Cuál de estas tendencias de moda te gusta más? Estos son enfoques completamente diferentes para el diseño de sitios web y pueden funcionar de manera diferente para diferentes proyectos. También varían en la complejidad del desarrollo, desde muy fáciles de manejar (sin imágenes) hasta potencialmente complejos (combinación de texto e imágenes).
