A Criativosfera será fechada dia 01 de Maio de 2017. Obrigado a todos!

Aula 04 – Seções de uma página web

Curso: Web Design Básico

Um site geralmente possui quatro elementos distintos: o cabeçalho, o menu, o conteúdo e o rodapé. E cada seção é geralmente populada por determinados itens. É importante entendermos o que cada um é, então vamos tratar de cada um individualmente.

Cabeçalho

Esse é o primeiro item que o usuário deve notar ao acessar um site, portanto é um dos mais importantes. É aqui que geralmente se inclui o logo para identificar a página e, pela ordem natural, deve estar sempre no topo da página.

Você pode conferir que 9 de 10 sites possuem o logo no canto superior esquerdo do site por ser o ponto de partida do nosso olho (lembre-se: na cultura ocidental, olhamos da esquerda pra direita, de cima para baixo) e isso não é a toa; se o usuário não puder identificar em qual site ele está, ele pode ter incerteza quanto a confiabilidade do conteúdo apresentado. Sem contar que, se você decidir incluir outro elemento nessa posição, pode gerar confusão ao leitor - uma vez vi um site que incluiu um banner de publicidade no local onde o logo deveria estar. O web designer provavelmente fez isto para enganar seus usuários a clicarem no banner, gerando uma renda maior, mas ele foi logo penalizado por isto. Canto superior esquerdo do seu layout = logo ou nome do site.

Existe uma única exceção: quando o logo é centralizado no cabeçalho. No entanto, é necessário notar que mesmo assim é preciso tomar cuidado para não incluir mais nada dos lados que vá tirar o foco do logo ou fazer o usuário se confundir.

Outra coisa importante a se fazer é deixar o logo com um link para a página inicial. Isto é um atalho bom especialmente para quem está perdido na página e é como uma forma de se re-encontrar novamente.

Agora que definimos a importância e obrigatoriedade do logo, podemos falar sobre outros elementos opcionais no cabeçalho. Um destes elementos é o slogan do site; um pequeno descritivo do conteúdo.

Em destaque, o slogan de um site (Fonte: Alex Poole)

Em destaque, o slogan de um site (Fonte: Alex Poole)

O slogan é particularmente útil para sites novos, menores ou com nomes que não são sinônimos do conteúdo que é abordado.

O cabeçalho também pode ter banners publicitários ao lado ou pouco abaixo do logo. Essa é uma posição de prestígio para anunciantes por estar numa área de alta visibilidade. Alguns designers também incluem uma caixa de busca ou links para redes sociais ou feed RSS. Isto tudo depende da necessidade e planejamento do layout, e é importante lembrar do espaço em branco: se você lotar seu cabeçalho de informações, seu design pode ficar com ar muito pesado.

Até alguns anos atrás, designers se importavam muito com a "dobra" - a região inicial de um site, aquela parte que será mostrada primeiro - e havia uma necessidade de chamar a atenção do usuário na primeira olhada da página, incluindo toda e qualquer informação relevante no topo. Isto até faria sentido na época onde a maioria dos computadores possuía uma resolução de tela de 1.024 x 768 pixels, mas com a enorme variedade de resoluções atuais (de monitores de 40+ polegadas até smartphones com 4 polegadas) já não é mais o caso e tentar enxotar muita informação no topo da página é contra-produtivo.

Menu

Navegar num site sem menu é muito difícil, com a exceção se for um site uma única página (talvez até duas). E é por isso que o menu possui o segundo lugar mais importante numa página web, geralmente não muito longe do cabeçalho.

Mas antes de tratar a posição do menu, precisamos descobrir quais serão os itens dele. É aqui que entra o mapa do site, um descritivo das páginas que o site terá. Isto ajuda a descobrir quantos itens teremos no menu, qual a posição deles e se algum terá sub-itens. Entre os itens mais comuns temos:

  • Inicial - Um link para a página inicial do site (duh!)
  • Sobre - Uma página que explica o que é o site (se for um site institucional, um breve histórico da empresa - ou se for de uma pessoa, uma breve biografia dela)
  • Contato - E-mail, telefone ou endereço para contato. Preferencialmente um formulário para facilitar.

