Como a primeira coisa que os visitantes veem, as páginas iniciais e os cabeçalhos geralmente roubam os holofotes do design.

Mas o pensamento acima da dobra negligencia o fluxo natural do layout de página vertical. O que acontece quando as pessoas chegam ao final de uma página?

Você pode apostar que uma simples declaração de direitos autorais não prenderá a atenção dos visitantes, mas muitas páginas são projetadas com a expectativa de que as pessoas encontrem o seu caminho ... ou então assumimos.

A parte inferior de uma página não é o fim de um site. Um rodapé informativo e convincente é o lugar natural para levar as pessoas a mais informações dentro do site, em vez de vagar sem rumo.

Leia mais sobre as tendências e inovações que acompanham o conteúdo da página e responda à pergunta não formulada, de onde a partir daqui?

O problema contínuo de como prender a atenção das pessoas pode ser tratado de várias maneiras: gráficos impressionantes, uso inteligente de espaço negativo, tipografia rápida e texto bem escrito.

Mas muitas vezes as pessoas ficam penduradas quando rolam para o final da página. Eles devem rolar de volta? Visite outro site? Feche a aba?

Onde o conteúdo do corpo termina, o rodapé assume o controle.

diagrama mostrando como a atenção dos leitores naturalmente se desvia para o rodapé

O rodapé é uma coleção distinta de conteúdo que conclui todas as páginas de um site. Normalmente, ele contém uma declaração de direitos autorais, um link para a página inicial e um link de e-mail ou um link para a página de contato.

Rodapés quase sempre abrangem a largura da página . Além disso, eles exibem uma variedade de estilos.

Mesmo que não ofereça muitos links, Dishizzle torna difícil perder os ícones grandes na parte inferior do site. Com a caixa de pesquisa e o tipo amigável, esse rodapé é legível e útil.

screenshot do rodapé da dishizzle

Compare com o rodapé em 43 pastas , que leva a abordagem oposta. Um punhado de frases concisas explica o objetivo do site, descreve seu proprietário e links para seu host. Após uma declaração completa de direitos autorais, a página termina.

captura de tela do rodapé da pasta 43

Às vezes os rodapés simplesmente repetem a barra de navegação. É um ajuste natural: uma vez que o leitor leu ou folheou a página, eles encontraram uma lista de links interessantes para outras páginas, em vez de ficarem vagando.

Mas esses links são muitas vezes apenas isso: pedaços de texto clicável dispostos em uma faixa fina e subdesenvolvida. Embora isso possa funcionar para sites com pouco conteúdo, um site sério não está completo sem um rodapé bem planejado.

Um rodapé não é apenas um apêndice. É um bom anfitrião .

Comissários Desconhecidos

O fundo pode parecer um lugar improvável para colocar informações vitais, mas os rodapés são o local ideal para navegação e características importantes, porque os visitantes movem-se naturalmente nessa direção à medida que rolam para baixo.

Como um bom anfitrião, um rodapé elaborado apresenta diferentes tipos de informação que refletem a natureza e o conteúdo do site.

Um rodapé pode desempenhar muitos papéis em um site. O truque é decidir para onde os convidados devem ir quando tiverem uma página. Um bom anfitrião permite que seus convidados se divirtam e entrem em ação somente quando os convidados começam a se perguntar “o que vem a seguir?”

Rodapés como mapas do site

Enquanto o cabeçalho apresenta links para as principais seções do site, o rodapé pode aprofundar os detalhes. Os rodapés baseados em mapas de sites, ideais para sites que armazenam conteúdo em várias seções e subseções, refletem a escala e as preocupações de um website.

A casa branca é um bom exemplo. Seu rodapé apresenta o site como seis seções, cada uma com apenas 6 e 23 links.

Deliberadamente simples, os links de palavras-chave podem ser absorvidos rapidamente pelos hóspedes que procuram por tópicos de interesse. Quase tão alto quanto largo, o rodapé é difícil de perder, mas seu conteúdo não compete com a página acima.

screenshot do rodapé da casa branca


Rodapés como anúncios

Especialmente se o site vende algo - um produto, serviço ou associação - o rodapé é uma segunda chance para incitar os visitantes a agir. O final da página é um ótimo lugar para lembrar os benefícios do produto ou serviço oferecido. Repetir essa mesma mensagem em todas as páginas direciona o ponto para casa.

Chimpanzé de correio aproveita esse espaço para repetir seu discurso de vendas: 1) modelos gratuitos, 2) uma comparação de seus serviços com os concorrentes e 3) preços flexíveis.

captura de tela do rodapé do chimp mail

Expression Engine lista algumas dessas coisas também e também links para a seção de ajuda e outras informações que os possíveis clientes desejariam.

captura de tela do rodapé do mecanismo de expressão

Ao contrário dos mapas simples, os rodapés que anunciam devem ser mais persuasivos do que informativos. Eles devem incentivar os clientes a comprar e levar a páginas que lhes permitam agir.


Rodapés como Estudos de Personagem

