Antes de que CSS y JavaScript se unieran, el diseño web era un poco inerte, con gráficos y contenido anclados a diseños estáticos. Interactions 2.0 revolucionó todo aún más con una forma nueva y totalmente visual de crear interacciones y animaciones. Aquí tienes 11 ejemplos de IX 2.0 en acción que pueden inspirar tus propios diseños dinámicos.
1. Anatomía de un monopatín
Todos hemos oído lo importante que es para un escritor "mostrar, no contar". Pero este mismo concepto también funciona con el contenido web.
En lugar de explicar cómo se monta un monopatín, una animación basada en el desplazamiento coloca los ejes, las ruedas y las tuercas en su sitio, dándonos una imagen visual de cómo se hace. La animación es fluida y la representación del monopatín y sus piezas captura todos los detalles importantes. Cualquiera podría montar un monopatín después de verla.
Interactions 2.0 facilita la construcción de estas animaciones de varios pasos. Los diseñadores pueden tomar nota y aplicar este tipo de animaciones cuando sea necesario realizar un montaje. ¿Te imaginas si IKEA ofreciera animaciones como esta?
Podría ser una pesadilla para un diseñador a esa escala. Pero imagina un mundo con menos palabrotas, menos llamadas al servicio de atención al cliente y parejas más felices, libres del estrés de montar muebles de IKEA económicos y elegantes.
2. Modo nocturno
¿Cuántos de nosotros somos culpables de navegar por la web cuando deberíamos estar durmiendo? Nuestro insomnio se alimenta del parpadeo de las pantallas. Solo... un... vídeo... más... de gatos. Luego dormiremos.
Y es agradable cuando las interfaces se adaptan a nuestros hábitos web nocturnos. La navegación en Night Mode tiene un interruptor en la parte superior derecha que cambia el sitio al... lo has adivinado... modo nocturno. Esta interacción fue creada por el mismísimo líder del equipo de éxito del cliente de Webflow, Waldo Broodryk. Es un toque de diseño atento que ayuda a reducir la fatiga visual y hace que la navegación sea menos estresante, sin importar la hora que sea.
Otro detalle agradable es el pequeño y atento zoom activado por el desplazamiento que centra la atención en la foto. Es una forma sencilla y eficaz de mantenernos interesados, en lugar de dejar que nos distraigamos con algo más interesante.
3. Stickers el calamar animado
Teniendo bastante más de 30 años, probablemente no estoy en el grupo demográfico que se emociona con los paquetes de stickers de iMessage. Y eso está bien. Quiero decir, estoy tan desfasado sobre lo que está de moda que hace poco aprendí a usar emoticonos. ;)
Pero el camino hacia los corazones más cínicos es a través de un buen diseño. Las ilustraciones de este conjunto de stickers no solo son lindas y están ilustradas con alegría, sino que el diseño del sitio también es divertido de recorrer. Hay una serie de animaciones ondulantes que contribuyen a la temática acuática. El divertido intercambio de mensajes de texto simulado es un buen detalle. Me hizo darme cuenta de lo que me estaba perdiendo por no usar emoticonos. :(
Olvida el jardín de pulpos: quiero estar bajo el mar con Stickers el calamar.
4. Ilnur Kalimullin
Algunos artistas trabajan con óleo, otros con lápiz. Ilnur Kalimullin trabaja con píxeles en movimiento.
Esta animación destacada de una obra de Piet Mondrian es especialmente hermosa. Quizás estés intentando averiguar cómo la hizo. O tal vez te preguntes: ¿cuál es el punto? Lector, ¿por qué tienes que darle tantas vueltas a todo? Simplemente vive el momento. Vaya.
Siéntate y disfruta de los relajantes bloques de color fusionándose en su lugar. Yo lo estoy haciendo.
5. Raven Saarloos Wolf Dog
¿Dices que tienes un sitio web para tu perro? Qué tierno, seguro que le echaré un vistazo algún día.
Sí... claro.
Espera, ¿tu amigo peludo se llama Raven Saarloos Wolf Dog? Vaya. Ahora sí que me has llamado la atención.
Raven Saarloos Wolf Dog suena a algo sacado de una novela de fantasía. Un perro con un nombre así tiene que ser el líder de un ejército de canes antropomórficos decididos a destruir hordas de orcos y derrocar al reino de los cocker spaniel. HBO, si me lees: tengo una idea para una serie.
Resulta que Raven Saarloos Wolf Dog, a pesar de su nombre intimidante y su aspecto salvaje, es en realidad un perro bastante tranquilo que no tiene planes de darse un festín con tu médula ósea. Se conforma con que le rasquen la barriga y corretear por el parque.
Pero este perro tan genial se merece un sitio web igual de genial. Hay un montón de fotos fantásticas, tipografía llamativa y efectos de paralaje para darle vida a este scroll infinito.
¿Y quién es un buen chico?
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
6. Portafolio de Aaron Rudyk
Tu portafolio de diseño debe mostrar trabajos espectaculares, pero el sitio web en sí mismo debe ser una demostración de tus dotes de diseño. Aaron Rudyk logra ambas cosas con su portafolio online.
Lo que es especialmente genial es el efecto al pasar el ratón que aporta movimiento a cada proyecto destacado. Al pasar el cursor sobre cada proyecto, la imagen de fondo se deforma. Y al moverlo sobre cada proyecto en ángulo, este se endereza y se desplaza hacia adelante. Es una función de interacción fantástica que resalta el trabajo de Aaron.
7. Observatorio Cloud 9
Kai Jolly se sale del sistema solar con este diseño que hace un guiño a la serie de pósteres "Visions of the Future" de la NASA. Pero a diferencia de los pósteres de la NASA, que existen en el medio estático del papel, Interactions 2.0 pone este diseño en una órbita de movimiento encantador.
La imagen principal es una pirámide en una isla flotando en el espacio. Al pasar el ratón, esta oscila sobre su eje, y al hacer clic, se amplía. Es una acción fluida, bien diseñada y ejecutada.
El espacio puede ser la frontera final, pero también hay galaxias de animaciones e interacciones web aún por descubrir por ti, valiente astronauta del diseño.
8. Reconstrucción del sitio de Anderson Paak
Esta reconstrucción hecha por un fan del sitio web de Anderson Paak sería fascinante de ver incluso si la imagen principal fuera solo una pieza. Las texturas orgánicas y el collage de sol, olas y gráficos parecen arrancados de las páginas de una revista antigua y muestran un toque de excentricidad sin pasarse. Interactions 2.0 impulsa este diseño un paso más allá.
Animar diferentes capas que reaccionan al cursor agita los gráficos, creando pequeñas olas de movimiento que mantienen a Anderson Paak flotando sobre todo ello detrás de su piano. Este es el tipo de interacción que requiere reflexión y planificación, pero la recompensa es grande a la hora de lograr una experiencia de usuario creativa.
9. Snow Doggo
Este es el tipo de animación que estoy seguro de que Waldo Broodryk se divirtió creando. Snow Doggo es una versión original de una bola de nieve, colocando a un perro en el centro de la acción invernal.
Lo mejor es el movimiento de la animación vinculado al cursor. Moverlo hace que la bola se agite y los ojos del perro siguen al cursor. Esto da lugar a una interacción divertida e ingeniosa.
10. Bebida energética Mr. X
Para quienes se lucen haciendo piruetas y viven al límite, Mr. X tiene la bebida perfecta para recuperar energías. Mr. X conoce bien a su público, y el diseñador demuestra que sabe de lo que habla con un diseño limpio en rojo, blanco y negro. ¡Tiene más impacto que un kickflip en skate!
Este diseño tiene muchísimos puntos a favor. Primero, el vídeo de fondo con imágenes en blanco y negro de skaters, snowboarders y otros deportistas en acción. Está muy bien rodado y captura a la perfección ese espíritu de libertad de los deportes extremos. Si a esto le sumamos un efecto de paralaje genial y unas microinteracciones con mucho estilo, el resultado es un diseño fantástico.
11. Web 3D de Kai Jolly
¡Otro diseño soberbio de Kai Jolly!
¿Cuántos de nosotros hemos hecho scroll infinito por conceptos de diseño web mientras aprendíamos? Hay tantos conceptos y tantos bloques de contenido... Pero, ¿y si hubiera una forma mejor y más atractiva de presentarlos?
Kai Jolly lo logra en Web 3D con su menú interactivo de conceptos web. Gracias a unos gráficos 3D magníficos combinados con elementos dinámicos, como paneles ocultos y astronautas que cambian de color al mover el ratón, este proyecto es educativo y súper divertido. Las interacciones 2.0 son perfectas para convertir material que podría ser aburrido en algo único y entretenido.
Deja que las interacciones 2.0 te ayuden a crear nuevas experiencias web
El diseño siempre evoluciona y las interacciones 2.0 están aquí para impulsarlo aún más. Pero, como con cualquier tendencia, es importante usarlas con cabeza y propósito. Está muy bien tener una herramienta nueva y brillante en nuestro arsenal, pero no perdamos de vista la usabilidad. (Un minuto de silencio por nuestro querido y difunto amigo Flash. Que descanses en paz).
Deja que las interacciones 2.0 inspiren y cautiven, transformando tu contenido de un lienzo estático a algo vivo y dinámico.
Si has encontrado ejemplos inspiradores de interacciones 2.0 por ahí, nos encantaría que nos lo contaras en los comentarios.
