10 animaciones del menú de hamburguesas que sorprenderán sus mentes

Debido a que la experiencia del usuario domina la mayoría de nuestras discusiones sobre el diseño web, es importante echar un vistazo más de cerca a esto que llamamos el menú “Hamburguesa”. Si te lo perdiste, he llegado al dominio del menú de hamburguesas. Discutimos las mejores formas de desordenar un sitio web con una serie de trucos y minimizar herramientas. También abordamos las mejores prácticas en el menú de navegación, que incluía el razonamiento para el cual un menú de hamburguesas podría ser adecuado para el diseño de su sitio de WordPress. Ahora que ya hemos establecido cuán fuerte puede ser un elemento de diseño el menú de hamburguesas para los sitios web, para centrarnos en lo que puede hacer más para aumentar su presencia a través de la animación.
Los menús de hamburguesas nos ayudan a alcanzar una variedad de objetivos:
Diseño elegante y mínimo
Énfasis en elementos de contenido o navegación más importantes
Comunicación simplificada entre el sitio y su visitante
Consistencia entre el diseño móvil y de escritorio
Además, el menú de hamburguesas se ha convertido en un símbolo bien conocido para muchos usuarios. Esto ahora facilita su trabajo de diseñador/desarrollador. Ponga su navegación detrás del símbolo del menú y luego gaste sus energías creativas en todo lo que rodea la navegación que incluye la animación del menú en sí. Animación, no importa cuán pequeño sea, ayuda a atraer la atención de los visitantes a un menú que pueda ser simple por su naturaleza, pero que aún sea digna de atención. Y, al proporcionar su atención a la navegación, puede liderar a los visitantes de manera más eficiente a través de su canal de conversión.
¿Crees que la animación puede no ser adecuada para tu menú de hamburguesas o tal vez no estás seguro de cómo puedes marcar la diferencia? Vea estos ejemplos de animaciones con hamburguesa en acción. 1. Más hamburguesa del sitio de Moresleep tiene una animación elegante.

Para cualquiera que le guste la idea de usar el menú de hamburguesas, pero está un poco nervioso por la desviación de la navegación estándar alineada hasta la cual muchos usuarios están familiarizados, revise en Moresleep. La navegación permanece bien oculta dentro del símbolo de la hamburguesa. Sin embargo, cuando alguien hace clic en él, el aspecto de navegación estándar está en posición, lo que le da a este sitio una pequeña animación genial, mientras se mantiene en el estilo más tradicional.
2. Diseño de sofá
El sitio web del diseñador Jesse Couch presenta un enfoque diferente al diseño tradicional del menú de hamburguesas.

Este diseño de menú de hamburguesas se reproduce con los aspectos de navegación tradicionales. La animación en esto desde el sofá de diseño es simple y limpia, porque vemos cómo el botón de la hamburguesa cambia en una “X” mientras la navegación recurre. Con otro clic en el botón, la navegación se esconde y “X” regresa a las tres líneas que nos dicen dónde están los elementos del menú. 3. El St. Menú de hamburguesas de Louis Browns del sitio St. Louis Browns se combina perfectamente con el diseño.
Este sitio web con béisbol con el tema de la St. Louis Browns ofrece un giro creativo al menú de hamburguesas, cambiando el símbolo estándar de tres cero para una pelota de béisbol junto con la palabra “menú”. La animación para esto es en sí misma, bastante simple: con un clic en la pelota de béisbol, una superposición semi-opaca sobre la pantalla y el menú de navegación se vuelve vertical. 4. El sitio web de Mass Mass Massi Tupungato de Tupungato presenta un cambio clásico en el diseño del menú de hamburguesas. El sitio web del viñedo Massi Tupungato conserva la animación simple, limpia y cautivadora. Pase el mouse sobre el símbolo del menú de hamburguesas y siga el icono de giro. Haga clic en el símbolo y siga cómo se convierte en una “X”. Coloque el cursor sobre cada una de las opciones de página y observe cómo aparecen las líneas de acento junto a ellas. Como hilos
Threads Lence tiene una animación simple y moderna del menú de hamburguesas, que refleja el diseño del sitio.
En un argumento para usar la animación y los colores que se alinean bien con la marca, Horts Like hace exactamente con su menú animado de hamburguesas. La animación y el menú en una pantalla completamente resultante son similares a lo que ha hecho el viñedo Massi Tupungato, pero es importante tener en cuenta qué tan bien la increíble superposición blanca y negra con el estilo general de este sitio de moda.

