12 exemplos de navegação vertical da Divi

Ao criar um site da Web, há muitas coisas diferentes a serem consideradas. Geralmente, começa com a aparência que você deseja do layout geral do seu site. Você deseja que ele corresponda ao conteúdo do seu site para fortalecer a mensagem que você está tentando enviar.

Um dos fatores que desempenham um papel importante em como seu site influenciará o comportamento dos visitantes é o menu principal. Com o Divi, existem inúmeras possibilidades que permitem a você estilizar seu menu de uma forma bonita que combina com o resto do seu site e ajuda a orientar seus visitantes através do seu site.

Uma dessas possibilidades é usar uma navegação vertical em vez do menu superior. Embora a navegação vertical não seja usada com frequência, ela pode fornecer resultados impressionantes se for bem pensada e se corresponder ao resto do seu site. Assim como o menu superior, o menu vertical acompanha os visitantes durante toda a sua permanência no site.

Para inspirar você, escolhemos 12 sites que usam a navegação vertical para otimizar a experiência do visitante, melhorando a maneira como eles navegam pelo site.

1. Master en Diseno de Interiores

Master en Diseno de Interiores é um site impressionante que trata de design de interiores. Na imagem acima, você pode ver como eles usaram o menu vertical para dar aquele toque extra legal ao seu site.

As cores que estão a ser utilizadas no site são muito neutras, o que confere um toque e um toque moderno ao site e também à empresa ou marca em questão.

A navegação vertical não é exceção. As cores que estão sendo utilizadas são muito sutis e não incomodam os olhos durante a leitura.

2. Modelo em cima

Model On Top é um site de gerenciamento de modelos. Este site, criado em conjunto com a Divi, permitiu que uma certa harmonia se unisse e mostrasse a profissionalidade e expertise que desejam vincular à sua empresa.

Além de ter uma navegação vertical muito boa que contém todos os elementos necessários, como um logotipo, as páginas e uma barra de pesquisa, eles também criaram esse engajamento usando um fundo de vídeo logo no início de seu site.

A navegação vertical não precisou de muito design especial, eles decidiram mantê-la limpa e deixar os visuais em todo o resto da página fazerem o trabalho.

3. Escola de Cinema Art-On-The-Run de Berlim

Art-On-The-Run Filmschool Berlin representou perfeitamente o lado artístico que uma escola de cinema precisa em seu site. A navegação vertical tem um propósito especial em todo o quadro.

Eles usaram deliberadamente uma navegação vertical para aproveitar os benefícios de fazer o menu parecer uma espécie de 'lista'. Eles usaram uma numeração que está de acordo com o tema do site. A numeração poderia, além das páginas, ser facilmente interpretada como cenários ou episódios.

A combinação das páginas e do logotipo que está sendo mostrado dá um certo senso de simplicidade e estrutura. Eles também representaram recursos visuais que estão em linha com o que seu site trata.

4. Alex Brands

As marcas Alex é um site de comércio eletrônico da Divi que vende todos os tipos de coisas para crianças; de artes e ofícios a móveis e jogos. O site mostra imediatamente o tipo de sentimento que desejam representar; lúdico e convidativo.

A navegação vertical também foi, neste caso, escolhida deliberadamente. Existem muitas páginas diferentes, se eles tivessem optado por um menu superior, a estrutura seria perdida e não haveria espaço suficiente.

5. Fotos Devlin

Delvin Photos é provavelmente o site mais elegante de todos os mencionados neste artigo. Delvin Photos usa seu site para exibir todos os seus trabalhos de uma forma original e envolvente para atrair novos clientes para os serviços que oferecem.

Eles usaram a navegação vertical para enfatizar a elegância que estão usando em todo o resto do site e incluindo ícones de mídia social em seu menu principal; eles também garantem que as pessoas possam acessar os canais de mídia social a qualquer momento durante sua permanência no site.

6. Maquiagem de sarau

Soiree Makeup é um site que gira em torno de maquiagem. O site é feito especificamente para oferecer os serviços de maquiagem de uma maquiadora. O site mostra de imediato a simplicidade e elegância que se espera de todo maquiador. Não é muita extravagância, mas bonito de se olhar.

O site, em geral, não ocupa a tela inteira, o que torna o conteúdo mais concentrado. Na navegação vertical, a maior parte das atenções vai para o logotipo e para a caixa de contato.

