Por todos lados, hay un nuevo efecto animado. Si la animación era el elemento de diseño imprescindible de 2016, los efectos innovadores de Hover son la nueva tendencia de diseño de 2017.
Gracias en parte a la popularidad de Material Design y las pautas de animación de Apple con un enfoque en pequeños movimientos, los efectos de desplazamiento están regresando. Pero en lugar de los efectos pegajosos, destellantes, rebotes y giros del pasado, las animaciones son simples, nítidas y encantadoras. Los mejores efectos de desplazamiento ayudan al usuario y mejoran la experiencia.
Los efectos de desplazamiento pueden variar desde el movimiento que tiene un impacto en toda la pantalla hasta algo tan pequeño como una señal direccional o un elemento de navegación.
Movimiento de la página de inicio
Los efectos de desplazamiento pueden ser una parte clave de su experiencia de usuario introductoria. Con una animación que llena la pantalla, los efectos de desplazamiento adicionales pueden ser bastante encantadores.
Haus, arriba, hace un trabajo increíble con personajes de dibujos animados que se mueven por la pantalla. Es posible que no piense nada de la animación, pero con un hover, los personajes explotan en otra acción. Sin el hover, cada personaje simplemente se pasea por la pantalla.
Cuando se trabaja con una animación de desplazamiento de pantalla completa como esta, el truco es deleitar a los usuarios, no abrumarlos. Ese es un punto medio bastante complicado. Al mantener el resto del diseño simple - fondo oscuro y plano con un tipo de letra sans serif fácil de leer en blanco - se permite espacio para la animación. Es el único truco en la pantalla que alienta a los usuarios a interactuar antes de desplazarse a las pantallas subsiguientes.
Efectos de botones
Una animación simple puede alentar a un usuario a hacer clic o tocar un botón en el diseño. Parece simple, ¿verdad?
Eso es parte de la razón por la que este tipo de animación es tan popular.
Diseñe un efecto de botón que ayude a los usuarios a comprender mejor el diseño para lograr el máximo impacto. El ejemplo anterior de Luke Etheridge muestra un estado que cambia de color y le dice a los usuarios qué sucederá con un clic. Esta es una animación de desplazamiento útil y funcional que es funcional y se ve bien.
Galerías y presentaciones de diapositivas
Las páginas web están llenas de varias galerías y presentaciones de diapositivas. Casi todos estos incluyen múltiples efectos animados, desde el movimiento entre diapositivas hasta flechas u otras divots que les dicen a los usuarios cómo avanzar o retroceder.
La clave para diseñar movimientos modernos se puede extraer directamente de las especificaciones de Material Design.
- El movimiento es rápido
- El movimiento es claro
- El movimiento es cohesivo
El movimiento es el disparo de Baptiste Dumas hace todas estas cosas. El movimiento se produce de una manera que no deja al usuario preguntando qué sucederá a continuación, crea una línea obvia entre los elementos de contenido y todo está relacionado con un flujo de movimiento similar y continuo.
Navegación y menús
Nos guste o no, los estilos de navegación ocultos son un elemento de diseño popular. Grandes animaciones o efectos de desplazamiento pueden ayudar a los usuarios a navegar mejor el contenido y moverse por el diseño.
Desde los íconos de hamburguesas que crecen o se desvanecen con información que aparece o se despliega en la pantalla, los elementos de menú animados pueden servir como una herramienta direccional fuerte.
Oxen Made, arriba, utiliza animaciones de desplazamiento de dos maneras en la página de inicio para dirigir a los usuarios a las acciones que deben realizar. ?¿Menú? cambia de color al pasar el cursor para que los usuarios sepan que es un elemento seleccionable. El menú completo luego se desplaza desde el lado izquierdo de la página. Además, una pequeña flecha triangular rebota en la esquina derecha, utilizando el mismo botón amarillo del menú activo, lo que indica que hay más contenido en el desplazamiento.
Estos movimientos sutiles ocurren mientras se reproduce un video de fondo relativamente ocupado. Los movimientos más suaves contrastan lo suficiente con el fondo para captar la atención de los usuarios y proporcionar una amplia orientación y navegación del sitio.
Formas y Campos
Algunos de los mejores ejemplos de efectos de desplazamiento son el uso de formularios y campos. Casi todos los sitios web que visita solicitan algún tipo de acción o información. Cuanto más fácil sea para los usuarios proporcionar esta información, más probabilidades hay de que realmente la recopile.
Eso no significa que las formas tengan que ser aburridas. Las indicaciones visuales, como las sugerencias sobre herramientas que ayudan a los usuarios a recordar qué deben ingresar en un campo (y en qué formato), así como la confirmación del éxito, son importantes.
El ejemplo anterior hace ambas cosas. A los usuarios se les dice qué información deben ingresar, pueden ver la entrada en el momento en que ocurre y hacer clic en "iniciar sesión". botón aparece una confirmación animada rápida en la pantalla. Los usuarios no tienen que cuestionar si su información se ingresó correctamente o no, y saber, con esa rápida comprobación en la pantalla, que pueden continuar con lo que quieren hacer a continuación.
Si no está seguro de dónde comenzar con efectos de animación o animaciones simples, las formas pueden ser un buen punto de partida. Los usuarios ya esperan que esta parte del sitio web sea interactiva. Van a hacer algo con la forma; Proporcionar los comentarios adecuados con una animación simple.
Recursos y código para probar
¿Listo para agregar algunos efectos animados a tu diseño? Hay muchos recursos excelentes que pueden ayudarlo a comenzar.
- Hover.css: Una colección de efectos de desplazamiento de CSS3 para aplicar a enlaces, botones, logotipos, SVG, imágenes destacadas, etc. Aplica a tus elementos, modifica o utiliza para inspirarte. Disponible en CSS, Sass y LESS.
- Efectos de desplazamiento de imagen: Una colección de efectos para ayudarle a sacar el máximo provecho de las imágenes. Copia el código y utiliza en tus proyectos.
- Icono de efectos de desplazamiento: Hover simple para agregar énfasis a los iconos circulares.
- Increíbles efectos de desplazamiento de WordPress: La colección de efectos es excelente para los usuarios de WordPress, y está hecha con CSS3 puro y sin dependencias. La colección incluye docenas de opciones y estilos.
- W3Schools - Transiciones CSS3: Aprenda a usar las transiciones CSS3 desde cero con este tutorial.
Conclusión
Las animaciones flotantes son una de esas técnicas de diseño que parecen complicadas y pesadas. Pero la realidad es que con la animación CSS, casi cualquier persona puede agregar una animación simple con facilidad. Son ligeros y hay muchos animadores que quieren compartir fragmentos de código contigo.
Solo tenga en cuenta la regla de oro de utilizar cualquier truco en su diseño: debe ser significativo. Solo use efectos de desplazamiento o animaciones cuando se agreguen al contenido; tenga cuidado de no distraer a los usuarios de las acciones que deben tomar. ¡Diviértete y buena suerte!