10 sites fazendo direito de navegação vertical
A maioria dos menus de navegação da Web flui horizontalmente pela página. Isso vem de uma história de monitores tradicionais sendo mais largos do que mais altos.
Mas com tanto espaço na tela, agora é possível que os sites usem menus de navegação vertical. E muitos deles parecem fantásticos.
Estes 10 exemplos de menus verticais são perfeitos para estudar para o estilo de design exclusivo e usabilidade distinta.
1. Viveiros de Petersham
No Viveiros Petersham site você encontrará uma navegação vertical aninhada. Essa técnica não é algo que você encontrará com muita frequência, mas funciona bem neste site.
Cada link de navegação principal usa um ícone em segundo plano para transmitir os links visualmente. E os dois primeiros links abrem sub-menus alinhados ao lado do menu principal. Estes tomam o lugar de dropdowns que você normalmente vê nos menus horizontais.
Este site é responsivo, portanto, em tamanhos menores, esses links desaparecem atrás de um menu de hambúrguer. Isso cria uma divisão razoável entre usuários de desktop com espaço suficiente para links verticais e usuários móveis que se saem melhor com uma barra de navegação horizontal.
2. Restaurante Arbor
Outro exemplo muito original é Restaurante Arbor que tem uma nav vertical limpa com muito espaço entre os links. O conteúdo aparece em um contêiner deslizante que também se alinha verticalmente ao lado da navegação.
Este estilo de conteúdo é bem único. A maioria dos sites de navegação vertical mantém seu conteúdo alinhado com a página principal, mas neste caso você pode mostrar / ocultar o conteúdo com facilidade. Adiciona um certo toque na navegação vertical, que mantém o ímpeto da página fluindo para baixo com o conteúdo.
3. Ossos Smokey
Ossos de Smokey tem duas coisas para isso: comida incrível e um site assassino.
Cada página usa a longa navegação vertical fixada no lado esquerdo. Este é um grampo para a maioria dos sites, porque a maioria dos leitores ocidentais consomem conteúdo da esquerda para a direita, e o canto superior esquerdo é o local tradicional para um logotipo do site.
Um recurso adicional que eu gosto é o menu flyout listando todos os pratos do restaurante. Se você clicar no link "menu", verá como isso também funciona como um submenu adicionado verticalmente. Definitivamente uma idéia legal que funciona bem para um pequeno site de restaurante.
4. Mamute Mídia
Quando você tem menos conteúdo, você pode se safar com opções de navegação mais fora do comum. Mamute Mídia é um bom exemplo que tem apenas cinco páginas principais em seu site e um blog.
Uma faceta específica dessa navegação é o recurso suspenso oculto. Se você clicar no link “trabalho”, você terá 2 links alternativos pelos quais você pode clicar. Eles aparecem abaixo do link principal para assumir o papel de um menu suspenso menor.
Mesmo no celular, esta navegação segue um estilo similar. É a prova de que quando você não tem muitos links, você pode realmente estimular a criatividade.
5. Amazônia
Todos e sua avó sabem sobre a Amazônia. O varejista on-line tem uma seleção incrível, mas eles também têm um design de interface do usuário fantástico com links de navegação vertical nas páginas de pesquisa de produtos.
A Amazon tem dezenas de categorias para cada termo de pesquisa. Isso significa que eles precisam apresentar recursos de pesquisa refinados sem sobrecarregar a página. Navegações verticais só fazem sentido porque podem se esconder para o lado enquanto ainda estão totalmente acessíveis.
Se você está projetando qualquer tipo similar de filtragem nav, eu definitivamente recomendo estudar a estratégia da Amazon. Eles otimizaram seu site de forma ilimitada, por isso há muitos motivos para acreditar que seus links de classificação vertical funcionam bem.
6. Corum
Corum’s website tem outra navegação vertical limpa, com recursos muito simples. Links all-caps, texto escuro, estilos claros e um forte contraste com a página principal.
Este é um dos maiores aspectos ao projetar a navegação vertical. Você normalmente deseja criar uma divisão forte entre a barra de navegação vertical e o conteúdo da página. Neste caso, é feito usando uma cor de fundo mais clara com o logotipo da Corum próximo ao topo.
E os usuários responsivos móveis, em vez disso, recebem um menu suspenso que funciona bem como uma alternativa para telas mais longas do que as mais largas.
7. Bicicletas Nua
Uma das melhores maneiras de usar uma navegação vertical é com um layout de página única. Sites informativos como Bicicletas Nua nem sempre precisamos de dezenas de páginas cheias de conteúdo.
Assim, com um menu de navegação vertical, é muito mais fácil navegar pelo conteúdo por um capricho usando animações e áreas de páginas personalizadas. Nesse caso, a navegação do Nua Bikes se mescla à página, pois está diretamente ligada a todo o conteúdo dessa página.
8. Michael Ngo
Outro site que segue a tendência de navegação vertical de página única é Portfólio de Michael Ngo .
Ele tem uma imagem de cabeçalho bastante cativante que imediatamente agarra sua atenção e atrai você. Mas o conteúdo é a parte mais interessante, pois tudo funciona através de três links diferentes: casa, trabalho e contato.
Os links de navegação também têm suas próprias legendas, para que você possa ver o que eles fazem mesmo de relance.
Uma coisa a notar é como a nav fica fixa ao rolar a página. Isso mantém todos os links acessíveis de qualquer ponto, o que é crucial em um menu vertical menor.
9. Medienstadt.koeln
O site alemão Medienstadt.koeln tem uma visão bastante diferente da navegação vertical. Sua nav permanece escondida atrás de um cardápio de hambúrgueres o tempo todo, mas ainda se estende por toda a altura da tela.
Também inclui mais links do que apenas a típica navegação horizontal superior. Isso faz sentido, mas pode ser confuso para alguns visitantes.
O que eu mais gosto sobre o estilo vertical é como ele fica escondido mesmo nos desktops até que seja necessário.
Concedido há debates sobre problemas de descoberta com menus de hambúrguer. Mas acho que esse ícone está se tornando rapidamente reconhecido e esse design é um excelente exemplo de uma navegação vertical oculta em ação.
10. O Sistema Metrick
A agência de publicidade Sistema Metrick mantém sua navegação simples e direta ao ponto. Ele segue o estilo vertical, mas também é muito diferente de todos os outros neste post.
Eu gosto do menu suspenso oculto que mostra apenas links extras quando um link principal é clicado. Seu link de "diário" é um bom exemplo. Novos links aparecem ao lado e eles desaparecem com um único clique.
Os usuários de dispositivos móveis obtêm uma experiência semelhante, exceto que esses links de submenu aparecem abaixo do link principal. Mas este nav é tão pequeno que pode funcionar para praticamente todos os tamanhos de tela.
O embrulho
A navegação vertical funciona melhor em sites que dependem de espaço extra na tela. Estes geralmente incluem sites de portfólio, restaurantes, pequenas empresas e lojas de comércio eletrônico.
Mas, independentemente do site, você pode sempre tentar adicionar uma navegação vertical ao seu design. E espero que esses exemplos possam dar início a algumas ótimas ideias para wireframes e designs de maquetes.