Como Criar Um Layout Para Site De Fazer Inveja

O layout ou design da página web, é composto por todos os elementos que o visitante vê quando entra no site: disposição, formas, cores, fontes, etc. E, como sabe, a imagem da sua empresa é o primeiro elemento que o vai ajudar na venda dos seus produtos/serviços. Assim, antes de esboçar o layout do seu site, precisa de entender que além de transmitir segurança e profissionalismo, o layout deve ser capaz de comunicar e agradar ao seu público. O site da sua empresa é mais uma ferramenta de marketing, capaz de impulsionar as vendas. Logo, ter um layout atraente já não é uma opção. É uma obrigação.

Tipos de layout

Costumam-se enumerar quatro tipos de layout: fixo, fluido, adaptativo e responsivo. Cada um possui características e formas de desenvolvimento diferente, além de vantagens e desvantagens que deve ter em conta. Conheça-os e escolha o melhor para o seu site.

Layout fixo

O layout fixo tem um tamanho definido pelo web designer. Esse tamanho mantém-se independente do equipamento que a pessoa usa para aceder ao seu site: computador, tablet ou smartphone. O tamanho mais importante no layout fixo é a largura da página, porque estamos mais habituados a percorrer a página de cima para baixo do que da esquerda para a direita.

Um layout fixo tem a vantagem de ter a mesma aparência independente da resolução de ecrã do utilizador. A par, a largura das linhas não é alterada independente do tamanho do navegador ou resolução do equipamento, facilitando assim a leitura.

Outra vantagem é que desenvolver um layout com largura fixa é mais fácil, na medida em que as preocupações com adaptações a mudanças para diferentes resoluções são menores. Porém… os layouts fixos também podem causar problemas, especialmente em monitores com resoluções muito baixas ou muito altas, ou seja, em resoluções baixas onde a largura do ecrã é menor que a do site, a página pode acabar por aparecer com uma navegação horizontal, dificultando a leitura. Em resoluções grandes, o site pode parecer ter muito espaço vazio nas laterais devido a um excesso de espaço em branco, sendo que neste caso a necessidade de percorrer a página na vertical é maior do que o necessário. Além disso, este layout não responde bem a alterações do tamanho de fontes por parte dos utilizadores, quebrando o layout.

Layout fluido

O layout fluido faz com que o conteúdo ocupe todo o ecrã, independentemente da sua resolução. Isto permite ao designer mostrar mais conteúdo em monitores maiores e manter-se visível em ecrãs mais pequenos. O layout líquido também fornece uma consistência em larguras relativas, permitindo que a página responda de forma mais dinâmica quando o utilizador altera o tamanho das fontes. O objetivo deste tipo de layout é manter o mesmo peso espacial em todos os elementos: ocupa todo o espaço, independente da forma.

O layout fluido tem também as suas desvantagens, nomeadamente o facto de ser mais difícil de controlar (por ter tamanhos variáveis dependendo de cada ecrã), as colunas de texto podem ficar largas demais dificultando a leitura quando a resolução é muito grande e/ou o utilizador usa o navegador em ecrã cheio. É também possível que haja problemas com elementos de largura fixa (como imagens) dentro de uma coluna fluida: se a coluna ficar mais pequena que a imagem, alguns navegadores podem aumentar a largura da mesma sem considerar as limitações impostas pelo designer, quebrando o layout. Por outro lado, outros navegadores podem sobrepor o texto com a imagem para tentar manter as percentagens corretas.

Layout adaptativo

O layout adaptativo é alterado de acordo com cada resolução. É como se tivesse várias páginas estáticas para equipamentos diferentes, mas com apenas uma página de conteúdo. Isto é feito através do CSS, uma página com as regras de design independente da página do conteúdo. No layout adaptativo, é necessário ter várias páginas de CSS para resoluções diferentes. A vantagem deste layout é que a experiência do utilizador pode ser adaptada de acordo com cada equipamento de onde acede ao site, sem ter de mexer no conteúdo. No entanto, o tempo necessário para criar um site com layout adaptativo é grande e é necessário ser testado manualmente em todos os dispositivos possíveis. Desta forma, é muito difícil manter um controle da resolução de ecrã (já sem falar de desenvolvimento) de todos os dispositivos existentes no mercado.

