10 sitios haciendo navegación vertical 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 de pantalla ahora es posible que los sitios web usen menús de navegación vertical. 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 Petersham
Sobre el Nurses de Petersham sitio web encontrará una navegación vertical anidada. Esta técnica no es algo que encuentres 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 primeros dos enlaces abren submenús alineados al lado del menú principal. Estos toman el lugar de los menús desplegables que normalmente se ven 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 que funcionan mejor con una barra de navegación horizontal.
2. Restaurante Arbor
Otro ejemplo muy único es Restaurante Arbour 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 al lado de 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 cierto estilo a la navegación vertical que mantiene el impulso de la página con el contenido.
3. Smokey Bones
Smokey Bones tiene dos cosas a su favor: comida increíble y un sitio web asesino.
Cada página usa la navegación vertical larga fijada al 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 buena idea que funciona bien para un sitio de restaurante pequeño.
4. Mammoth Media
Cuando tienes menos contenido, puedes salirte con más opciones de navegación fuera de lo común. 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 característica desplegable oculta. Si hace clic en el enlace "trabajo" obtendrá 2 enlaces alternativos a los que puede hacer clic. Aparecen debajo del enlace principal, por lo que toman el rol 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 realmente puedes impulsar la creatividad.
5. Amazon
Todos y su abuela saben sobre Amazon. El minorista en línea tiene una selección increíble, pero también tienen un diseño de interfaz de usuario fantástico con enlaces de navegación vertical 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 hacinamiento en la página. Las navegaciones verticales simplemente tienen sentido, ya que pueden ocultarse a un lado sin dejar de ser totalmente accesibles.
Si está diseñando cualquier tipo similar de navegador de filtrado, definitivamente recomiendo estudiar la estrategia de Amazon. Han optimizado su sitio web sin fin, por lo que hay muchas razones para creer que sus enlaces de clasificación vertical funcionan bien.
6. Corum
Corum's El sitio web tiene otra navegación vertical limpia, con características muy simples. Enlaces de mayúsculas, texto oscuro, estilos de vuelo claro y un fuerte contraste contra 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 división fuerte 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 logotipo de Corum cerca de la parte superior.
Y los usuarios con capacidad de respuesta móvil en su lugar obtienen un menú desplegable que funciona bien como una alternativa para pantallas que son más largas que más amplias.
7. Bicis Nua
Una de las mejores formas de usar una navegación vertical es con un diseño de página único. Sitios informativos como Bicis 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 a su antojo usando animaciones y áreas de página personalizadas. En este caso, el navegador Nua Bikes combina con la página, ya que está directamente relacionado con 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 Michael Ngo portafolio .
Tiene una imagen de encabezado bastante cautivadora que atrapa inmediatamente su atención y lo atrae. Pero el contenido es la parte más interesante ya que funciona a través de 3 enlaces diferentes: hogar, 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 el navegador permanece fijo mientras se desplaza hacia abajo en la página. Esto mantiene todos los enlaces accesibles desde cualquier punto que sea crucial en un menú vertical más pequeño.
9. Medienstadt.koeln
El sitio alemán Medienstadt.koeln tiene una visión bastante diferente sobre 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 solo el típico navegador horizontal superior. Esto tiene sentido, pero puede ser 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 sea necesario.
De acuerdo hay debates sobre problemas de detectabilidad con menús de hamburguesas. Pero creo que este ícono 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 publicitaria 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. Los nuevos enlaces aparecen a un lado y se desvanecen 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 cualquier tamaño de pantalla.
La recapitulación
La navegación vertical funciona mejor en sitios que dependen de 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 en su diseño. Y espero que estos ejemplos te ayuden a comenzar con algunas ideas geniales para el diseño de wireframing y maquetas.