Close

Índice

Introdução

Uma área muito importante em qualquer projeto web é aquela que cuida do planejamento e execução da Interface dos sites e, por isso, elaboramos este documento para auxiliar e otimizar o trabalho tanto dos Designers como de quem receberá o material para montar o Front-End na sequência.

Para fácil entendimento, dividimos o conteúdo em duas etapas:

O mais importante é que fique clara a importância de conhecer as possibilidades e limitações que a web proporciona, assim como qualquer outro meio de mídia (impressos, televisão, etc.).

Redigimos este documento considerando que os layouts sejam entregues em arquivos de Photoshop (PSD), mas o conceito se aplica a casos de Sketch, Pixelmator ou qualquer editor visual usado para criação da interface.

Voltar ao índice

Considerações para o planejamento de layouts

Para que o trabalho do Front-End Developer ocorra da melhor maneira possível – sem que hajam problemas de fluxo e refações – indicamos que:
Arquivos necessários para o Front-End
Voltar ao índice

Boas práticas de layout para web

Uso de grids

Uma das principais indicações para a criação de qualquer interface é o uso de grids que, além de facilitar a navegação por tornar o visual mais harmonioso, torna o desenvolvimento mais prático, deixando claras as medidas dos blocos de conteúdo e seus espaçamentos:

Exemplo de grids no WooThemes
Exemplo de grids no WooThemes

O uso dos grids além de, como dito anteriormente, deixar o visual mais agradável em todos os sentidos, faz com que o código HTML seja mais enxuto e semântico. Ou seja, é bom para todo mundo!

Uma boa referência sobre o uso de grids com download de diversas ferramentas para começar seu uso (templates para diversos programas de edição visual e até mesmo CSS): 960.gs/

Conteúdo (textos, tabelas, menus, listas, imagens, etc)

Saiba onde é conteúdo dinâmico e preveja a inclusão ou edição de seus dados (ex.: uma caixa que carregue tweets deve considerar uma altura/largura flexível).

Existe conteúdo que pode exceder ou desalinhar conforme atualizações e manutenções. Nessas situações onde o conteúdo possivelmente terá essa movimentação, evite layout sem flexibilidade ou com alinhamentos perfeitos. Assim evitamos todo tipo de quebras e desalinhamento!

No caso de imagens que mudam conforme atualizações e manutenções, recomendamos que não possuam transparência, reflexos, efeitos, hover com filtros, etc.

No exemplo abaixo, a simples disposição dos elementos facilita a montagem do HTML e possibilita uma listagem de elementos que não confunde a leitura para o usuário. Na nova disposição proposta (segunda imagem), podemos listar quantos livros quisermos, na qual cabe também um título maior sem a preocupação que temos no primeiro exemplo (sinalizado pela marca vermelha):

Conteúdo expansível
O segundo exemplo deixa a leitura mais fácil e o conteúdo pode ser expansível
Web Fonts
“And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.”
Google Web Fonts

As webfonts que forem utilizadas devem ser citadas no Manual do site, além dos arquivos enviados ao front-end developer.

Porém, como em qualquer outra prática, devemos pensar que a inclusão de webfonts aumenta o peso do site e, por isso, devem ser sempre usadas onde realmente for necessário, nunca prejudicando a experiência do usuário.

Importante: Toda web font utilizada deve ter permissão de uso, já que a licença para uso em layouts é diferente daquela para uso nos sites.

Background

Você apenas precisa prever:

  • Fim do background caso a imagem seja fixa:
    Background com imagem fixa Background com imagem fixa
    O exemplo inferior mostra como o fundo foi planejado para ser finito
  • Repetição para fundo infinito. Neste caso, é preciso colocar no manual a “peça” que se repete, como no site d’O livreiro, a imagem que se repete no fundo do topo é esta:
    bg livreiro

E evitar:

  • Sobreposição do background no conteúdo.
    Background: exemplo de mal uso
    As mãos do garoto estão sobrepondo o conteúdo
  • O vídeo Interface DesignerLayers ocultas e efeitos de camadas explica como:
    • Evitar deixar escondidas as camadas não utilizadas, deletando-as;
    • Não utilizar efeitos de sobreposição de camadas, que sempre geram um resultado diferente do esperado quando as camadas são mescladas;
Formulário

