Guia de recomendações

As recomendações abaixo servem como referência para entrega de material para produção de páginas HTML e também possui algumas dicas para a produção e otimização do layout.

Questões relativas à entrega de arquivos – layout:

  • formatos: preferencialmente em PSD mas aceitamos também em AI;
  • organização de layers pós produção:
    • layers sem uso devem ser excluídas;
    • as diferentes páginas do projeto devem ser organizadas preferencialmente em pastas no mesmo arquivo ou em novos arquivos PSD;
    • imagens devem ser recortadas no tamanho utilizado no layout e não recortadas com máscara. Pode-se utilizar a imagem como smart layer;
    • fontes utilizadas no layout devem ser entregues separadamente (veja as recomendações sobre tipografia);
    • botões com ação de hover e active devem estar diferenciadas por pastas com seus respectivos nomes;

Questões relativas ao layout:

  • resolução: 72 dpi;
  • cor: RGB;
  • largura máxima do corpo: recomendamos 960px ou 980px;
  •  altura máxima do layout: indefinido, lembramos que o layout pode se comportar de acordo com a quantidade de conteúdo;
  • background com fotografia: é necessário uma versão da fotografia com dimensões de no mínimo 1980px por 1050px, isso se for previsto que a mesma ocupará o background inteiro mesmo com o redimensionamento do browser;

Questões relativas à tipografia

  • reduza a quantidade de fontes, pesos (bold) e estilos (itálico) diferentes no layout para não sobrecarregar desnecessariamente a quantidade de requests no servidor. Recomendamos o uso de até 3 fontes ou de três pesos / estilos diferentes da mesma fonte;
  • a questão anterior não se aplica aos layouts que usam fontes de sistema (veja lista abaixo).
  • lista das fontes de sistema (mac / pc):
    • Helvetica – Arial
    • Tahoma – Geneva
    • Times – Times New Roman
    • Arial Black
    • Lucida Sans
    • Verdana
    • Trebuchet MS
    • Courier New
    • Georgia
    • Verdana
    • Impact
  • não aceitamos utilizar fontes sem licença comercial, por isso recomendamos utilizar fontes disponíveis do Google Web Fonts, Font Squirrel, Typekit entre outros.