Layout responsivo ou Responsive Web Design

Chegámos ao mais popular e aplaudido dos layouts: o responsivo. É o menino dos olhos dos web designers porque facilita na hora de visualizar em equipamentos de diferentes tamanhos de ecrã. Aqui a página é reajustada quando a resolução é reduzida, mas quando o ecrã se torna pequeno demais para que o conteúdo seja mostrado corretamente, arranja o conteúdo para caber num layout mais adequado. Isto quer dizer que o design não é adaptado para equipamentos específicos, o layout é que é adaptado para o conteúdo, ou seja, o design é otimizado para todos os dispositivos. Com este layout todas as imagens, fontes e qualquer outro elemento HTML serão redimensionados de acordo com o ecrã, aproveitando ao máximo o seu espaço útil. O layout responsivo é diferente do layout adaptativo porque não é necessário programar o site para funcionar em cada resolução existente. E é diferente do layout líquido por levar em linha de conta todos os objetos de uma página e não só o texto. Mesmo assim ainda exibe desvantagens. Uma delas é um trabalho mais moroso durante o processo inicial de design, pois o layout precisa ser desenhado pensando em como vai agir em resoluções pequenas e grandes.

Como criar um layout atraente para o seu site

Embora cada web designer tenha um plano diferente para construir um site, todos seguem algumas regras que consideram comuns e que também você vai ficar a conhecer para conseguir construir uma boa interface web. Falamos de espaço entre os elementos, imagens personalizadas de qualidade, ferramentas eficazes de busca e formas criativas de convidar o utilizador à demorar-se na visita ao seu site.

1. Espaçamento

O espaçamento é uma das mais importantes ferramentas de design porque permite uma maior legibilidade.
Deve ter consistência do espaçamento necessário e das relações de espaço entre os elementos no seu site, ou seja, elementos similares devem incluir espaçamento similar e também a quantidade de espaço entre as linhas de um parágrafo deve seguir um padrão, bem como o tamanho da margem à volta das imagens.

O espaço é importante para destaques: uma imagem ou bloco de texto com um espaço em branco à volta aparenta ser maior e logo mais importante. Claro que o espaço não tem de ser necessariamente branco o que tem de ter (ou neste caso não ter) é ausência de elementos. De resto, a cor de fundo pode ser escura ou até ter uma textura.

Dicas em relação ao espaçamento:

• Escolher o elemento central, como um menu, formulário ou uma imagem de destaque.
• Certificar-se de que as informações estão organizadas de forma a incluir espaços consistentes entre os elementos.
• Ter cada botão ou bloco de conteúdo destacado com o devido peso na hierarquia da informação.
• Não desviar a atenção do utilizador para blocos sem importância.

2. Navegação

A navegação num site deve ser fácil quer de identificar quer de usar. Também é importante manter os menus para navegação simplificados, para não sobrecarregar o utilizador com muita informação. Verifique se o seu site é user-friendly ou amigo do utilizador. Quanto mais fácil for para as pessoas navegarem pelo seu site, maior é a hipótese do visitante conseguir a informação que procura antes de desistir e sair da página.

Dicas em relação à navegação:

• Equilibre a navegação. Quanto mais itens tiver no menu, menor é a profundidade, e quanto menos itens, maior é a hierarquia.
• Use com bom senso os padrões de navegação. A observação do seu site deve ser simples. Não se esqueça que o visitante não vai perder tempo numa página onde não consiga de imediato perceber como se usa.
• Mantenha um padrão para o peso e posição dos links. Os utilizadores respondem melhor a páginas coerentes.
• Oriente o visitante dando informação sobre a zona do site onde está a navegar nesse momento.
• Crie soluções interativas com Javascript e CSS.

3. Sobre nós

