Entregue seu layout no formato Photoshop. Também inclua jpegs caso haja muitas variações do responsivo (break points).
Evite arquivos muito grandes, principalmente as imagens. Otimize-as para web e principalmente para mobile.
Idealmente use fontes de sistema e que existam em todos os sistemas (Windows, MacOS, Linux, iOS, Android, Windows Phone). Veja um guia para as fontes de sistema atuais.
Se for usar fontes que não são de sistema, use webfonts, ou seja, fontes que são otimizadas para funcionar em browsers, e principalmente, licenciadas para uso em websites. Um bom lugar para achar webfonts é o Google Fonts.
Se mesmo assim não for usar webfonts (por quê?), disponibilize-as junto com o PSD, e certifique-se de que elas são licenciadas para uso em websites.
Use poucas variações de fonte: Helvetica Neue é diferente de Helvetica Neue Condensed, que é diferente de Helvetica Neue Consended Black. Cada uma é uma fonte a mais que deverá ser baixada pelo browser, consumindo banda (pense em mobile).
Use poucas variações de tamanho: duas para títulos, uma para texto, outra para botões, por exemplo.
Sempre use valores inteiros, ex: 24px em vez de 24.3px.
Use cores que são web safe, que garantem que todos os browsers renderizarão da mesma forma.
Seja consistente. Você não precisa de 3 azuis que são levemente diferentes. O amarelo é o mesmo do logo?
Use um grid de 16px, e alinhe (snap) tudo a esse grid. Padronize os espaçamentos em múltiplos de 16: 16px, 32px, 48px, 64px.
Pense em layouts que sejam responsivos, ou seja, que possam se adaptar conforme a largura do display. Como o layout ficaria em 320px (iPhone 5s)? E no tablet? E em um Apple Cinema Display? O ideal é pensar em resoluções variando entre 320px (20 * 16px), 640px (40 * 16px) até máximo 1280px (80 * 16px).
É muito custoso para o frontend fazer duas versões discrepantes (mobile e desktop), fora que temos que tomar as decisões de, por exemplo: que layout usar num tablet? E se o tablet tiver resolução FullHD?
Seja descritivo no nome de todos os layers. "Layer 34 copy copy" não é legal.
Agrupar layers facilita esconder/mostrar áreas rapidamente.
Coloque em uma ordem sequencial dos elementos da página para facilitar a localização.
Criou um layer só pra testar, não foi aprovado e escondeu? Melhor apagar.
Imagens de background são legais, mas o que acontece quando a tela é maior que a imagem? E menor, será que no mobile vai atingir o efeito desejado?
Quando possível, deixe separadas versões de resolução mais alta para serem usadas nesses dispositivos.
Primeiramente pense duas vezes antes de usar um efeito. Ele é realmente necessário?
Evite overlay de cores para atingir a cor desejada, é difícil reproduzir com CSS.
Efeitos que são facilmente reproduzíveis em HTML/CSS: drop shadow, bordas arredondadas, gradientes. Se possível indique onde esses efeitos existem, pois pode passar batido.
Uma animação pode ser um recurso interessante para melhorar a experiência do usuário, mas vale a mesma observação que para os efeitos: pense se ela é realmente necessária.
Pense em animações que possam ser realizadas com CSS. Alguns tipos de animação são mais custosos para o computador do usuário que outros. Bons exemplos de animações que são performáticas envolvem:
- translate (movimentação de objetos)
- scale (mudar o tamanho dos objetos)
- rotation (rotacionar objetos)
- opacity (opacidade/transparência)
Se for ter animações na página, indique onde e qual o comportamento esperado.