6. Manual de empleados de Zaarly
El manual de los empleados Zaarly.

El manual de los empleados Zaarly es bastante genial. Todo el sitio web se dedica a presentar a los empleados en Zaarly de una manera única y creativa. Su uso de un menú animado y colorido de hamburguesas solo se suma a la atracción para obtener más información sobre la cultura de esta empresa.

7. Rokkan
El menú de hamburguesas de Rokkan tiene un diseño de cuadrícula.
Debido a que el sitio web de Rokkan ya está usando animación, es lógico incluir poco en su menú de hamburguesas. A diferencia de muchos ejemplos que encontrará con los menús de hamburguesas, Rokkan da un giro único que no necesariamente en la animación de la navegación, sino en la forma en que presenta la página y las opciones con el mouse. 8. El menú Maecia Hamburger del sitio web de Maecia tiene una cuadrícula de clics. El menú de hamburguesas de la agencia digital francesa Maecia es una belleza. Se dirigen varias cosas. Para empezar, es receptivo. En segundo lugar, la animación es simple y refleja los otros tipos de animaciones que encontrará en el sitio. Finalmente, en lugar de confiar solo en pequeños movimientos para indicar el mouse de la página, usaron mucho y el color, que espero ser genial para aumentar el compromiso.

9. Demodern El sitio web Outdder tiene un menú de hamburguesas frías, diseñado asimétricamente. Aquí hay otro ejemplo de una agencia europea y demoderna, que pone su propia marca en el menú Hamburge. Además de crear lo que al principio parece ser un menú simple pero estilizado, las animaciones de transición de la página reflejan la misma estilización, creando un muy elegante y bien pensado. 10. Newton Running
El menú de hamburguesas de Newton Running es una experiencia de pantalla completa.
Debido a que el sitio web de Newton Running se centra en las zapatillas de carrera, es lógico que les gustaría tener un movimiento fuerte en su navegación para reflejar ese tema subyacente. Este menú especial para la hamburguesa crea una página web casi completamente diferente y funciona maravillosamente. Como hemos visto recientemente en las pruebas alrededor del logotipo, cualquier cambio que se desvíe de lo esperado y que pueda interrumpir la experiencia del usuario puede tener un efecto negativo en su Sitio. Sin embargo, en cada uno de los casos anteriores, los menús de hamburguesas todavía están en la parte superior del sitio web, donde el usuario esperaría encontrarlos. Dicho esto, aún es importante probar la división A/B para garantizar que un menú de hamburguesas, solo, un uno-one-one, es adecuado para su sitio. Algunos estudios sugieren que los menús de hamburguesas pueden ser tan eficientes como una navegación estándar, como Mientras estén asociados con la palabra “menú”.

Los menús de Hamburge pueden ser una excelente manera de limpiar su sitio y ser creativo dirigiendo el tráfico a través del canal de conversión, pero no en detrimento de la experiencia del usuario. Una vez más, depende de usted descubrir qué funciona mejor para sus usuarios, así que asigne el tiempo para encontrar ese punto favorable entre la ubicación del menú, el icono, los formularios y la animación.
Para usted: si tuviera que elegir entre la última tendencia de fondo de video o estas animaciones de menú increíbles y sutiles, ¿cuál elegiría y por qué?
Etiquetas:
animaciones
menús