9 sitios web con animaciones que nos inspiran como creadores web

Los creadores de sitios web están en una búsqueda interminable para actualizar sus sitios web con los efectos de diseño más vanguardistas y de moda que representen el verdadero valor de su producto o servicio. Pero entre las paletas de colores, la tipografía, la capacidad de respuesta, la estrategia de contenido y mucho más, la idea de técnicas de diseño avanzadas puede ser algo intimidante. Una de las mejores formas de lograr un sitio web cuyo diseño valga la pena es buscar inspiración en tus compañeros. Preguntarse qué le gusta de sus diseños, cómo puede ser relevante para su diseño y cómo desea modificarlo para sus necesidades puede ser realmente simple.

Veamos estos nueve ejemplos de animaciones creativas de sitios web y comencemos a aprender de los profesionales.

Las técnicas de animación que utiliza Handwrytten en la sección de héroes de su página de inicio son una representación conmovedora de su propio producto: combinación de pluma y tinta. Un valor clave de este diseño (entre otros) es que el visitante del sitio web comprende de inmediato los beneficios que ofrece el producto y lo que obtendrá al usarlo.

La fotografía de una tarjeta escrita a mano yuxtapuesta con la ilustración de dibujos animados realmente lo dice todo. En cuanto a los otros elementos de diseño de la página, el esquema de color blanco y negro limpio con toques de naranja atardecer logran un equilibrio de sofisticación y estilo artístico. Después de navegar por este sitio web, ciertamente estamos motivados para buscar más y aprender más sobre el producto de Handwrytten.

Crisp agrega efectos de animación menores a sus ilustraciones vectoriales que transmiten mensajes de marca resonantes a pesar del pequeño tamaño de las ilustraciones. La animación discreta de cada ilustración vectorial agrega un toque humano a la personalidad de marca de crisp. Nos encanta especialmente la hoguera animada en la sección que trata sobre la atención al cliente. Agrega vida al diseño minimalista y plano que se usa con elegancia en toda la página de inicio. Esta es la manera perfecta de utilizar estas modernas técnicas de diseño plano sin dejar de agregar la alegría de vivir necesaria para una experiencia de usuario emocionante.

Corebook da la bienvenida al visitante a su sitio web en modo completamente oscuro, con animaciones sutiles y elegantes a medida que se desplaza por el sitio. A su manera única, Corebook encuentra una forma de diseñar animaciones de héroes que son fáciles y claramente visibles, a pesar de la falta de contraste entre el gris oscuro sobre su fondo negro.

La elección del contenido de animación es minimalista pero informativa. Esto es posible con solo unas pocas formas cuadradas y colores, las animaciones ilustran el tipo de producto terminado (un libro de marca) que los clientes tendrán en la mano después de unirse a Corebook: su propio libro de marca que alcanza los estándares de la industria y se ve moderno. moderno y sofisticado.

Best Day Ever utiliza una técnica de animación en bucle para que sus ilustraciones de animales no dependan de disparadores para mantenerse en movimiento. Cualquier ilustración que sea visible para el visitante del sitio web se mueve continuamente siempre que se pueda ver en la pantalla.

Hay un enfoque de contenido primero en toda la página, ya que las palabras y oraciones son breves y no más de lo necesario. Es exactamente este tipo de enfoque el que combina tan bien con animaciones amigables, con la combinación de texto mínimo con un diseño alegre y colorido. Los movimientos de los animales no solo dan vida al texto con el que están emparejados, sino que logran una experiencia de conversación para cada usuario.

El sitio web de Best Day Ever es un excelente ejemplo de cómo puede tomar una idea y un principio de diseño (en este caso, el tema de combinar frescura energética con sutileza) y representarlo de manera consistente a través de su esquema de color, su estrategia de contenido y sus efectos de diseño avanzados.

¿Quién no ama el clásico hoyo de bolas? Usando sus colores de marca clásicos sobre un fondo blanco, Google encuentra el oro, una vez más.

Con un solo efecto de seguimiento del mouse, Google logra lograr una experiencia de usuario que hace que el visitante del sitio web se sienta como si realmente estuviera dentro de una piscina de bolas. Y cuando te desplazas hacia abajo en la página, todo lo que sucede es que las bolas se hacen más grandes. No hay contenido debajo de las bolas, que es exactamente lo que es en la realidad.

Google se las arregla para proporcionarnos una comprensión inmediata y sensacional de para qué es este producto, y lo hace con una descripción simple del título del texto del héroe y un botón de llamada a la acción.