Enquanto um site pessoal aborda tópicos que interessam a seu proprietário, o rodapé pode descrever a pessoa por trás dele. Cujo site é isso? O que ele ou ela gosta? O que mais eles fazem?

Poucos sites fazem isso melhor do que o de designer gráfico Jason Santa Maria , cujo rodapé poderia ser uma página em si mesmo.

screenshot do rodapé do Jason Santa Maria

Enquanto isso, o rodapé de especialista em padrões Jeffery Zeldman's contém visuais - e até fotográficos - fragmentos de projetos nos quais ele está envolvido ou com interesse.

tela do rodapé de Jeffrey Zeldman


Rodapé como Colofon

Um rodapé pode conter informações sobre como ou por que o site foi criado. Poderia:

  • Reiterar a missão ou slogan do site.
  • Diga qual CMS ou ISP está sendo usado.
  • Declare que a página tem HTML (CSS) válido e CSS e está em conformidade com certos padrões de acessibilidade.

Variação Baseada no Contexto

O rodapé geralmente deve permanecer consistente em todo o site. Informações específicas da página geralmente não são garantidas. Mas sites complicados podem distorcer as regras.

Os ícones brincalhões na Site da IBM fornecer uma maneira mais amigável e menos corporativa de navegar pelas páginas. Mas esses ícones aparecem apenas na seção “Smarter Planet”.

captura de tela do rodapé do planeta mais inteligente da ibm

O rodapé regular da IBM é assim:

captura de tela do rodapé padrão do ibm

Da mesma forma, os links em Rodapé baseado no mapa de sites da Apple varia de acordo com a seção em que aparece.

captura de tela do rodapé do Mac da Apple

Acima, o rodapé na seção Mac. Abaixo, aquele para iPods.

captura de tela do rodapé do iPod da Apple

Nenhum desses papéis é exclusivo. Rodapés elaborados podem incorporar mapas do site, destaques, atualizações, credenciais, ferramentas de pesquisa e muito mais. Abaixo, BustedTees oferece maneiras de se manter atualizado, navegar e enviar comentários.

captura de tela do rodapé do tee rebentado

Funcional nem sempre se traduz em convincente. CNN O rodapé inclui uma ferramenta de pesquisa, clima local, um mapa do site, legalês e links para seu conteúdo em outros idiomas. Útil, mas seco. O elemento visual mais interessante é a faixa vermelha.

captura de tela do rodapé da CNN

Embora se encaixe no tom do site, o rodapé da CNN é meramente projetado para não competir com a página acima.

Como criar um rodapé útil

Geralmente, uma página da web convida as pessoas a agir ou aprender. Depois de ler um artigo de notícias ou post de blog, as pessoas saem com uma nova ideia ou um conjunto de fatos. As páginas de produtos informam os visitantes sobre os itens que estão sendo vendidos. Páginas com informações sobre o tempo afetam como as pessoas se vestem. Em cada caso, uma pessoa mudou de alguma forma no momento em que chegou ao final da página. E lá eles encontram o rodapé.

Assim, o final da página é um lugar natural para colocar duas coisas: ferramentas pelas quais os visitantes podem agir de acordo com o que acabaram de aprender; e apela à ação.

Rodapés têm um trabalho difícil. As pessoas os ignoram por hábito; Eles instintivamente rolar para o topo ou clique fora. É por isso que bons rodapés devem ser projetados não como reflexos posteriores, mas como se fossem páginas em si.

Criar um rodapé útil começa com algumas perguntas:

  • Qual conteúdo do meu site eu quero enfatizar?
    Um bom rodapé guia os visitantes para essas páginas.
  • O que mais interessaria aos visitantes?
    Um bom rodapé atrai os visitantes com informações que eles gostariam. Os visitantes que percorrem todo o caminho até o final provavelmente foram envolvidos pelo conteúdo da página. Links para informações relacionadas os manterão no site.
  • Qual conteúdo beneficiaria mais os visitantes?
    Como um bom anfitrião, seu trabalho é ser útil. O rodapé premia os convidados por chegarem ao final da página com, se possível, brindes ou entretenimento ou, melhor ainda, informações frequentemente solicitadas. Se o site for para um negócio de tijolo e argamassa, o rodapé poderá conter um mapa simples para o local.
  • O que resumiria o caráter e o estilo do site?
    Como uma boa conclusão, o rodapé resume a natureza do site: seu tema, atitude e tema. Desta forma, o rodapé é semelhante ao cabeçalho, que introduz o site para os recém-chegados.

Vendedor de camisetas Sem linha responde a muitas perguntas em seu rodapé rico em palavras-chave:

diagrama de perguntas e respostas em threadless