Aí entramos nas páginas específicas de cada tipo de site. Se for um restaurante, talvez seja interessante adicionar uma página com o cardápio, uma que mostre "como chegar" e, se oferecer, um link para fazer o pedido online. Caso seja institucional, uma boa pedida é criar uma página com os serviços prestados. Lembre-se de consultar o seu briefing!

Um sub-item é necessário quando o site precisa ter uma distinção entre duas ou mais coisas, mas a distinção não é grande o suficiente para justificar itens separados no menu. Isso ocorre com produtos: caso a empresa ofereça mais de um produto, é interessante criar um item chamado "Produto" que, ao passar o mouse em cima, mostre os produtos individualmente abaixo. O mesmo vale para um blog, por exemplo, que possua várias categorias únicas de artigos mas que não são o suficiente para justificar um segundo menu.

Exemplo de sub-menu que aparece ao colocar o mouse sobre "Categorias" (Fonte: Design Blog)

Exemplo de sub-menu que aparece ao colocar o mouse sobre "Categorias" (Fonte: Design Blog)

Seu site não precisa se contentar com um só menu. Alguns sites - especialmente os que tem bastante conteúdo - geralmente necessitam de dois menus para poder ser acessível. Porém evite de colocar eles um abaixo do outro para não gerar confusão e deixe-os visivelmente diferentes no estilo. Também cuide para que o conteúdo de cada menu seja bem pensado: em um dos menus, coloque os links para os serviços básicos (página inicial, sobre, contato, etc) e no outro, os elementos mais específicos como as categorias de um blog.

Em destaque, os dois menus de um site. (Fonte: Smashing Magazine)

Em destaque, os dois menus de um site. (Fonte: Smashing Magazine)

Conteúdo

No mundo do desenvolvimento web, existe um certo ditado: "Conteúdo é rei". Isto significa que, mesmo se o design não for o mais elaborado do mundo, se o conteúdo é de supra qualidade ele receberá atenção. Mas nosso papel como designer é de procurar deixar a experiência mais confortável possível para que o usuário possa curtir melhor o conteúdo.

A área do conteúdo é onde fica as informações que o usuário procura. Textos, imagens, vídeos, tudo isto faz parte do conteúdo. Por consequência, essa deve ser a maior área útil do seu site e é aqui que vamos focar muito mais no uso da tipografia, cores e formas além de aplicar o que aprendemos sobre os princípios do design.

Nós já vimos sobre a tipografia aplicada na web na aula passada (e mais no curso de Design Intermediário), então vamos apenas recapitular brevemente:

  • Mantenha uma hierarquia - fontes maiores para chamadas principais, médias para sub-títulos e normal para texto corrido;
  • Use fontes seguras para texto corrido - a eficácia das fontes existentes é comprovada. Nada de letra cursiva para textos longos!
  • Consistência, consistência - não mude os tamanhos, cores e famílias de uma página para outra (ou até mesmo de uma seção para outra). Consistência gera familiaridade e segurança;
  • Contraste - uma tipografia azul num fundo vermelho pode parecer gerar muito contraste, mas é legível? Procure manter o tradicional escuro-no-claro;
  • Se existe em massa, funciona - como já ensinei, para "quebrar" os moldes do design, é necessário primeiro entender como estes moldes funcionam. No início da sua carreira, procure dominar o design comum, sem pirar demais.

Usando texto de preenchimento

Ao desenhar um site, muitos designers gostam de utilizar o "Lorem Ipsum" para preencher o conteúdo enquanto um redator prepara o conteúdo correto. Mas o que seria esse "lorem ipsum"? Você provavelmente já viu em algum lugar, especialmente em exemplos gráficos. Ele serve como um "texto de exemplo" (ou "texto de preenchimento") que visa demonstrar os elementos gráficos de um documento ou gráfico como fonte, cor e layout, removendo um conteúdo real que pode distrair o usuário.

