Tendencias de diseño esencial, diciembre de 2016
¿Alguna vez te das cuenta de que cierto elemento de diseño simplemente sigue apareciendo? Incluso esos pequeños detalles que parecen algo insignificantes pueden ser indicadores de tendencias de diseño. Eso es particularmente cierto con los elementos en el rodeo de este mes.
Cada una de estas tendencias, bordes blancos que enmarcan un diseño web, cinegrafías y pequeñas animaciones de carga, son detalles aparentemente simples que mejoran la experiencia visual para los usuarios.
Esto es lo que está en tendencia en el diseño este mes:
1) bordes blancos
Más diseños web utilizan bordes blancos o marcos en todo el perímetro del diseño en el navegador web. Es un nuevo giro en una vieja idea cuando se construyeron más sitios web para ciertos tamaños y se utilizó el encuadre para anchos de navegador impares.
Es algo que se desvaneció a medida que más diseñadores optaron por diseños receptivos de ancho completo.
El nuevo giro con encuadre es interesante y es una forma agradable de crear un lienzo para el diseño. La mayoría de los sitios que usan esta tendencia incluyen un borde blanco común, pero no obligatorio, alrededor del diseño. Tiene unos pocos píxeles de ancho y comúnmente se coloca alrededor de tres o cuatro lados del diseño. (Algunos optan por dejar el marco en la parte inferior del diseño para fomentar el desplazamiento).
Lo bueno del borde blanco es que el diseño está limpio con líneas blancas que pueden ayudar a enfocar las opciones de colores fuertes, dibujar la vista desde el borde de la pantalla a otros elementos ligeros (como cuadros de texto o llamadas a la acción) y los bordes pueden ayudar a crear un lienzo de fondo para el desplazamiento de paralaje u otros efectos animados.
Cervecería Camden Town lo hace excepcionalmente bien. El encuadre blanco se rellena entre los elementos del diseño para crear profundidad y enfoque para el usuario. La separación blanca separa cada nueva sección de contenido en la pantalla y contribuye a la organización general del diseño. (Además, los acentos blancos realmente resaltan la fuerte paleta de colores rojo y negro para evitar que la combinación sea demasiado abrumadora).
2) Cinemagraphs
Los cinemagraphs son fotos con un elemento de movimiento en ellos. Puede ser cualquier cosa, desde una foto de una persona que parpadea hasta el sutil movimiento de nubes en el cielo donde nada más se mueve. Si bien los usos más comunes de la tendencia del diseño todavía parecen estar en los anuncios y las redes sociales, los diseñadores web también están comenzando a incorporar esta técnica de "foto en vivo".
Funciona porque los usuarios están intrigados por el movimiento. Es efectivo por muchas de las mismas razones por las que el video es una buena opción para captar la atención de un usuario. El movimiento y la acción son interesantes. Es interesante. Se siente real.
Cuando se trata de trabajar con cinemagraphs, la ventaja es que puedes crear un diseño con movimiento pero sin la alta producción que viene con un proyecto de video.
El truco para hacer funcionar los cinemagraphs es enraizar el movimiento en la realidad. Incluso si la escena es más imaginada, como Monocromo París , las leyes de la física deberían aplicarse al movimiento en la pantalla. El agua debe fluir aguas abajo, por ejemplo, la gravedad debe ser una fuerza en cómo se produce el movimiento.
El movimiento también debe ser simple y sutil. Demasiado movimiento, y un video podría ser una mejor opción. Lo que atrae a los usuarios a un cinemagraph es ese elemento de sorpresa. Lo que parece una foto fija en una imagen de héroe en realidad tiene algo sucediendo en ella. Ese pequeño adorno ayudará a atraer a la gente, los mantendrá comprometidos con el diseño por más tiempo y con suerte dará como resultado una conversión del sitio web.
3) Pequeñas animaciones de carga
Los tiempos de carga son un gran problema. Pero no siempre se puede dar cuenta de la velocidad de la red en la que se encuentra el usuario; ahí es donde las pequeñas animaciones de carga pueden convertirse en un gran problema.
Lo que es diferente acerca de la tendencia de la pequeña animación de carga es que a veces la ves, a veces no diseñas un elemento. De cualquier forma, el equipo de diseño ha tenido especial cuidado en asegurar que cada usuario acceda al sitio web con una experiencia positiva.
Estas pequeñas animaciones son identificables por el hecho de que no son realmente parte de la experiencia del usuario que cuenta para el objetivo general del sitio web. Son un elemento simple y pequeño que llama su atención por un segundo rápido mientras se sirve el diseño del sitio primario.
Lo bueno de la tendencia es que estas minúsculas animaciones de carga son realmente pequeñas, desde el tamaño de la imagen en sí hasta la acción en la pantalla, no hay mucho que ver, pero lo que hay allí es absolutamente encantador.
Aquí hay tres grandes ejemplos:
- Hannah Purmort la animación de carga es una sola carrera en movimiento en la combinación de colores opuesta de la pantalla principal. El trazo se lleva a cabo a través del diseño en el efecto de desplazamiento también.
- Susa Ventures presenta un pequeño ícono con una pequeña barra de carga. Este llama tu atención porque el pequeño gorila es visualmente interesante y te hace sentir curiosidad por el contenido del sitio web.
- FPG usa un boceto que parece dibujarse en la pantalla mientras se carga el resto de la página de inicio. La única señal de que en realidad es una animación de carga es que el resto de la pantalla es mucho más elaborada una vez cargada con un video en ejecución e incluso más bocetos. El efecto es uniforme y termina casi antes de que el usuario se dé cuenta de que ha comenzado.
Conclusión
Los detalles están en el corazón de cada buen diseño. Es importante recordar que el diseño (y la contabilidad) de cosas que no todos los usuarios notarán es importante. Así es como cada una de estas tendencias se conecta, a través de pequeños elementos de diseño que no son una parte obvia de la estética general.
Esos pequeños elementos pueden ser lo que realmente distingue a su sitio web para un usuario. Puede ser el elemento de deleite que trae a alguien de vuelta a su diseño. Los detalles pueden ser el diferenciador entre el éxito y el fracaso.
¿Qué tendencias estás amando (u odiando) en este momento? Me encantaría ver algunos de los sitios web con los que está fascinado. Déjame un enlace en Twitter ; Me encantaría saber de ti.