¿Has tomado nota de todos los patrones de diseño súper oscuros últimamente? Los diseñadores están experimentando con algunos patrones de diseño oscuros y extravagantes que presentan animaciones en el mismo esquema de color.
Estas animaciones incluyen todo, desde simples movimientos que ocurren por sí mismos, hasta efectos de vuelo y experiencias cinematográficas completas. Sumergámonos en esta tendencia de diseño de sitios web y exploremos algunas maneras de hacer que funcione para sus proyectos.
Sobre la tendencia
La animación oscura es una tendencia que combina dos elementos de una manera distinta: una paleta de colores monocromos oscuros y una animación genial. El resultado es un impresionante diseño en capas que es sutil y de mal humor.
Parece funcionar porque evoca un sentido de misterio. Y los usuarios quieren resolver el rompecabezas.Si bien la tendencia puede ser difícil de hacer bien, y no siempre tiene una excelente experiencia de usuario móvil, lo que impulsa este patrón visual es el interés. Debido a todos los elementos oscuros, el usuario se ve obligado a mirar el diseño.
Existe un verdadero elemento de misterio que impulsa el compromiso con estos proyectos a medida que el usuario se enorgullece de ver qué pasará con el elemento animado y buscar cambios y efectos sutiles. ¿Qué pasará después?
Cada uno de estos diseños está compuesto de una manera diferente. No hay un tipo particular de animación que funcione mejor y no hay un color fijo que deba usarse, aunque muchos de estos diseños usan una paleta de ricos negros y grises.
Las animaciones pueden ser tan simples como un efecto de desplazamiento o tan elaboradas como una forma de moldeo o un video producido.
Parece funcionar porque evoca un sentido de misterio. Y los usuarios quieren resolver el rompecabezas.
Por que funciona
Es realmente difícil explicar por qué funciona esta tendencia de diseño. Cuando lo piensas sin ver los proyectos de diseño de sitios web, no pensarías que los patrones animados oscuros tendrían éxito.
- No hay mucho color.
- Hay muy poco contraste.
- Los diseños son casi demasiado simples.
Pero tal vez por eso esta tendencia. hace trabajo. Rompe las reglas lo suficiente como para atraer a los usuarios al diseño.
El otro factor que contribuye es que la oscuridad y el misterio van de la mano. Y a la gente le encanta un buen misterio. Viven pudiendo ver elementos ocultos o resolver un problema complejo. La combinación de colores oscuros con un efecto animado proporciona una manera para que los usuarios desentrañen un misterio.
Estos proyectos también tienen una clara atracción emocional. Los colores oscuros son de mal humor. Las variaciones de color en estas paletas son complejas e interesantes (desde una perspectiva de diseño de todos modos). Hay un elemento de profundidad que es difícil de articular, pero fascinante de explorar.
Sume toda la emoción y el misterio y podrá hacerse una idea de por qué los usuarios se sienten atraídos por este patrón visual.
No tiene que ser negro
Si bien la mayoría de estos diseños tienen paletas de color negro, no tienen por qué hacerlo.
Otros tonos oscuros también pueden ser efectivos y les dan a los diseñadores la capacidad de crear un patrón de diseño animado oscuro y mantenerse en la marca con la paleta de colores.
Independientemente del color, la clave para hacer que estas paletas de colores funcionen con las animaciones es la riqueza en la selección de colores. Una gama de tonos (mezclando un color con gris) y sombras (mezclando un color con negro) puede proporcionar un rango variable para una paleta de colores monocromática. (Solo mire las diferentes púrpuras en el diseño de FedEx, arriba).
Si bien el contraste no es el foco de esta tendencia de diseño, es importante. Sin el contraste suficiente en el diseño monocromático, la animación se perderá en el fondo, haciendo que el diseño sea inefectivo.
Algunas precauciones
Esta tendencia de diseño no es para todos, y es muy difícil lograrlo de manera efectiva. Los patrones animados de color oscuro tienen fallas:
- No funcionan tan bien en dispositivos móviles.
- Hay algunos problemas de accesibilidad inherentes.
- Puede que no haya suficiente interés visual para algunos usuarios.
- La navegación y la colocación de la llamada a la acción pueden ser un desafío.
- Las condiciones ambientales (iluminación, etc.) pueden hacer que el diseño sea más difícil de ver.
- Algunos usuarios no apreciarán el tono caprichoso.
- Los usuarios pueden aburrirse con el diseño rápidamente, disminuyendo el tiempo en el sitio.
Consejos para probar esta tendencia de diseño
Si no le temen los desafíos que presenta esta tendencia de diseño y tiene un modelo de contenido que coincide con el tono caprichoso de un esquema de diseño animado en color oscuro, hay algunas cosas que puede hacer para ayudar a garantizar el éxito del proyecto.
- Se adhieren a un diseño de una página: Demasiado de un elemento de diseño funky puede ser abrumador. Si planea usar este concepto, limítelo a un diseño de una página o una página en el diseño.
- Usa un color de contraste.: El texto blanco funciona excepcionalmente bien en fondos oscuros. Lo mismo ocurre con otros elementos. Asegúrese de que los botones, los elementos de navegación, los mensajes y la llamada a la acción sean fáciles de ver y leer. Si bien la animación y el fondo pueden no tener un contraste significativo, otros elementos deben ser fáciles de identificar.
- Simplificar la animación: Las animaciones de apariencia demasiado compleja pueden abrumar este diseño. Se adhieren a movimientos simples y movimientos que no son demasiado rápidos.
- Diseño en capas: Lo que hace funcionar este concepto es el diseño en capas. Cree una separación entre el fondo y los elementos animados para un efecto que se siente algo táctil y real. Las capas también te ayudarán a planificar el contraste suficiente para que los elementos sean visibles.
- Usa tipografía en negrita: Los elementos de texto no solo deben incluir mucho contraste de color, sino que es probable que también necesite un tipo de letra fuerte y en negrita para asegurarse de que el texto no se incluya en el diseño. Debería saltar fuera de él. Busque tipos de letra con letras más gruesas y trazos simples para garantizar la máxima legibilidad.
¿Que sigue?
Como con cualquier tendencia de diseño, esta estética continuará evolucionando.Si bien no podemos predecir realmente qué sucederá a continuación, algunos diseños proporcionan una pista.
El color oscuro y la animación podrían ser un diseño destacado en el mundo de la realidad virtual. VR es un área de juegos para juegos y video, que ya utiliza una gran cantidad de colores oscuros.
Esta tendencia de diseño podría ser perfecta para ese tipo de proyectos, como el nuevo sitio web de video / juegos de Blair Witch Project, arriba.
Conclusión
Las combinaciones de colores oscuros han existido por un tiempo, pero este nuevo giro con animaciones de colores similares es interesante. Tiende a ser una de esas cosas que los diseñadores aman absolutamente, en parte por su mal humor, u odian por los desafíos que presenta para los usuarios.
De cualquier manera, este estilo se está utilizando con más frecuencia. Si bien funciona mejor para ciertos tipos de proyectos (tenga en cuenta el número de sitios de agencia y cartera en los ejemplos), puede ser una forma interesante de mezclar un diseño. Pruébelo en una única diapositiva o página y vea lo que piensan los usuarios antes de invertir en un patrón de diseño animado de color completamente oscuro.