O "lorem ipsum" contem partes do texto em latim "De finibus bonorum et malorum", uma obra do filosofo Cícero e serve apenas para demonstrar como uma peça gráfica ficaria com texto real. Ele é mais recomendado do que utilizar o "nononononono" para preencher conteúdo temporário, já que possui palavras com quantidade de caracteres variados, espaço, pontuação, e outros elementos que emulam textos em línguas ocidentais.

No entanto, alguns designers defendem que o uso do "lorem ipsum" como exemplo deve ser evitado. O designer Mamoru Miyagawa explica:

Ao contrário de sua função original, existem uma quantidade razoável de pessoas que na verdade se distraem e se confundem com o grande bloco massivo de texto não identificado

Independente do que você utilizar durante o processo de design apenas para ilustrar como ficará seu produto final, é importante usar um texto de exemplo ao apresentar o layout do seu cliente (mesmo se não faz parte do seu trabalho providenciar um texto real). Nos links da "Leitura adicional" abaixo colocarei alguns sites que geram esse texto de preenchimento, não só de "lorem ipsum".

Rodapé

Muito negligenciado por designers, o rodapé ainda é uma seção importante de uma página web.

Pode parecer que não, mas muitos usuários ainda procuram no rodapé por informações rápidas referentes a um site. Sites de comércio podem conter o endereço e horário de abertura e sites institucionais podem conter um telefone e/ou e-mail e horário de atendimento.

O rodapé ainda pode conter informações adicionais não-vitais a página, como um link para os termos de uso, o link para o desenvolvedor/designer da página, a repetição do menu para que o usuário não tenha que voltar ao topo para acessar ele, etc.

E só por que o rodapé fica no fim do site, não quer dizer que ele não deve receber uma atenção especial por parte do designer como você pode conferir nos exemplos abaixo:

Design de rodapé

Design de rodapé

Design de rodapé

Design de rodapé

O rodapé é bom lugar para brincar visualmente com o site, podendo ter uma clara demarcação do restante ou complementar o design do cabeçalho da página.

Concluíndo

Neste curso de Web Design Básico, vimos os elementos introdutórios do web design.

É importante sempre lembrar que os elementos e princípios básicos do design se aplicam também a web, por isso que o conteúdo aqui parece ter sido pouco (não vale a pena repetirmos tudo que já foi visto anteriormente).

No próximo curso de Web Design Intermediário vamos aprender a montar nosso primeiro site e Alunos Criativosfera terão exercícios para colocar em prática o desenvolvimento do seu portfólio.

Leitura adicional

Este conteúdo é exclusivo para os Alunos Criativosfera.

Nossos Alunos desfrutam de várias vantagens, como poder tirar dúvidas com o professor, download das aulas em formato de eBook, acesso a palestras exclusivas além de visualizar o conteúdo que está aqui. Além disto, os Alunos Criativosfera também ajudam a manter o site no ar, possibilitando disseminar o conhecimento.

Está esperando o que? Confira as vantagens e torne-se um Alunos Criativosfera hoje!

Até o próximo curso!

Certificado de participação

Se você é Aluno Criativosfera, efetue o login para poder imprimir seu certificado de participação deste curso. Caso você ainda não seja Aluno Criativosfera, considere cadastrar-se hoje para poder usufruir desta e várias outras vantagens!

« Anterior: Aula 03 – Tipografia na web    |    Próxima: Aula 01 – Mapa do site »

Professor

Canha - Fundador da Criativosfera, Sean "Canha" tem mais de 10 anos de experiência no mercado de design. Além de ser UX Designer, também é sócio do Choco La Design e fundador do antigo Design Blog. Você pode encontrá-lo no Facebook ou Twitter.

Alunos cadastrados podem tirar suas dúvidas com o professor. Cadastre-se hoje e aproveite as vantagens de ser um Aluno Criativosfera