Sabemos que Google está a punto de ayudarnos a planificar nuestra próxima aventura que no nos defraudará. ¿Y viste los efectos de cambio de color cuando pasaste el cursor sobre el botón? Esta es la primera vez que vemos un botón cuyo efecto de desplazamiento cambia a cuatro colores separados, en lugar de cambiar de un color a otro.

No se parece a nada que hayamos visto antes. Ante nuestros ojos, vemos formas abstractas animadas que se mueven y forman una ilustración de un animal. Despierta nuestra curiosidad, admirando a los hermosos animales y preguntándonos, ¿qué otros animales han utilizado?

Este es exactamente el proceso de pensamiento que desea que tenga el visitante de su sitio web. Le está contando una historia visual y quiere que pase a la página siguiente de esa historia.

Si lo piensas bien, la narración y la causa de las especies en peligro de extinción tienen mucho en común: ambos se tratan de llamar la atención del oyente y de convencerlo (aunque sutilmente) de que tu tema es de suma importancia, también conocido como vale la pena escucharlo.

La industria del cannabis sigue siendo bastante novedosa y fresca, por lo que tiene sentido que un sitio web que lo venda como producto necesite una apariencia y un ambiente que se sientan igual.

Detengámonos para apreciar cuántas técnicas de diseño están sucediendo solo en la página de inicio: un fondo de presentación de diapositivas detrás de colecciones de imágenes animadas, efectos 3D, palabras rotativas ... y todo se ve hermoso.

¿Cómo podría alguien ver esta página de inicio y no querer explorar más el sitio web? Solo si hace esto, podrá ver las asombrosas animaciones que se vuelven aún más fabulosas a medida que se desplaza hacia abajo.

Nos encanta cómo una vez que desciende por la página, el frasco gira hacia abajo y los objetos en el fondo de color se deslizan hacia los márgenes de la página cuando el fondo se vuelve blanco. Tan creativo. Cuanto más bajo vayas, los objetos 3D más hermosos mantienen un efecto de desplazamiento vertical hacia arriba.

Todas estas técnicas combinadas crean la sensación de que solo quieres seguir leyendo más del sitio web, incluso solo para ver las imágenes intrigantes y lo que los diseñadores han ideado a continuación.

Si navega a las otras páginas, verá que los objetos 3D del contenido de héroe de la página de inicio se han convertido en una parte permanente del fondo, mientras siguen flotando y moviéndose. Esta elección de continuidad permite una narración holística que acerca el punto a casa: somos un producto increíble.

¿Es la combinación de colores, el diseño en 3D, el movimiento discreto de la imagen o la ilustración de la tarjeta de crédito que desciende en un movimiento acrobático a medida que nos desplazamos hacia abajo en la página de inicio?

Es un poco de todo.

El esquema de color aquí es muy útil. Los tonos de naranja rodeados de una gran cantidad de espacios en blanco y una fuente sans-serif simple y redondeada funcionan juntos de manera integral. Pero lo que realmente se lleva la palma aquí son las técnicas de animación utilizadas para la ilustración de la tarjeta de crédito.

RappiPay obtiene nuestro voto por originalidad y compromiso notable. El contenido del sitio guía al visitante por la página hasta que toca fondo, porque a medida que la tarjeta de crédito se desliza tan suavemente por la página, activa la aparición de otras imágenes e ilustraciones. Y entre la interacción de la tarjeta de crédito con otros elementos, como revelar billetes de efectivo o dibujar líneas de puntos alrededor de una esfera, la tarjeta muestra giros acrobáticos hasta el final.

Así como la tarjeta de crédito cuenta bien la historia, llena de acción y vitalidad, también termina bien. El recorte circular al final que muestra las compras del propietario de la tarjeta nos dice cuántas características y capacidades tiene esta tarjeta, y cómo el propietario de la tarjeta realmente la llevó a todas partes y a cualquier lugar.

Las palabras minimalista y vanguardista son todo lo que podemos pensar aquí. Si una imagen dice mil palabras, diríamos que una imagen animada dice 5,000 o probablemente incluso más.

Bien, ahora es tu turno. Las técnicas de animación que hemos enumerado aquí son solo una pequeña fracción de lo que los creadores web pueden lograr al agregar funciones animadas a sus sitios web. Cada día hay más inspiración disponible, y hay mucho que ver y aprender. Nuestro lema como diseñadores es comenzar con lo básico, y como tiene prácticas de animación simples en su haber, su sitio web puede mostrar al mundo lo que significa ser un motor y un agitador.