¿Estás aburrido con algunos de tus proyectos de diseño actuales? La colección de tendencias de diseño de sitios web de este mes puede ayudarlo a salir de esa rutina con algunas alternativas divertidas y extravagantes.
Y todas estas opciones no son para nada aburridas. Estas tendencias, desde la exhibición visual hasta la tecnología, presentan un conjunto diferente de desafíos.
Esto es lo que es tendencia en diseño este mes.
Contenido del Articulo
1. Capas sobre capas
Estos diseños de sitios web tienen tantas capas de información que apenas sabe dónde buscar o dónde comienzan y terminan los elementos de diseño.
Esta puede ser una técnica complicada para trabajar debido a la cantidad de elementos que compiten por el mismo enfoque de diseño.
Lo que es probable que vea con este diseño generalmente incluye una imagen o un fondo de video con algo de movimiento, pero no algo que realmente necesite atención. Luego agregue algunas imágenes fijas en cuadros más pequeños a lo largo del diseño. Capa de texto también para un efecto de triple profundidad.
Si trabajas con estos dibujos, encontrarás que tampoco son planos. Todos incluyen elementos animados, estados de desplazamiento e interacciones que lo guían a través de las capas de lo que pueden ser diseños algo complejos.
La Asociación de Parques Nacionales del Oeste utiliza una imagen de fondo, imágenes intermedias con animación y varias capas de texto (algunas en las imágenes y otras en el fondo). También hay una animación de desplazamiento para ayudar a crear el diseño. Están sucediendo muchas cosas, pero no parece demasiado ocupado.
WIP Architects es otro diseño con capas que interactúan entre sí e incorporan movimiento. Con muchas animaciones de desplazamiento y capas delante y detrás de otros elementos, el compromiso ayuda a que este sitio funcione.
Shipwreck Survey utiliza el mismo contorno de capa base con poca superposición entre elementos y menos animación general. El principal efecto animado en la página principal es la barra de desplazamiento.
2. Acciones de clic dirigidas
Esta interesante tendencia en el diseño de sitios web puede ser increíblemente útil o inútil: clics dirigidos. Estos son botones, íconos y animaciones que le indican que haga clic en algún lugar del diseño para pasar a la siguiente etapa de interacción.
El enfoque directo garantiza que los usuarios vean y obtengan la mejor oportunidad de hacer lo que el diseño pretende hacer. Por otro lado, si necesitas tantas instrucciones, ¿no es demasiado complicado el diseño? ¿O hay un punto óptimo en el que esta tendencia se ve muy bien y se puede usar?
En cada uno de los ejemplos a continuación, estos clics direccionales son ligeramente diferentes.
HUG Co tiene un gran círculo para hacer clic en el tercio inferior de la pantalla. Es casi como una diana y no te la puedes perder. Lo interesante aquí es que la mayor parte del video está debajo del desplazamiento. La acción de clic también tiene dos emojis para indicar la acción: una cara sonriente o un puntero cuando esté listo para hacer clic. (Hacer clic expande el video a pantalla completa).
ThinkOvery también usa un icono de clic redondo similar. Además, con solo deslizar el dedo, pasará a la siguiente pantalla para que pueda continuar explorando el diseño.
Vivir con TOC tiene un enfoque diferente: desplace y retroceda los íconos en la esquina inferior derecha. La opción de desplazamiento incluye palabras para ayudar a crear direcciones e instrucciones. Consiste en una pequeña animación y un estado de desplazamiento interactivo a medida que se acerca al elemento interactivo. Lo interesante es que en realidad no es un botón y estás usando el desplazamiento tradicional para interactuar.
3. Pausas de palabras
Si te gusta la legibilidad, esta tendencia de diseño puede hacer que te estremezcas.
En cada uno de estos diseños, las palabras se dividen en líneas, algunas con guiones y otras sin ellos. En su mayor parte, no hay mucha confusión sobre cuáles son estas palabras, pero te hacen pensar mientras navegas por la página.
¿Por qué podría ser esto una tendencia de diseño?
Es una combinación de usar tipografía grande, palabras largas y encontrar una solución para crear una experiencia compartida entre pantallas grandes y pequeñas. Por ejemplo, muchas de estas palabras no caben en las pantallas de los móviles debido al mismo peso, tamaño e impacto que sus contrapartes de escritorio.
De ahí la solución para la separación de palabras. Esto crea una experiencia de usuario uniforme en todos los dispositivos.
Este método solo debe usarse si cree que su audiencia es lo suficientemente inteligente como para comprender lo que está tratando de transmitir con el descanso. ¡Esta podría ser una sugerencia engañosa!
Plantarium rompe la palabra “planta” con una palabra inventada. Pero con imágenes y términos de apoyo, aún obtiene una idea inmediata de lo que se trata el diseño.
Michelle Beatty toma una palabra común y la divide. Dado que “photog” y “rafer” son las únicas letras en la pantalla, esto es bastante fácil de entender. Curiosamente, la palabra ruptura no está en la sílaba, pero las letras encajan visualmente bien con esta ruptura.
Wreel Collective divide la palabra con un guión en mayúsculas; esto rara vez se ve en el diseño web. Los guiones no se utilizan a menudo en este medio. Por eso, llama tu atención y te hace pensar en las palabras y el diseño.
Conclusión
Hay muchas reglas que rompen tendencias en la colección de este mes. Son interesantes, divertidos y requieren un cierto nivel de riesgo para completarlos.
¿Te imaginas a ti mismo (o a tus clientes) eligiendo un diseño que refleje una de estas tendencias? El tiempo dirá si estas composiciones visuales crecerán en popularidad o comenzarán a desvanecerse rápidamente.
