[#Design] Passos para criar um layout de blog: Navegação

Por Will, em ChocoDesign:

O post da semana passada foi sobre como fazer um bom Header. Hoje as dicas se concentrarão na navegação, já que, esta talvez seja umas das coisas mais importantes dentro de qualquer página.

Navegação

No livro “Não Me Faça Pensar“, do Steve Krug, ele diz o seguinte: “As pessoas não usarão seu Web site se não conseguirem andar por ele.” A navegação serve para auxiliar o seu visitante por onde ele deve começar seu caminho. No caso dos blogs o caminho é meio que automatizado, pois ele já sabe que para ver o conteúdo basta rolar o scrolling e o conteúdo vai aparecer. Mas, caso ele decida entrar em contato com você, ou procurar mais informações sobre o blog, é na barra de navegação que ele deverá encontrar tudo isso. Existem diversos tipos de navegação, a mais usual em blogs é a horizontal, situada abaixo do Header. Mas há quem prefira a navegação vertical junto à sidebar e há quem prefira outros tipos de navegação.

O que uma barra de navegação deve conter?

Existem três links indispensáveis para qualquer barra de navegação, são eles: home, contato e sobre. Muitos blogs adicionam também links para anunciar no blog, ou algum link para mostrar quem é o responsável pela página, mas os essenciais são aqueles três.

Ela também deve dar destaque ao link ativo, ou seja, o link que você clicou deverá ter algum tipo de mudança para mostrar que esta é a página que você está agora. Pode ser uma mudança de cor, de formato ou até de tamanho.

Horizontal

É a mais típica de todas, você encontra ela em praticamente 80% dos sites, inclusive aqui no blog. Elas são em linha reta e ficam ou no início da página ou após o Header. Já vi um blog que resolveu colocar a barra de navegação no fim da página, substituindo o rodapé, mas não recomendo esse tipo de abordagem, porque o usuário espera encontrá-la no topo, já é uma convenção, e convenções que dão certo não se mudam a não ser que tenha uma melhor.

Tecnoblog

A barra de navegação horizontal do Tecnoblog é após o Header e apresenta uma variação de cor para avisar que seu usuário está no Início. Corretíssimo!

Obvius

A navegação horizontal do blog Obvius não tem uma barra propriamente estabelecida, mas a sucessão de links formam uma barra imaginária. Ela também usa o destaque do link ativo para avisar seus usuários em que páginas eles estão, nesse caso há uma mudança de cor e forma. Super efetivo.

Vertical

Nos blogs não é muito comum encontrar esse tipo de navegação, mas ela pode ser usada tanto no lado esquerdo quanto no direito da página. Jovem Nerd

Esta é a navegação do blog Jovem Nerd. Eles optaram pela navegação vertical na direita, e também sub-seções visíveis, sem o drop-down, que ajudaria a economizar espaço neste caso. Como todos os links levam a outras janelas, não há necessidade de mostrar em que página o usuário está.

Drop-down

Este tipo de navegação é usado junto com a horizontal, para apresentar sub-seções do blog, caso ele contenha muitas páginas pertinentes em um mesmo grupo de assunto.

Smelly Cat

O blog Smelly Cat resolveu agrupar os links "Contato" e "Autores" junto com "Sobre", para isso utilizou a opção de drop-down. A vantagem dessa prática é que você pode usar vários sub-links e não perder espaço na sua barra de navegação. Só tome cuidado para não repetir links, como no caso dela. E quando for fazer menus drop-down, utilize uma seta apontando para baixo, assim as pessoas saberão que há mais links ali.

Papo de Bar

A navegação do Papo de Bar tem duas opções com drop-down. Notem que ele fez uso da seta apontando para baixo, para deixar claro que ali há sub-links. Ficou bom!

Ícones

Não é uma navegação facilmente encontrada, mas um bom exemplo é a navegação que temos aqui no blog, onde os ícones representam as categorias mais acessadas.

Aqui no blog nós usamos uma das navegações em forma de ícones. Não vou ser hipócrita e dizer que ela é ótima e eficaz, até porque sei dos defeitos dela e, por isso, quero que você não cometa os mesmos erros. Primeiro, tenha consciência de que ícones mal feitos geram N interpretações. Caso isso ocorra, coloque uma legenda pequena embaixo deles, facilita a vida de todos. Mantenha um padrão iconográfico condizente com o layout, vai ajudar na pregnância da identidade visual do blog.

Ainda há muitas dicas, mas não quero estender o post a ponto de ficar chato. Então, caso haja dúvidas, pergunte nos comentários ou envie um e-mail para will@chocoladesign.com.

Até semana que vem!