Este mes, se trata de las imágenes. Cada una de las tendencias de diseño que detectamos tiene que ver con las imágenes que seleccionas, o no seleccionas, para un proyecto y cómo las usas.
Esto es lo que es tendencia en diseño este mes.
1. Imágenes flotantes
A veces diseñas fuera de la red intencionalmente. Otras veces estás diseñando en una cuadrícula que quizás no sea tan obvia. Una de estas cosas está sucediendo con la tendencia de diseño de sitios web de imágenes flotantes.
Aquí, verá imágenes y contenedores de imágenes que no parecen tener ninguna dirección con sus ubicaciones. Pueden o no incluir animación, que enfatiza aún más el efecto flotante.
Las imágenes flotantes pueden incluir:
- Recortes que no están anclados a nada ni a ningún contenedor.
- Imágenes que están dispersas en el lienzo.
- Imágenes en ubicaciones extrañas que no parecen tener un propósito
- Cualquier imagen o elemento con una ubicación o espaciado fuera de la red obvio
- Imágenes que usan diferentes orientaciones o carecen de profundidad para la percepción.
El desafío con este estilo es que puede parecer cohesivo y organizado o puede convertirse rápidamente en un revoltijo de partes. Puede tomar muchas pruebas de usuario para encontrar el equilibrio adecuado.
Repetir utiliza imágenes animadas con estilo de contorno en el fondo que tienen ubicaciones aparentemente aleatorias. El efecto flotante se enfatiza aún más con la animación y la superposición de imágenes y otros elementos.
HummingYard usa imágenes en un contenedor en el diseño, pero las ubicaciones no tienen un significado 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 colocado casi al azar, creando un efecto flotante para todo el diseño.
Riquezasimple utiliza un montón de imágenes diferentes más pequeñas para crear una cascada flotante de elementos. Los íconos tridimensionales casi parecen estar cayendo por la pantalla. Algunos elementos de texto se superponen, pero la mayoría no. Todo se siente un poco aleatorio, pero las imágenes enmarcan y ayudan a atraer la atención hacia los elementos de texto de la pantalla central y llaman a la acción.
2. Sin imágenes
Si las imágenes flotantes no son lo tuyo cuando consideras un elemento de diseño moderno, tal vez la respuesta no sea ninguna imagen.
En esta tendencia de diseño, la estética se une sin ninguna imagen verdadera. El diseño utiliza principalmente texto con quizás un icono, un logotipo o una pequeña muesca. El resultado puede ser un diseño bastante austero, pero hay un claro enfoque en las palabras.
Esta tendencia no es tan difícil de diseñar, pero la narración y el lenguaje son vitales si desea que los usuarios interactúen con el diseño. A veces, la ausencia de imágenes puede resultar desagradable para los usuarios que buscan algo visual.
Consultoría Fandes utiliza un diseño en blanco y negro súper simple con una simple llamada a la acción en la página de inicio. La señal de desplazamiento tiene una buena animación que te ayuda a profundizar un poco más en el diseño rápidamente. (También hay más elementos interactivos e imágenes después del desplazamiento).
diego también utiliza una estética simple y austera para su sitio web. Nuevamente, hay una animación simple para el compromiso y hay más color y algunas imágenes más allá del desplazamiento.
Ashfield MedComms tiene la mayor cantidad de color de estos ejemplos de sitios web sin imágenes. Con un fondo azul marino y un ícono verde, puedes sentir que tus ojos se mueven más en la pantalla aquí. También hay más para leer y una animación de desplazamiento para promover el compromiso.
3. Texto e imágenes combinados
La tendencia de combinar texto e imágenes es el más complejo de estos ejemplos de diseño. Aquí, los diseñadores están creando capas superpuestas para elementos de texto e imagen (o animados) en la pantalla para que haya mucho para consumir visualmente. Este puede ser un concepto muy atractivo, pero también difícil de desarrollar.
Esta tendencia de diseño puede ser inmensamente hermosa cuando se hace bien. Los elementos en capas son emocionantes y tienen una sensación de «diseño».
El desafío visual es este: mantener la legibilidad de las palabras y las letras, especialmente cuando se piensa en la capacidad de respuesta del sitio web. La animación o el movimiento pueden agregar otro nivel de complicación.
Si está planeando un diseño como este, es importante planificar los puntos de interrupción e incluso tener una alternativa sobre qué hacer cuando la legibilidad se convierte en una preocupación. La estética de escritorio y móvil puede tener diferentes sensaciones aquí 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 (el barco) que se esconden detrás de una capa de agua animada. Lo que es especialmente agradable de este diseño es cómo el agua se ve tan peligrosa como las palabras transmiten gracias al movimiento y la forma y el color de los gráficos.
maullar superpone el texto y una imagen de una manera que casi oscurece la legibilidad, pero la palabra tiene suficiente contexto para que se entienda en general. Si haces clic, también hay una pequeña animación divertida con el gato.
Champoleon el Valle de los Sueños mete parte del texto en las montañas para obtener un conjunto de capas de primer plano a texto y de fondo que es hermoso y unificado. Hay muchas capas en este diseño, lo que lo hace mucho más complejo de lo que parece en la superficie. En el desplazamiento, el resto del sitio continúa este tema en capas con texto e imágenes que se superponen y comparten espacio.
Conclusión
¿Cuál de estas tendencias de imagen te atrae más? Son enfoques muy diferentes para el diseño de sitios web y pueden funcionar para diferentes proyectos de diferentes maneras. También varían en complejidad de desarrollo, desde súper fácil de administrar (sin imágenes) hasta potencialmente desafiante: texto e imágenes combinados.
Fuente: 3 tendencias de diseño esenciales, octubre de 2022