Al crear un sitio web, hay muchas cosas diferentes a considerar. Por lo general, comienza con cómo desea que se vea y se sienta el diseño general de su sitio web. Desea que coincida con el contenido de su sitio web para que potencie el mensaje que está tratando de enviar.
Uno de los factores que juegan un papel importante en la forma en que su sitio web influirá en el comportamiento de los visitantes es el menú principal. Con Divi , hay toneladas de posibilidades que le permiten diseñar su menú de una manera hermosa que coincida con el resto de su sitio web y lo ayude a guiar a sus visitantes a través de su sitio web.
Una de esas posibilidades es usar una navegación vertical en lugar del menú superior. Aunque la navegación vertical no se usa con tanta frecuencia, puede ofrecer resultados sorprendentes si está bien pensada y si coincide con el resto de su sitio web. Al igual que el menú superior, el menú vertical sigue a los visitantes durante toda su estancia en el sitio web.
Para inspirarte, hemos elegido 12 sitios web que utilizan la navegación vertical para optimizar la experiencia del visitante al mejorar la forma en que navegan por el sitio web.
Master en Diseño de Interiores es un sitio web impresionante que trata sobre diseño de interiores. En la imagen de arriba, puedes ver cómo han usado el menú vertical para darle ese toque extra a su sitio web.
Los colores que se están utilizando en el sitio web son muy neutros, lo que le da ese toque moderno al sitio web, así como a la empresa o marca en cuestión.
La navegación vertical no es una excepción. Los colores que se están utilizando son muy sutiles y no molestan a los ojos durante la lectura.
2. Modelo en la parte superior
Model On Top es un sitio web de gestión de modelos. Este sitio web, creado con Divi, permitió que una cierta armonía se uniera y mostrara la profesionalidad y la experiencia que quieren vincular a su empresa.
Además de tener una navegación vertical muy agradable que contiene todos los elementos necesarios, como un logotipo, las páginas y una barra de búsqueda, también crearon ese compromiso mediante el uso de un fondo de video justo al comienzo de su sitio web.
La navegación vertical no necesitaba mucho diseño especial, sino que decidieron mantenerla limpia y dejar que las imágenes en el resto de la página hicieran el trabajo.
3. Escuela de cine Art-On-The-Run de Berlín
Art-On-The-Run Filmschool Berlin representó perfectamente el lado artístico que una escuela de cine necesita en su sitio web. La navegación vertical tiene un propósito especial en el cuadro completo.
Usaron deliberadamente una navegación vertical para disfrutar de los beneficios de hacer que el menú pareciera una especie de ‘lista’. Han usado una numeración que está en línea con el tema del sitio web. La numeración podría, además de las páginas, interpretarse fácilmente como escenarios o episodios.
La combinación de las páginas y el logotipo que se muestra dan una cierta sensación de sencillez y estructura. No fallaron en representar imágenes que están bastante en línea con lo que trata su sitio web.
4. Marcas Alex
Alex Brands es un sitio web de comercio electrónico de Divi que vende todo tipo de cosas para niños; desde artes y manualidades hasta muebles y juegos. El sitio web muestra de inmediato el tipo de sentimiento que quieren representar; juguetón y acogedor.
La navegación vertical también fue elegida en este caso muy deliberadamente. Hay muchas páginas diferentes, si hubieran optado por un menú superior, se perdería la estructura y no habría suficiente espacio.
5. Fotos de Devlin
Delvin Photos es probablemente el sitio web más elegante de todos los mencionados en esta publicación. Delvin Photos utiliza su sitio web para mostrar todo su trabajo de una manera original y atractiva para atraer nuevos clientes por los servicios que ofrecen.
Usaron la navegación vertical para enfatizar la elegancia que están usando en el resto de su sitio web y al incluir íconos de redes sociales en su menú principal; también se aseguran de que las personas puedan acceder a los canales de las redes sociales en cualquier momento durante su estancia en el sitio web.
6. Maquillaje de velada
Soirée Makeup es un sitio web que gira en torno al maquillaje. El sitio web está diseñado específicamente para ofrecer los servicios de maquillaje de un maquillador. El sitio web muestra inmediatamente la sencillez y elegancia que se espera de todo maquillador. No demasiado extravagante pero bonito a la vista.
El sitio web, en general, no ocupa toda la pantalla, lo que hace que el contenido sea más concentrado. En la navegación vertical, la mayor parte de la atención se dirige al logotipo y al cuadro de contacto.
Incluir un cuadro de contacto dentro de la navegación vertical le permite al maquillador enfatizar el propósito más importante que tiene el sitio web; conseguir nuevos clientes potenciales, nuevos clientes y nuevas reservas.
7. Fotografía de Nathan Welton
Nathan Welton Photography es el segundo sitio web de fotografía que seleccionamos para esta publicación. El uso de la navegación vertical para un sitio web de fotografía es mucho más común que para otros sitios web. Eso suele ser porque las imágenes en el sitio web hablan por sí mismas.
Los propietarios de sitios web de fotografía utilizan una navegación vertical simple para mantener el enfoque en las imágenes al tener un menú que es fácil de usar y que no distrae.
Las imágenes que Nathan Welton usó en su sitio web son exactamente eso; están llenos de aventuras y cuentan su propia historia. La navegación vertical solo está ahí para fines prácticos y no interrumpe la página como lo haría un menú superior.
8. Fotografía de Lilly
Lilly Photography es el último sitio web de fotografía que elegimos para esta publicación. Lo mejor de este sitio web es que utiliza una galería en la página de inicio.
La galería muestra el trabajo que se ha realizado en el pasado para crear una cierta sensación de experiencia. Porque al final; la gente busca un fotógrafo que tome fotografías que estén en línea con lo que esperan.
La navegación vertical es similar a la navegación vertical utilizada por Nathan Welton; simplista pero haciendo el trabajo.
9. Cine Pittsburgh
Film Pittsburgh es una organización de presentación de películas. Una de las cosas buenas que hicieron fue crear un segundo menú en la parte superior de su página que permite a los visitantes obtener información práctica.
La navegación vertical, por el contrario, es bastante informativa pero ayuda a los visitantes a comprender su historia y misión llevándolos a las páginas correctas. Dividir las páginas prácticas y narrativas entre sí potencia la narración en el menú principal.
Además de usar la navegación vertical, Film Pittsburgh tampoco usó el tamaño completo de la pantalla, lo que les dejó espacio para mejorar su diseño con una imagen de fondo relevante.
10. mezcla amor
BlendLove es una tienda de alimentos ubicada en Australia. Han creado un sitio web para informar a sus clientes sobre toda la información práctica que necesitan saber.
Uno de los buenos extras que ofrecen en su sitio web es la oportunidad de comprar un libro electrónico lleno de la comida saludable que hacen. Es una buena manera de relacionarse con los clientes, conocer quiénes son e incluso obtener ganancias.
El sitio web en sí tiene una paleta de colores de tonos oscuros que crea un bonito contraste con el logotipo que tienen. Se aseguraron de que los colores fueran consistentes en todo su sitio web, también en su navegación vertical. Es importante asegurarse de que haya consistencia porque la navegación vertical ocupa una parte relativamente grande de la pantalla, mientras que un menú superior generalmente no se nota tanto.
11. Buen provecho
Bon Appetit es un sitio web belga enfocado en dar talleres que involucran muchos sabores y aromas. Los ejemplos anteriores y este ejemplo difieren en una cosa con seguridad; el sitio web de Bon Appetit está más centrado en el contenido escrito que proporcionan que en la visualidad.
El menú vertical se ha dividido en 3 tipos de piezas; el logo, las páginas y servicios extras como atención al cliente y envío. La diferencia de estilo entre las páginas y los servicios adicionales le da una sensación extra de organización y un toque al sitio web.
12. Comer restaurante tailandés
Eat Thai Restaurant es el último ejemplo de este post. Es un restaurante móvil de propiedad local que va al grano. Su sitio web no tiene varias páginas. Prefirieron tomar una página y enfocarse en lo que es más importante; la comida. El sitio se utiliza para redirigir a las personas que desean hacer un pedido a un sitio web de pedidos.
Lo bueno de la navegación vertical utilizada en este ejemplo es que realmente no está allí para navegar, sino más bien para informar. La navegación vertical sigue a un visitante durante toda su estancia en el sitio web, lo que significa que la información también lo hace. Proporcionaron toda la información relevante en el menú, junto con los íconos sociales y un CTA de ‘Ordene ahora’.
Pensamientos finales
Esperamos que esta publicación le brinde mucha inspiración que lo ayude a pensar en grandes conceptos para los sitios web actuales que tiene o los sitios web futuros que está creando. Si tiene alguna sugerencia o comentario; ¡siéntase libre de dejar un comentario en la sección de comentarios a continuación! Y mientras esté allí, háganoslo saber; ¿Para qué tipo de sitio web usarías la navegación vertical?
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada de LuckyDesigner / shutterstock.com