Os navegadores padronizaram os campos de formulário, por isso não é recomendado estilizar os seguintes campos:

  • select
  • input: radio, checkbox e file (upload);

Também se encaixa nesta questão a customização da barra de rolagem. Existem formas para alterar o padrão, mas são muito graves e prejudiciais, já que tratam-se de “gambiarras” de muito custo e pouco benefício.

Voltar ao índice

Organização dos PSDs

Ao montar seus layouts, deve-se ter em mente que outra pessoa precisará trabalhar com ele e, por isso, a organização do arquivo é muito importante para que não haja perca de tempo para entender como ele está estruturado.

Temos algumas dicas que facilitarão tanto o trabalho do designer ao fazer ajustes de layout, como o Front-End Developer ao montar o HTML e CSS do site:

  • Limpeza do arquivo: apagando layers desnecessárias que não fazem parte do layout;
  • Divisão por pastas baseada na estrutura do documento, ex:
    • Topo
      • Busca
      • Menu
    • Conteúdo
      • Coluna 1
        • Notícias
      • Coluna 2
        • Navegação interna
        • Links
    • Rodapé
    Organização do PSD
    Exemplo de organização das pastas no PSD
  • Além da divisão das pastas, o designer precisa prever o comportamento de botões e outros itens de conteúdo que possuam algum tipo de interação – algo que não seja padrão das telas e não se encaixe no manual de elementos padronizáveis;
  • Não utilizar efeitos de estilização de camada (ex: multiply, overlay) para elementos que sejam separados do fundo, pois, ao exportar, a interação entre as camadas não serão preservadas;
  • Pensar sempre em deixar o arquivo o mais enxuto possível, assim facilita o manuseio (geralmente não temos máquinas tão potentes para lidar com arquivos de 100, 200 ou 300mb de peso).
  • 1 PSD = 1 tela. Não colocar os layouts de todas as telas em um arquivo PSD só, pois fica muito pesado para abrir e também enquanto fazemos o desenvolvimento Front-End.
  • Marcar com a cor vermelha, quando esta representar uma ação: hover, clique, etc. Exemplo na imagem a seguir:
    layer marcada

O princípio básico de tudo é o bom senso e pensar em manter o arquivo de uma forma que outra pessoa consiga entendê-lo sem precisar pedir maiores esclarecimentos.

Voltar ao índice

Possibilidades e limitações da web

Assim como qualquer profissional offline precisa conhecer as limitações do meio para o qual se está trabalhando, o designer para web precisa saber que o nosso meio de atuação também impõe particularidades que precisam ser respeitadas para termos um bom resultado.
Página de internet não é folha impressa

Como já comentamos anteriormente, há diversos itens que devem ser levados em conta para a montagem dos layouts, principalmente no que diz a flexibilidade do conteúdo. Isso é tão importante a partir do momento que estamos lidando com milhões de usuários acessando os sites através de dispositivos distintos (celulares, smartphones, televisão, netbooks, desktops, tablets, etc.).

O dever de todo Front-End Developer é garantir que o site seja acessível a qualquer usuário, independente de sua forma de acesso mas, para isso, alguns conceitos devem ser bem compreendidos:

  • A web não funciona como livros e revistas que, ao saírem da gráfica, ficam idênticos. Os sites devem ser planejados para serem adaptáveis, pois cada dispositivo e cada browser possui suas particularidades, assim alguns detalhes visuais poderão ficar diferentes, mas o conteúdo não deve ser prejudicado;
  • Desta forma, caso algum navegador antigo não renderize um canto arredondado ou sombra não há problema, já que o usuário não terá como comparar com o navegador mais moderno e, provavelmente, não sentirá falta disso para sua experiência de navegação. Veja um pequeno exemplo no site do Twitter:
    Twitter Safari
    Safari – Elementos utilizando recursos CSS3
    Twitter Internet Explorer 8
    Internet Explorer 8 – Campos de formulário sem cantos arredondados e efeitos de opacidade

Esse tipo de visão, mais adequada para a web, se encaixa no princípio do Progressive Enhancement, que busca dar a melhor experiência visual para quem possui navegadores e dispositivos mais avançados, enquanto o usuário que utiliza recursos limitados possui acesso total ao conteúdo e a funcionalidade do site, porém sem ter a experiência visual completa.

Voltar ao índice