Depois de decidir o que colocar no seu rodapé, não negligencie a apresentação.

  • Faça isso grande.
    Um rodapé simbólico é fino, alto o suficiente para permitir uma linha de texto. Um rodapé que chama a atenção é substancial. Uma regra básica é tornar a altura do rodapé pelo menos um quarto de sua largura. Por exemplo, se a página tiver 960 pixels de largura, o rodapé deverá ter pelo menos 240 pixels de altura.
  • Separe-o
    Dê ao rodapé um limite distinto e verifique se ele cobre a largura da página. Os hóspedes devem ver onde o corpo termina e o rodapé começa.
  • Dê estilo a ele.
    Um rodapé deve conter o tema do site, em estilo, esquema de cores e tipografia. Se possível, ele deve reutilizar elementos visuais de outras partes do site. Mas isso não deve prejudicar o conteúdo da página.
  • Faça valer a pena.
    O rodapé ideal é forte o suficiente para garantir a atenção do visitante. Ele oferece conteúdo interessante para folhear em um pacote atraente - como qualquer página importante.

O guardião não tem medo de jogar o seu rodapé. Gráficos atraentes colocados entre as barras de cores que combinam com a marca dizem aos visitantes que isso é conteúdo , não apenas boa impressão.

captura de tela o rodapé do guardião

Silverback tem poucos recursos em seu rodapé, mas muito estilo. Ele oferece uma experiência de fácil leitura que reafirma o propósito do site e incentiva os visitantes a receber atualizações por meio de seu boletim informativo.

screenshot rodapé do silverback

Enquanto Travelocity pacotes de 72 links em seu rodapé, a falta de hierarquia visual ou layout claro torna difícil levar a sério. Mais nem sempre significa melhor.

screenshot rodapé da travelocity

Todos esses critérios podem parecer altos, mas há duas abordagens fáceis para criar um bom rodapé.


Abordagem nº 1: criar uma home page em miniatura

A maneira mais fácil de criar um rodapé útil é recapitular a finalidade e os destaques do site. Olhe para a sua home page para se inspirar.

Normalmente, a home page é um cruzamento entre um índice e um marcador de notícias, oferecendo aos hóspedes uma visão geral do site e as informações mais recentes.

Um rodapé não precisa incluir todos os elementos da home page. Se a home page apresentar 10 produtos mais vendidos e os 3 posts mais recentes, o rodapé pode destacar os 5 principais produtos e 1 postagem, com links para mais de cada um. Uma versão menor do logotipo do site também seria apropriada.

Pense no rodapé como um índice que aparece convenientemente quando os visitantes mais precisam: quando estão se perguntando o que vem a seguir.

MacTalk Australia tem um cabeçalho relativamente pequeno, o que deixa mais espaço para conteúdo e publicidade acima da dobra. Quase duas vezes mais alto que o cabeçalho, o rodapé rico em conteúdo expande-se na navegação e na introdução do cabeçalho simples, explicando a quantidade de conteúdo que cada categoria possui e quais as tags mais populares. Tanto o cabeçalho quanto o rodapé têm ícones RSS e Twitter, e o rodapé inclui um formulário de inscrição no boletim informativo - mais dois outros links RSS e Twitter logo abaixo da declaração de direitos autorais.

diagrama mostrando elementos comuns no cabeçalho e no rodapé do Mac Talk

O jornal New York Times rodapé inclui as últimas manchetes e fotos de várias seções.

captura de tela do rodapé do New York Time


Abordagem nº 2: fornecer conteúdo suplementar

Rodapés podem fazer o oposto de servir como uma home page em miniatura, oferecendo conteúdo não encontrado em nenhum outro lugar no site.

Bits de conteúdo suplementar que não podem preencher páginas por conta própria podem encontrar uma casa no rodapé. Ao contrário da home page em miniatura, um rodapé suplementar pode conter links para outros sites, desde que sejam informativos ou benéficos para o hóspede.

Mas não trate o rodapé como uma lixeira para coisas que não se encaixam em nenhum outro lugar. Como qualquer página apropriada, um rodapé deve informar, persuadir, entreter ou fazer todos os três. A chave é encontrar informações que apóiem ​​o tema geral do site, e não uma página específica.

Komodo Media O rodapé inclui links atraentes para o que o proprietário está ouvindo na Last.fm.

screenshot do rodapé do Komodo Media

Alguns sites, como Veer , aponte para sua família de sites. As corporações podem promover suas marcas simplesmente cruzando-as entre si.

captura de tela do rodapé do veado


Outras abordagens

Se o seu site tiver uma barra lateral substancial, tente reorganizá-lo como um rodapé. Embora isso altere drasticamente o layout do site, a movimentação de informações secundárias para a parte inferior da página pode remover distrações das informações primárias.

diagrama mostrando como alterar uma barra lateral em um rodapé

No seu caminho

A regra de ouro dos rodapés nunca é deixar os convidados em seus próprios dispositivos .

Rodapés são hosts que apresentam seus convidados com opções. Eles são trampolins naturais em todo o site, incentivando os convidados a clicar em outras páginas ou sites relacionados.

Você pode aprender muito sobre as prioridades de um site a partir do conteúdo do rodapé. O que há no seu rodapé agora? Você tem um, certo? Porque um site sem um rodapé é pior do que um artigo sem um


Escrito exclusivamente para o Webdesigner Depot de Ben Gremillion . Ben é um web designer freelancer que resolve problemas de comunicação com melhor design.