Incluir uma caixa de contato na navegação vertical permite que o maquiador enfatize a finalidade mais importante do site; obtendo novos leads, novos clientes e novas reservas.

7. Fotografia de Nathan Welton

Nathan Welton Photography é o segundo site de fotografia que selecionamos para esta postagem. Usar a navegação vertical para um site de fotografia é muito mais comum do que para outros sites. Geralmente, isso ocorre porque as fotos no site falam por si.

Proprietários de sites de sites de fotografia usam uma navegação vertical simples para manter o foco nas imagens por ter um menu que é fácil de usar e não distrai.

As imagens que Nathan Welton usou em seu site são exatamente isso; eles estão cheios de aventura e contam sua própria história. A navegação vertical existe apenas para fins práticos e não interrompe a página como um menu superior faria.

8. Fotografia Lilly

Lilly Photography é o último site de fotografia que escolhemos para este post. A grande vantagem deste site é que ele usa uma galeria na página inicial.

A galeria mostra trabalhos que foram feitos no passado para criar uma certa sensação de experiência. Porque no final; as pessoas procuram um fotógrafo que tire fotos de acordo com o que elas esperam.

A navegação vertical é semelhante à navegação vertical usada por Nathan Welton; simplista, mas fazendo o trabalho.

9. Filme Pittsburgh

Film Pittsburgh é uma organização apresentadora de filmes. Uma das coisas boas que fizeram foi criar um segundo menu no topo da página que permite aos visitantes obter informações práticas.

A navegação vertical, pelo contrário, é bastante informativa, mas ajuda os visitantes a compreenderem a sua história e missão, conduzindo-os às páginas certas. Dividir as páginas práticas e as narrativas umas das outras capacita a narração de histórias no menu principal.

Além de usar a navegação vertical, o Film Pittsburgh também não utilizou todo o tamanho da tela, o que os deixou com espaço para realçar seu design com uma imagem de fundo relevante.

10. BlendLove

BlendLove é uma loja de alimentos localizada na Austrália. Eles construíram um site para informar seus clientes sobre todas as informações práticas que eles precisam saber.

Um dos extras interessantes que eles fornecem em seu site é a oportunidade de comprar um e-book cheio dos alimentos saudáveis ​​que eles fazem. É uma ótima maneira de se envolver com os clientes, saber quem eles são e até mesmo lucrar.

O próprio site tem uma paleta de cores em tons escuros que cria um bom contraste com o logotipo que eles têm. Eles se certificaram de que as cores eram consistentes em todo o site, também na navegação vertical. Garantir a consistência é importante porque a navegação vertical ocupa uma parte relativamente grande da tela, enquanto um menu superior geralmente não é tão perceptível.

11. Bon Appetit

Bon Appetit é um site belga focado em dar workshops que envolvem muitos sabores e aromas. Os exemplos anteriores e este exemplo diferem em uma coisa com certeza; o site da Bon Appetit é mais focado no conteúdo escrito que fornece do que na visualidade.

O menu vertical foi dividido em 3 tipos de peças; o logotipo, as páginas e serviços extras, como atendimento ao cliente e frete. A diferença de estilo entre as páginas e os serviços extras dá uma sensação e toque extra organizado ao site.

12. Comer restaurante tailandês

Eat Thai Restaurant é o último exemplo deste post. É um restaurante móvel de propriedade local que vai direto ao ponto. Seu site não possui várias páginas. Em vez disso, pegaram uma página e se concentraram no que é mais importante; a comida. O site é usado para redirecionar as pessoas que desejam fazer pedidos para um site de pedidos.

A coisa boa sobre a navegação vertical usada neste exemplo é que ela realmente não está lá para navegar, mas mais para informar. A navegação vertical acompanha o visitante durante toda a sua permanência no site, o que significa que a informação também. Eles forneceram todas as informações relevantes no menu, junto com os ícones sociais e um CTA 'Peça agora'.

Pensamentos finais

Esperamos que este post lhe dê muita inspiração que o ajude a pensar em ótimos conceitos para os sites atuais que você tem ou para os futuros sites que está criando. Se você tem alguma sugestão ou comentário; sinta-se à vontade para deixar um comentário na seção de comentários abaixo! E enquanto você estiver lá, deixe-nos saber; para que tipo de site você usaria a navegação vertical?

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por LuckyDesigner / shutterstock.com