A página “Sobre nós” deve dizer aos visitantes quem é a sua empresa e o que faz. Pode dize-lo de uma forma rápida e concisa ou pode aproveitar para apresentar as filosofias e objetivos da empresa, colocar testemunhos e declarações de clientes satisfeitos, casos de sucesso, etc. Mas o ideal, para não sobrecarregar com informação o visitante, é manter o “Sobre nós” como um menu direto e objetivo, apenas com a informação necessária para que o visitante fique interessado no que tem para vender, e não entediado. E lembre-se de manter o design igualmente interessante.

Dicas em relação ao “Sobre nós”:

• Use a página “Sobre nós” para dar mais personalidade à sua marca.
• Use fotografias da equipa ou das instalações.
• Seja breve e direto ao contar a história da sua empresa.
• Convide o utilizador a conhecer o restante conteúdo do site.

4. Contactos

As informações de “Contactos” costumam aparecem no topo do site ou numa página intitulada “Fale Connosco”. Qualquer um dos modelos funciona bem desde que adequado à arquitetura do site e desde que esteja perfeitamente visível. Nos “Contactos” deve apresentar informações como telefone, morada, email ou um formulário para contactar a sua empresa.

Dicas em relação ao “Contactos”:

• Adicione informação de contato em lugares sempre visíveis.
• Se tem uma loja física, inclua a sua localização com um widget de mapa como o do Google Maps, por exemplo.
• Se recebe muitos contatos via telefone, deixe o número bem visível.
• Adicione um formulário para que o utilizador possa enviar emails diretamente do seu site.

5. Call-to-action

Use call-to-actions ou chamadas para a ação de modo a que o seu objetivo final (vender) possa ser atingido. Os convites para a ação devem ser diretos e óbvios.

Dicas em relação a call-to-actions:

• Faça um call-to-action direto e persuasivo, seja ele uma imagem, um botão ou um formulário.
• Posicione o call-to-action na página inicial.
• Use botões de call-to-action  de cores contrastantes.
• Use botões que digam exatamente para que servem: compre agora, participe, download, inscreva-se, etc.
• Use botões de conversão que possam ser repetidos ao longo da página, caso o utilizador não tenha sido convencido à primeira.

6. Pesquisa

Como nem todos os utilizadores têm tempo e/ou paciência para procurarem os conteúdos que necessitam, convém que ofereça uma opção de “pesquisa” que lhes possibilite procurar um conteúdo específico. Desenhe a caixa de “Pesquisa” de uma forma discreta e fácil de usar, mas assegure-se de que a caixa é grande o suficiente para ser sempre visível. Se quiser um ícone para a caixa, use a lupa porque é um símbolo universal da pesquisa.

Dicas em relação à “Pesquisa”:

• Desenhe uma caixa simples que fique no topo da sua página.
• A localização mais popular da caixa de “Pesquisa” é no topo à direita.
• Deixe a caixa sempre visível.
• Não esqueça o layout da lisatgem de resultados.

7. Rodapé
O rodapé é uma zona onde pode resumir o site e fazer destaque a páginas que tenham uma relação com a parte institucional da empresa, nomeadamente redes sociais e contactos.

Dicas em relação ao rodapé:

• Repita informações encontradas noutras zonas do site. Por exemplo, os contactos e a pesquisa podem estar no topo da página e novamente no rodapé.
• Coloque no rodapé um pequeno mapa do site, links mais importantes e uma breve descrição da estrutura do site.
• O rodapé deve ficar simples. Ao desenhar um rodapé que exiba links ou botões, ele deve ficar visualmente integrado no site.

8. Botões

O objetivo de um botão num site deve ser imediatamente reconhecido pelo utilizador. Para verificar se os seus botões estão a funcionar corretamente e a ser entendidos pelos visitantes, use ferramentas de controlo de estatísticas como o Crazyegg ou Google Analytics para medir com testes A/B que cores ou tamanhos de botões são mais eficazes.

Dicas em relação aos botões:

• Desenvolva um conjunto de botões único para seu site.
• Ofereça uma área de clique grande e confortável.
• Faça testes A/B para medir a eficiência de cada botão.

9. Imagens

A máxima de que uma imagem vale mais do que 1.000 palavras é sempre válida, particularmente no seu site. Use imagens chamativas e criativas que agradem aos utilizadores. Com meia dúzia de (boas) fotografias consegue exibir os seus produtos/serviços de modo a incentivar os visitantes a ficarem mais tempo no seu site.

Neste processo, o conhecimento que tem do seu público-alvo é fundamental para escolher a construção visual usando aquilo que sabe que vai agradar ao seu potencial cliente. Não escolha uma imagem de Nova Iorque se apenas atua em Lisboa nem uma imagem de uma mulher asiática se vende cosméticos na Europa, e por ai fora… Certifique-se também de que está a usar imagens de alta qualidade (mas não necessariamente pesadas). É uma falta de profissionalismo, publicar uma foto desfocada ou pouco nítida.

Dicas em relação às imagens:

• Procure um fotógrafo para desenvolver e criar um conjunto de imagens único para o seu site.
• Confie mais nas imagens exclusivas do que nas imagens dos bancos de imagens.
• Use apenas imagens de qualidade.
• Não se poupe no tamanho das imagens.
• Use imagens de maior resolução, mas lembre-se de oferecer uma alternativa para dispositivos móveis.
• Se usar um banco de imagens, seja cuidadoso de forma a que o site não perca a sua identidade.

10. Web Fonts

As fontes também são importantes no layout do seu site. Antigamente não havia muito a fazer porque o conjunto de fontes que se podiam usar na Internet era limitado (Arial e Verdana e pouco mais) mas atualmente até fontes exclusivas pode usar! De qualquer modo, as fontes nativas ainda são muito importantes devido à compatibilidade e performance, por isso não abuse de fontes carregadas e aproveite as que já estão disponíveis no sistema. E não se esqueça que as web fonts também podem ser importantes para o posicionamento do seu site em motores de busca se forem usadas no lugar de imagens que teriam texto.

Uma má utilização das fontes pode prejudicar visualmente o seu site e levar o utilizador a abandoná-lo. Um grande número de fontes, com muitos efeitos e em diferentes tamanhos e com muitos detalhes só pode causar um tipo de impressão às pessoas: má. Ninguém perde tempo a procurar informação num site confuso e incoerente a nível gráfico.

Dicas em relação às fontes:

• Use um serviço com uma biblioteca de fontes livres, como o Google Web Fonts.
• Evite muitas variações de fontes para não prejudicar a performance do site.

11. Cores

As cores também são (muito) importantes, até por cada uma traz consigo um significado diferente de forma a passar uma mensagem com uma sensação distinta.

Dicas em relação às cores:

• Tenha algum cuidado na escolha das cores. Procure manter uma identidade visual que tenha harmonia com o logotipo da sua empresa.
• Experimente contrastes mas evite exagerar na saturação das cores.

 
12. Padrão visual

Não dê ao seu visitante a impressão de que a cada clique está a mudar de site. A coerência estrutural do site deve ser uma das suas principais preocupações porque ela transmite aos visitantes segurança na navegação.

Dicas em relação ao padrão visual:

• Use o mesmo tipo de imagem.
• Elementos como o cabeçalho e o rodapé devem ser trabalhados em padrões que possam manter o utilizador seguro da sua localização.
• Evite carregar o seu site com muitos elementos: fontes diferentes, tamanhos variados, muitas cores e imagens, etc. A eficiência de sua página pode estar na simplicidade.

E agora prepare-se, comece por visitar os sites dos seus concorrentes para analisar as suas composições: layouts, fontes, cores… Registe o que não gostou. Imite aquilo que lhe interessou. E adote as mesmas estratégias dos sites que considerou apelativos e onde se sentiu confortável. Não é copiar, é usar os exemplos mais bem-sucedidos para atinja o seu público-alvo de uma forma mais persuasiva. Com um layout de fazer inveja.