Montando layout para Desktop

Ao criar sites para Desktop, temos mais flexibilidade em termos de layout e recursos. Porém, como há um grande número de usuários em diferentes sistemas operacionais, navegadores e resoluções de tela, devemos ter em mente algumas questões importantes:
  • Cada navegador é uma plataforma diferenciada, por isso é natural que hajam diferenças visuais, que não impactam na experiência do usuário;
  • Como há monitores de diversos tamanhos, deve-se adotar a resolução 1024×768 como base (mais utilizada atualmente), correspondendo a 1002×658 em termos de layout (descontando as medidas da janela do navegador) – porém o indicado é usar 960px de largura, para que se tenha respiro nas laterais do site;
  • As fontes nunca ficarão idênticas nos sistemas operacionais distintos;
  • Prever comportamento do layout em resoluções menores que aquela utilizada como padrão do siteResponsive Web Design
  • Evitar ao máximo que textos sejam feitos com imagens (uso de fontes que não são de sistema ou webfonts) pois esta prática aumenta o tempo de produção e manutenção do conteúdo, além de peso do site. Caso realmente seja necessário, utilizar somente em itens pontuais do layout.
Voltar ao índice

Montando layout para Mobile

Todo usuário mobile utiliza a web com um objetivo em mente (pegar o endereço de uma agência bancária, telefone de uma loja, etc.), já que o custo pela transferência de dados ainda é elevado e a velocidade da conexão muitas vezes é impraticável.

Por isso, ao planejar a versão de um site para dispositivos móveis, leve em consideração:

  • Tamanho de tela reduzido;
  • Interações não são feitas com mouse: pensar que áreas clicáveis (botões, links, etc.) devem oferecer uma boa área para interação, sem a necessidade de efeitos over para destaque;
  • Quantidade de imagens;
  • Diagramação para celulares convencionais, de preferência, sem uso de colunas e tabelas para apresentação do conteúdo;
  • No caso de smartphones e tablets as possibilidades são muito maiores, mas sempre leve em consideração que a capacidade de processamento destes aparelhos é inferior ao desktop, então deve-se manter o bom senso sobre efeitos visuais e quantidade de informação na mesma tela;
  • Caso seja feita uma versão para diversos dispositivos distintos (iOS, Android, Blackberry, etc.), não fazer um layout com medidas fixas, ou seja, planeje layouts flexíveis que se adaptem aos diferentes tamanhos de tela e orientações (retrato ou paisagem);
  • O contraste de cores no conteúdo é importantíssimo, pois o acesso pode ser feito em lugares abertos, com alto grau de luminosidade;
  • Assim como nos navegadores desktop, o site pode apresentar diferenças visuais entre os dispositivos, já que cada um possui suas limitações.
Voltar ao índice

Montando layout para E-mail Marketing

O mais importante é saber que na hora de desenhar um e-mail marketing, lembre que esta é a peça é a mais “engessada” e restrita da web, pois pode ser aberta tanto nas primeiras versões de um Outlook quanto no GMail, Hotmail etc. Resumindo, é como nos navegadores, alguns suportam mais tecnologias que outros, mas temos que nivelar por baixo. Com um checklist fica mais fácil de pensar:

O mais importante é saber que na hora de desenhar um e-mail marketing, lembre que esta é a peça é a mais “engessada” e restrita da web, pois pode ser aberta tanto nas primeiras versões de um Outlook quanto no GMail, Hotmail etc. Resumindo, é como nos navegadores, alguns suportam mais tecnologias que outros, mas temos que nivelar por baixo. Com um checklist fica mais fácil de pensar:

  1. Se tiver que usar texto dinâmico: (ex.: Nome do destinatário, texto enviado por um amigo etc.): Deve-se utilizar um background “chapado” (cor sólida) e não imagem neste caso, pelo menos onde o texto ficará disposto. Na imagem abaixo temos uma imagem fixa (1) onde pode-se fazer qualquer arte, e texto dinâmico (2) – construindo um template de e-mail onde nas próximas edições poderá trocar a imagem do topo por exemplo e temos uma nova arte.
    e-mail marketing com texto dinâmico
    Exemplo de e-mail marketing com texto dinâmico no topo
  2. Terá imagem dinâmica? (ex.: foto do usuário enviada por e-mail, foto de um amigo): Nada de molduras que fiquem por cima da foto; prefira molduras do tipo bordas e evite mescla da foto com o fundo da peça (efeitos de camadas sobrepostas, opacidade, etc).
    Imagens dinâmicas
  3. Dimensões permitidas: O limite para largura é de 550px mas para altura não há um limite: usar o bom senso pois o e-mail marketing deve ser objetivo, e os primeios 200px são os mais importantes para chamar atenção do leitor.
    • Altura PODE ser flexível: Mas é preciso pensar em todo o conteúdo: na imagem acima (2) com um fundo de cor sólida e texto em fonte padrão, é possível que seja expansível. No exemplo (3) na imagem abaixo, também é possível expansão pela borda de cor sólida e fundo branco e altura dos elementos (4) na mesma linha respeitam uma altura comum.
      Exemplo e-mail mkt
  4. Fontes: Poderão ser utilizadas somente fontes padrão do sistema caso o texto seja dinâmico: preços de produtos, nome do destinatário e texto enviado por um amigo por exemplo (como na imagem acima, indicada pelo número 4). Tamanho mínimo de texto 13px para boa leitura em mobile.

Leitura complementar: Anatomy of a Perfect Mobile Mail.

Voltar ao índice

Considerações para a montagem dos layouts

Construindo com Elementos Padronizáveis

Para todo projeto é importante que seja criado um Style Guide, que nada mais é que um conjunto de normas com objetivo de proporcionar uniformidade no estilo e na formatação de um documento.

