10 sitios que hacen navegación vertical a la derecha
La mayoría de los menús de navegación web fluyen horizontalmente por la página. Esto proviene de una historia de monitores tradicionales que son más anchos que altos.
Pero con tanto espacio en la pantalla, ahora es posible que los sitios web usen menús de navegación vertical en su lugar. Y muchos de ellos se ven fantásticos.
Estos 10 ejemplos de menús verticales son perfectos para estudiar por el estilo de diseño único y la facilidad de uso distintiva.
1. Viveros de Petersham
Sobre el Viveros Petersham sitio web encontrará una navegación vertical anidada. Esta técnica no es algo que encontrará muy a menudo, pero funciona bien en este sitio.
Cada enlace de navegación principal utiliza un icono en el fondo para transmitir los enlaces visualmente. Y los dos primeros enlaces abren submenús alineados junto al menú principal. Estos reemplazan los menús desplegables que normalmente ve en los menús horizontales.
Este sitio es receptivo, por lo que en tamaños más pequeños, estos enlaces desaparecen detrás de un menú de hamburguesas. Esto crea una división razonable entre los usuarios de escritorio con suficiente espacio para enlaces verticales y los usuarios móviles a los que les va mejor con una barra de navegación horizontal.
2. Restaurante Arbor
Otro ejemplo muy singular es Restaurante Arbor que tiene una navegación vertical limpia con mucho espacio entre enlaces. El contenido aparece en un contenedor deslizante que también se alinea verticalmente junto a la navegación.
Este estilo de contenido es bastante único. La mayoría de los sitios de navegación vertical mantienen su contenido alineado con la página principal, pero en este caso puede mostrar / ocultar el contenido con facilidad. Agrega un cierto estilo a la navegación vertical que mantiene el impulso de la página fluyendo hacia abajo con el contenido.
3. Huesos ahumados
Huesos ahumados tiene dos cosas a su favor: comida increíble y un sitio web espectacular.
Cada página utiliza la navegación vertical larga fijada en el lado izquierdo. Este es un elemento básico para la mayoría de los sitios web porque la mayoría de los lectores occidentales consumen contenido de izquierda a derecha, y la esquina superior izquierda es el lugar tradicional para el logotipo de un sitio.
Una característica adicional que me gusta es el menú desplegable que enumera todos los platos del restaurante. Si hace clic en el enlace «menú», verá cómo esto también funciona como un submenú agregado verticalmente. Definitivamente una idea genial que funciona bien para un sitio de restaurante pequeño.
4. Mammoth Media
Cuando tiene menos contenido, puede salirse con la suya con opciones de navegación más poco convencionales. Mammoth Media es un buen ejemplo que solo tiene cinco páginas principales en su sitio más un blog.
Una faceta específica de esta navegación es la función desplegable oculta. Si hace clic en el enlace «trabajo», obtendrá 2 enlaces alternativos en los que puede hacer clic. Aparecen debajo del enlace principal, por lo que adoptan el papel de un menú desplegable más pequeño.
Incluso en dispositivos móviles, esta navegación sigue un estilo similar. Es una prueba de que cuando no tienes demasiados enlaces, puedes impulsar la creatividad.
5. Amazonas
Todos y su abuela conocen Amazon. El minorista en línea tiene una selección asombrosa, pero también tienen un diseño de interfaz de usuario fantástico con enlaces de navegación verticales en las páginas de búsqueda de productos.
Amazon tiene docenas de categorías para cada término de búsqueda. Esto significa que necesitan una forma de presentar funciones de búsqueda refinadas sin saturar la página. Las navegaciones verticales simplemente tienen sentido porque pueden esconderse hacia un lado sin dejar de ser completamente accesibles.
Si está diseñando un tipo de navegador de filtrado similar, definitivamente recomiendo estudiar la estrategia de Amazon. Han optimizado su sitio sin fin, por lo que hay muchas razones para creer que sus enlaces de clasificación vertical funcionan bien.
6. Córum
Corum’s El sitio web tiene otra navegación vertical limpia, con características muy simples. Vínculos en mayúsculas, texto oscuro, estilos de desplazamiento claros y un fuerte contraste con la página principal.
Este es uno de los aspectos más importantes al diseñar la navegación vertical. Por lo general, desea crear una fuerte división entre la barra de navegación vertical y el contenido de la página. En este caso, se hace usando un color de fondo más claro con el logo de Corum cerca de la parte superior.
Y los usuarios con capacidad de respuesta móvil, en cambio, obtienen un menú desplegable que funciona bien como una alternativa para pantallas que son más largas que anchas.
7. Nua Bikes
Una de las mejores formas de utilizar una navegación vertical es con un diseño de página única. Sitios informativos como Bicicletas Nua no siempre se necesitan docenas de páginas llenas de contenido.
Por lo tanto, con un menú de navegación vertical es mucho más fácil navegar por el contenido por capricho usando animaciones y áreas de página personalizadas. En este caso, la navegación de Nua Bikes se integra en la página, ya que está directamente vinculada a todo el contenido de esa página.
8. Michael Ngo
Otro sitio que sigue la tendencia de navegación vertical de una sola página es Cartera de Michael Ngo.
Tiene una imagen de encabezado bastante cautivadora que inmediatamente llama tu atención y te atrae. Pero el contenido es la parte más interesante ya que todo funciona a través de 3 enlaces diferentes: casa, trabajo y contacto.
Los enlaces de navegación también tienen sus propios subtítulos para que pueda ver lo que hacen incluso de un vistazo.
Una cosa a tener en cuenta es cómo la navegación permanece fija mientras se desplaza hacia abajo en la página. Esto mantiene todos los enlaces accesibles desde cualquier punto, lo cual es crucial en un menú vertical más pequeño.
9. Medienstadt.koeln
El sitio alemán Medienstadt.koeln tiene una visión bastante diferente de la navegación vertical. Su navegador permanece oculto detrás de un menú de hamburguesas en todo momento, pero aún abarca toda la altura de la pantalla.
También incluye más enlaces que el típico navegador horizontal superior. Esto tiene sentido, pero puede resultar confuso para algunos visitantes.
Lo que más me gusta del estilo vertical es cómo se mantiene escondido incluso en los escritorios hasta que se necesita.
Por supuesto que hay debates sobre problemas de descubrimiento con menús de hamburguesas. Pero creo que este icono se está reconociendo rápidamente y este diseño es un excelente ejemplo de navegación vertical oculta en acción.
10. El sistema Metrick
La agencia de publicidad Sistema Metrick mantiene su navegación simple y al grano. Sigue el estilo vertical, pero también es muy diferente a todos los demás en esta publicación.
Me gusta el menú desplegable oculto que solo muestra enlaces adicionales cuando se hace clic en un enlace principal. Su enlace «diario» es un buen ejemplo. Aparecen nuevos enlaces a un lado y se desvanecen a la vista con un solo clic.
Los usuarios de dispositivos móviles obtienen una experiencia similar, excepto que estos enlaces de submenús aparecen debajo del enlace principal. Pero este navegador es tan pequeño que puede funcionar para prácticamente todos los tamaños de pantalla.
La recapitulación
La navegación vertical funciona mejor en sitios que dependen de un espacio adicional en la pantalla. Estos suelen incluir sitios de cartera, restaurantes, pequeñas empresas y tiendas de comercio electrónico.
Pero independientemente del sitio, siempre puede intentar agregar una navegación vertical a su diseño. Y espero que estos ejemplos puedan ayudarlo a comenzar con algunas ideas geniales para el diseño de maquetas y wireframing.
