Una estructura de navegación bien diseñada es crucial para cumplir con los objetivos del sitio web. La navegación puede ser simple o compleja, pero debe ser efectiva. Por supuesto, efectivo no siempre significa bonito. Significa que por la cantidad de contenido que tiene el sitio, es fácil encontrar lo que buscas. En este artículo, veremos 13 sitios web de Divi con un diseño de navegación efectivo.
Al crear esta publicación, mi objetivo era determinar el objetivo del sitio web y luego evaluar si el diseño de navegación es efectivo o no en función de ese objetivo. Consideré los menús primarios y secundarios, pero no solo miraba los menús. También miré los enlaces dentro o debajo de la sección principal que crea una estructura de navegación.
Algunos de los sitios web a continuación proporcionarán información dirigida a una industria específica con un lenguaje que la industria entiende. Otros proporcionan iconos para que la navegación sea comprensible de un vistazo. Otros proporcionan enlaces para que sea más fácil llegar a su audiencia potencial. Dentro de las imágenes, me concentré en la navegación, por lo que verá menús abiertos que a veces hacen que el sitio se vea muy diferente de lo que esperaría.
Ahora, en los sitios web…
Los restaurantes deben proporcionar información de contacto para direcciones, reservas y un menú de comida que sea fácil de encontrar y comprender. La navegación en este sitio web proporciona todo eso en una estructura simple. Agrega un número de teléfono en el que se puede hacer clic y un enlace a Google Maps en el menú secundario con íconos para que sean fáciles de entender de un vistazo. Los enlaces al menú de comida son fáciles de usar en el menú principal.
Ver sitio web
2. La Iglesia Wesleyana
Las iglesias necesitan información sobre la Iglesia, eventos, ministerios, recursos para obtener más información, ubicación y un enlace de donación. Este incluye todos esos elementos en el menú principal o secundario. El menú principal es un mega menú con un gráfico y enlaces simples a esa categoría. El llamado a la acción de donación es azul, por lo que se destaca sin sobresalir demasiado. Los colores funcionan perfectamente para el diseño del sitio.
Ver sitio web
3. Universidad Warner
Las escuelas tienen que proporcionar una tonelada de información para varios propósitos y audiencias diferentes, incluidos maestros, estudiantes, futuros estudiantes, padres e información sobre el campus, cursos, cursos en línea, admisiones y mucho más. Es difícil proporcionar esa cantidad de información de una manera que sea fácil de encontrar. Este logra el objetivo con un mega menú que divide los temas principales en subtemas y los muestra en columnas. El menú secundario proporciona otra ronda de enlaces, pero es fácil comprender que esos temas no están dentro del menú principal, por lo que no está buscando en los lugares equivocados.
Ver sitio web
4. Colegio de los Olivos
Esta escuela tiene un enfoque diferente pero proporciona la misma cantidad de información. El menú principal proporciona los enlaces principales con iconos y utiliza una herramienta de búsqueda eficaz. El mega menú utiliza imágenes grandes con superposiciones. Cuando se abre, el mega menú proporciona pestañas con enlaces e imágenes. Se colocan más enlaces en la parte inferior de la página y permanecen en su lugar al desplazarse.
Ver sitio web
5. Diseño Skyfox
Los portafolios en línea deben proporcionar información básica que no se pierda en el contenido. Este sitio hace eso usando las propias páginas como navegación, creando un diseño de archivador. Cada página está bien etiquetada y puede ver exactamente lo que está buscando tan pronto como se carga la página. Haga clic en cualquier página y se inclina hacia adelante, ocultando el resto. Cada página incluye un enlace de menú en la esquina que inclina la página hacia atrás para mostrar la página de inicio, que muestra la instantánea de las páginas tal como las dejó. Otro menú permanece en la parte inferior de la página que lo lleva directamente a cada página.
Ver sitio web
6. Recuperar
Los sitios web de mejoras para el hogar a menudo tienen cantidades masivas de productos para categorizar y presentar de una manera fácil de entender. Este sitio simplifica la navegación a través de esos productos al crear un nuevo menú debajo del menú principal que incluye íconos de los tipos de productos. Puede saber de un vistazo en qué enlace hacer clic solo con el icono. Al hacer clic en ellos, se accede a la lista de productos.
Ver sitio web
7. Ryan Welch
Por lo general, los fotógrafos deben proporcionar información sobre ellos mismos y el trabajo que realizan, como cualquier buen portafolio, pero también deben guiar al cliente potencial a través del proceso. Este usa un diseño de navegación numerado y coloca la navegación dentro de un cuadro que se superpone a la sección principal. Al desplazarse, la navegación numerada se agrega debajo del menú principal, lo que facilita el paso por el proceso. Cada una de las secciones están numeradas para que coincidan.
Ver sitio web
8. Gruissan Mediterráneo
Los sitios web de los turistas deben proporcionar mucha información sobre una ubicación que incluye cosas para ver en el área, lugares para comer, hoteles, entretenimiento, etc. Este utiliza fuentes que funcionan perfectamente con el diseño del sitio y proporciona dos áreas de navegación. El primero es el menú principal que incluye iconos para que puedas entenderlo rápidamente. El segundo es un menú debajo del área del héroe que se abre al pasar el mouse. Esta área proporciona información más detallada sobre los detalles del área.
Visita el sitio web
9. DJ Charlie Villas
Los DJ suelen utilizar gráficos estilizados para conectarse con su audiencia. Este proporciona el menú principal estándar y los enlaces de texto, pero hay otro menú en la parte inferior de la página de inicio simple que muestra ilustraciones que se ajustan al estilo del sitio web. Este menú funciona como una llamada a la acción a las distintas páginas y servicios. Las ilustraciones muestran visualmente para qué sirve el enlace. Al pasar el cursor sobre un gráfico, se revela el texto que coincide con el menú principal. Incluye animación flotante.
Ver sitio web
10. Nota elegante
Una de las mejores formas en que las empresas pueden ayudar a los clientes a descubrir exactamente lo que necesitan de usted es haciéndoles preguntas. Este sitio web hace preguntas iniciales dentro del mega menú. El enlace Productos abre el menú y hace la pregunta, que luego conduce a varias soluciones en las siguientes dos columnas. Las soluciones brindan información visualmente con íconos e incluyen un título y una breve descripción. Una simple llamada a la acción en la parte inferior invita al cliente a ver todas las funciones disponibles. El mega menú es limpio y fácil de seguir.
Ver sitio web
11. Escuela de Cine
Aquí hay otro uso efectivo de la navegación numerada. Un tema tan poco familiar como la escuela de cine necesita guiar a los estudiantes potenciales a través del proceso. Esta navegación numerada hace eso. El menú se proporciona verticalmente y permanece en pantalla en todo momento. A medida que se desplaza sobre el menú, los enlaces reaccionan y resaltan ese enlace. Al pasar el cursor sobre la pantalla, se revela dónde se encuentra dentro del menú. Cada una de las secciones está numerada para coincidir con la navegación.
Ver sitio web
12. Mambo Medios
Este crea una navegación única para la cartera. Agrega la estructura del menú directamente en el área principal, mostrando enlaces animados al portafolio sobre un video de fondo. El video solo se reproduce mientras se desplaza, lo que significa que los enlaces están directamente a la vista para que no tenga que buscarlos. Esta es una forma interesante de hacer que el portafolio sea visual y al mismo tiempo mantenerlo fuera del camino. Aunque los enlaces se colocan sobre el video, el área del héroe aún se ve limpia.
Ver sitio web
13. Cascadas de Willow Creek
Las ubicaciones que atienden a ciertos tipos de eventos deben proporcionar mucha información sobre los eventos y el área circundante. Los enlaces dentro del menú principal de este sitio web son fáciles de entender y seguir, pero es el menú secundario lo que me atrae. Proporciona enlaces que incluyen un número de teléfono en el que se puede hacer clic, información nupcial, un sitio web para alquiler de cabañas, la página de Facebook de la empresa y Google Maps. Cada uno de los enlaces incluye iconos para que puedas saber de un vistazo para qué sirven.
Ver sitio web
pensamientos finales
Ese es nuestro vistazo a 13 sitios web de Divi con un diseño de navegación efectivo para ayudarlo a inspirarse para su próximo sitio web de Divi. Me gusta especialmente el uso de iconos y mega menús. Aunque algunos tienen mucho contenido dentro del menú, está bien ordenado y es fácil de seguir.
Una navegación bien diseñada puede hacer que su sitio web sea más eficaz para alcanzar sus objetivos. Para obtener más información sobre el diseño y el estilo de la navegación con Divi, consulte los artículos:
- Cómo agregar la navegación de puntos etiquetados al diseño gratuito de la línea de tiempo del décimo aniversario de Elegant Themes
- Cómo crear una página de inicio de navegación con Divi
- 3 formas creativas de diseñar el enlace activo de navegación vertical Divi
- Cómo crear una navegación vertical con Divi que impulse el negocio
- Cómo hacer que la navegación estándar y vertical se superpongan en su sitio web Divi
- 3 formas creativas de darle estilo a la navegación del submenú vertical
- Cómo crear una navegación vertical transparente que se superponga a su sitio web Divi
- Cómo hacer que su navegación Divi comience en la parte inferior, luego permanezca fijo en la parte superior al desplazarse
- Cómo crear un mosaico de navegación con el módulo deslizante Divi
Queremos escuchar de ti. ¿Cuáles de estos diseños de navegación son tus favoritos? Háganos saber lo que piensa sobre ellos en los comentarios.