Esta es la razón principal por la que muchos diseñadores reducen los menús a estilos más minimalistas. (Además, puede crear un diseño general más limpio y elegante).
Esto es lo que es tendencia en diseño este mes, y se trata de navegación.
Contenido del Articulo
El vínculo con la compatibilidad con dispositivos móviles es claro aquí: diseños de sitios web que utilizan la navegación emergente en todas las resoluciones de pantalla y tamaños de dispositivos.
Esto es algo que probablemente no hubiéramos recomendado hace unos años, pero los usuarios se están acostumbrando cada vez más a este estilo de navegación debido a su popularidad en los dispositivos móviles.
Común a este elemento de navegación es a menudo un menú estilo hamburguesa. El icono suele estar en la esquina superior derecha, mientras que el logotipo está en la izquierda. Esta plantilla personalizada preferida mantiene el diseño del menú completo familiar para los usuarios, aunque notará ubicaciones alternativas para algunos sitios web. (¿Te hace pensar?)
Lo que sucede cuando aparece una navegación puede adoptar una amplia variedad de formas y estilos de diseño. Aquí hay tres formas diferentes de probar:
Rizzardi Yachts es un ejemplo del uso más popular del estilo de navegación emergente, excepto por la ubicación del icono de la hamburguesa (que se encuentra aquí a la izquierda). El menú abre una lista de opciones a pantalla completa con la marca en la parte superior e interesantes animaciones flotantes para fomentar los clics. También agregan toda la información general del pie de página en la parte inferior de la pantalla emergente, incluidos los íconos de las redes sociales y las políticas del sitio web.
TomB utiliza un elemento de navegación emergente de pantalla parcial en la versión de escritorio que imita el tamaño de la navegación móvil. Esto funciona bien para elementos de menú con títulos cortos y asegura que el cuerpo del sitio y la marca siempre permanezcan visibles. No tiene que preocuparse de que los usuarios no sepan cómo cerrar el elemento de navegación, lo que a veces puede suceder con las superposiciones de pantalla completa.
Made by Field rompe todo “reglas”. La navegación está oculta dentro de un círculo en la parte superior derecha de la pantalla. Luego se expande a un menú de pantalla completa, pero carece de cualquier marca y está un poco abarrotado con un diseño ultra minimalista. Lo que podría ser más interesante son los estilos de desplazamiento Pase el cursor sobre los elementos del lado izquierdo y aparecerá la imagen de fondo. Pase el cursor sobre los elementos de la derecha y se animarán un poco sin cambiar el fondo.
2. Menús mínimos
Si bien los menús mínimos son un elemento de diseño en los ejemplos anteriores, aquí se llevan a un nivel completamente nuevo. No solo se ven minimalistas, muchos de estos sitios limitan por completo la cantidad de opciones disponibles, creando un viaje de usuario distinto.
Este estilo de diseño para la navegación funciona mejor en sitios más pequeños donde no hay muchas opciones o rutas para los visitantes, o sitios donde cada página está diseñada esencialmente como una transición al siguiente paso.
El truco de este tipo de navegación es establecer expectativas claras para el usuario. ¿Está claro lo que deben hacer a continuación? ¿Cómo interactúan con el diseño?
Dior by Starck es un sitio de una sola página de desplazamiento largo. Esta es una de las razones por las que un menú mínimo, solo una selección de logotipo, idioma y sonido, es suficiente. Tener un bloque de texto largo parcialmente oculto por el pergamino hace que sea obvio para el usuario que hay más debajo del pergamino y fomenta los siguientes pasos de interacción.
Magma usa un estilo muy similar al que vimos en Tomb en el primer conjunto de ejemplos, pero el menú tiene un poco más de una llamada a la acción básica al lado del icono de la hamburguesa. El diseño de navegación en realidad les dice a los usuarios que lo más importante que deben hacer aquí es hacer clic en este botón para “Reserve una demostración”, pero si eso no es para usted, hay opciones de menú adicionales.
Little Big tiene un menú mínimo oculto en la esquina superior izquierda de la página principal. Hay algunos botones, pero el diseño del sitio realmente solo tiene tres opciones para las páginas que no sean la página de inicio. Los cuatro botones restantes alejan a los usuarios del sitio, pero los llevan a canales muy importantes para la banda para que las personas puedan escuchar o transmitir sus canciones.
3. elementos invasores
Esta tendencia de diseño de navegación de sitios web puede ser la más difícil de implementar, ya que otros elementos de diseño ocupan parte del espacio de navegación. Aquí encontrará elementos de menú más tradicionales en la parte superior de la página, pero otros elementos de diseño se entrometen en el espacio.
Es una opción visualmente impresionante que combina elementos de diseño moderno con alta funcionalidad a través de una plantilla personalizada común.
El diseño del podcast Works Fine for Me tiene una estructura de navegación típica con un logotipo, enlaces y llamada a la acción botón, pero el contenedor de fotos azul-verde desaparece a través del menú. Esto ayuda a llamar la atención sobre la navegación y crea un flujo visual en la pantalla.
Taby vs Spacje, también un sitio web de podcasts, utiliza un patrón similar, pero en lugar de un elemento invasor proveniente de la parte superior, se infiltra en la navegación desde la parte inferior. El elemento de forma se coloca entre los enlaces de texto de navegación y el botón, y en realidad se contrae cuando se reduce el tamaño de la pantalla para garantizar que todos los elementos sean legibles.
Stripe Sessions tiene un elemento animado detrás de los elementos del menú central con el logotipo a la izquierda y llamada a la acción a la derecha. La colorida animación lleva la vista a los elementos de navegación en el centro de la pantalla, pero el espacio vacío que rodea los elementos del borde los convierte casi en un punto focal. ¿Qué parte del menú llama tu atención primero?
Conclusión
Y en algunos meses, notamos tendencias dentro de tendencias.
¿Puede utilizar estas tendencias en la navegación y el diseño de menús? ¿Qué es lo más relevante para los proyectos en los que está trabajando actualmente? Esperamos que haya encontrado algo útil y funcional aquí para mantener sus proyectos con un aspecto moderno y fresco.
carrie primos