Há alguns itens importantes que devem ser levados em consideração para a montagem de qualquer Style Guide:

  • Layout e composição: definir todas as variações de layout usadas na interface, e quando estas são usadas;
  • Tipografia: exemplificar as diferentes fontes usadas no site e as variações de acordo com os elementos (títulos, subtítulos, parágrafos, listas, etc.). Se há o uso de alguma fonte customizada, planeje uma fonte alternativa para que o usuário consiga navegar no site de maneira satisfatória;
  • Paleta de cores: defina as diferentes cores usadas no site para a construção de elementos (cores de textos, links, botões, fundos, etc.), juntamente com seu valor hexadecimal (por exemplo #000000);
  • Imagens: as medidas das imagens utilizadas nos layouts também devem ser definidas no Style Guide. Por exemplo, no caso de um e-commerce, há fotos dos produtos na página inicial, thumbs nas galerias de imagens e imagem ampliada (todas essas variações devem estar expostas no documento);
  • Guidelines da marca: além de padronização de cores, fontes e medidas, deve-se prever o comportamento da marca no site (espaçamento da logo com outros itens, interação com diferentes cores de fundo e até como o nome da organização deve aparecer no texto, ou seja, tudo o que for pertinente para a preservação da marca e sua exibição da maneira correta).
Estilos para elementos básicos

Para exemplificar melhor, veja abaixo um exemplo simples de Style Guide contendo variações de fontes nos diferentes níveis de conteúdo:

style guide base

Observe que o manual mostra o estilo dos elementos padronizáveis, informando o tamanho, o tipo e a cor da fonte utilizada para:

  • Títulos
  • Parágrafos
  • Links
  • Listagens (neste caso foi exemplificado o bullet personalizado)

Para os parágrafos e listas, é importante informar o espaçamento entre eles, além da aplicação de destaques como negrito, itálicos, etc, no texto de exemplo.

Formulários

No Guide pode-se mostrar também o estilo padrão para formulários, conforme imagem abaixo:

styleguide form

Lembrando que, conforme já informado anteriormente, alguns campos do formulário não são padronizáveis, como o select e o input (radio, checkbox e file (upload)). Esses campos já tem os padrões dos navegadores. Você pode fazer o download dos elementos do form para ficar mais fácil de montar seu layout 🙂

É importante que no manual para formulários tenha o posicionamento das mensagens de erro caso algum campo seja preenchido incorretamente ou esteja em branco.

erro formulário
Prever elementos de navegação

Além dos elementos comentados anteriormente, caso o site possua recursos como galerias de imagem ou popups de aviso e erros, é importante exemplificá-los no manual, identificando os comportamentos que compõem sua navegação:

galeriaScroll

Outro estilo importante que deve ser previsto são os botões de ação, tanto para a função de call to action como envio de formulários. O importante é que seja previsto um layout flexível, assim podemos utilizar um modelo que permita desde um texto “OK”, até um texto maior como “Enviar mensagem instantânea.”. Veja abaixo um exemplo de botão expansível.

botão expansível
Independente do tamanho do texto, o ajuste é feito direto no HTML, sem necessidade de ajustes de layout

Caso o projeto inclua estilização de tabelas (o que é muito provável), também preveja no Guide este comportamento. Na imagem abaixo temos um exemplo de uma tabela estilizada:

exemplo tabela

Adicionalmente, você pode baixar um PSD *, com os exemplos citados acima, do Manual (Style Guide) contendo todos os elementos padronizáveis do site, para se utilizar como base para novos projetos.

Manual base para manuais de elementos padrão:

Manual base
* www.webstandards.blog.br/manual/arquivos/manual-base.zip

Design For Efficiency: Photoshop Techniques & Templates (Mindy Wagner):

style guide
www.viget.com/inspire/free-psd-design-templates/

Outras fontes:

Voltar ao índice

Pensando em templates: construindo um layout com padrões

O Template utiliza muitos elementos do Style Guide criado e é base para todo o site pois contém padrões:
  • Medidas (respeitando do grid) e margens;
  • Utilizar elementos do Style Guide;
  • Disposição de popups sobre o site;
  • Demonstração de comportamentos: formulários (erros, alertas e mensagens de sucesso), links (botões/textos com hover e clique se necessário), compartilhamento em redes sociais,
  • Modificações no layout para cada tamanho de tela a que o site será visualizado;
Voltar ao índice

Peso

Comentamos anteriormente que, principalmente no ambiente mobile, o peso do site deveria ser levado em consideração, principalmente devido a velocidade da conexão ser insatisfatória e os custos elevados.

Mas devemos pensar nisso ao montar qualquer site, tendo em mente que os usuários não esperam mais que poucos segundos para carregar as páginas. Assim sendo, quanto mais rápido for, menos chances de perdermos visitas.

Além disso, o Google já vem há um bom tempo considerando o peso das páginas como fator determinante para o rankeamento dos sites no sistema de busca, portanto não adianta somente escrevermos um código otimizado e fácil de entender, o designer precisa se preocupar com a quantidade de recursos visuais usados no site e seu peso, beneficiando a performance do site e, consequentemente, facilitando a vida do usuário.

Resumindo, alguns itens importantíssimos devem ser considerados:

  • Usa fontes que não são de sistema? Escolha uma webfont (ex: Google Web Fonts ou Font Squirrel) para que não precisemos gerar imagens para cada texto;
  • Fazer backgrounds com cor chapada, patterns ou imagens que possam ser repetidas no eixo vertical ou horizontal (degradês), para que uma imagem pequena seja usada com poucos “kbytes de peso”;
  • Evitar usar fotos de conteúdo dinâmico que precisem ser exportadas como PNG-24 bits (transparência alpha), pois como todos sabem, PNGs com muitas cores ficam extremamente pesados;
  • Padronizar o máximo possível de elementos no site, assim imagens e definições de estilo usadas uma vez não precisam ser carregadas novamente.
Voltar ao índice

Resoluções de tela: Responsive Web Design

Ao desenvolver um site devemos nos preocupar com todos os usuários, estejam eles usando navegadores muito antigos ou um dispositivo móvel moderno.

Porém, para que consigamos dar uma experiência agradável, podemos aplicar o conceito do Responsive Web Design, ou seja, layouts que se adaptam de acordo com características inerentes ao dispositivo utilizado pelo usuário – a mais comum é a viewport (dimensão de tela):

viewport
Muitas resoluções em dispositivos distintos

A base para aplicar este conceito é a utilização de CSS Media Queries, ou seja, definições visuais baseadas nas dimensões, resolução, orientação (vertical ou horizontal), etc., trocando estilos de acordo com o contexto do site. A idéia não é fazer um site totalmente novo, mas adaptar a apresentação da navegação e conteúdo para que a experiência fique agradável a todos.

Web Designers devem entender a fluidez e diversidade na Web.” www.designadaptavel.com.br/artigos/como-temos-feito-sites-ate-agora

Exemplos

10k
bitfoundry
foodsense
fork cms
london partners
Voltar ao índice

Outros links