Padrão de desenvolvimento de Layouts

Introdução

Esse artigo se destina a web designers que desenvolvem layouts para a web. É importante que os padrões aqui descritos sejam seguidos para uma maior conformidade de trabalho.

Estrutura interna de pastas

Se estiver trabalhando em nosso servidor, solicite acesso ao diretório de arquivos do setor web, junto a nossa equipe. A estrutura de pastas devem seguir a forma abaixo descrita:

Explicando a estrutura acima:

Renomeie a pasta principal com o nome do cliente ou projeto caso o cliente possua mais de um projeto em andamento, senão mantenha somente o nome do cliente. Dentro da pasta com o nome do cliente ou projeto crie uma pasta (caso ainda não exista) com o ano atual. Dentro desta pasta irá conter outras duas pastas FTP  e LAYOUT-SITE.

Estará presente dentro do diretório FTP pastas numeradas a partir de 01 em diante conforme a quantidade de versões de layouts. Sendo o número maior a última versão exportada.

LAYOUT-SITE, caso o projeto seja um site mantenha o nome como LAYOUT-SITE, para hotsite e landing page renomear para LAYOUT-HOTSITE e LAYOUT-LANDGINPAGE respectivamente. Dentro deste diretório irá conter os arquivos layout-v1.psd e layout-v1.ai o final v1 indica a versão do layout, sendo assim um arquivo layout-v2.psd iria conter a versão mais recente do layout e assim sucessivamente.

Além dos arquivos essa pasta contem outros dois diretórios importantes, são eles a pasta sources e JPEG.

A pasta “sources” é destinada a salvar todos os arquivos que, de alguma forma, foram utilizados no Layout, tais como: imagens (no tamanho real de download); vetores baixados; arquivos das fontes que foram utilizadas (que é umas das coisas mais importantes), imagens linkadas (para Layouts em AI que tenham necessidade), arquivos de briefing do projeto, etc. Também é interessante manter o arquivo Links.txt, para salvar links da internet que forem necessários, por exemplo, o link de uma família de ícones encontrada na internet que foram utilizadas no Layout, ou até mesmo as vezes o cliente pede para se basear em um Layout de um template pronto, o link desse template seria salvo nesse arquivo com algum comentário, ‘template base’ por exemplo (sem nenhuma necessidade de seguir uma estrutura fixa de pastas internas nesse diretório).

Já a pasta JPEG tem como único objetivo auxiliar no processo de preparação da pré-visualização para o cliente. Desta forma, não é mais necessário encaminhar os arquivos por e-mail ou skype, onde acaba ocorre a duplicidade de arquivos em máquinas diferentes, ao invés disso, trabalharemos sempre com os mesmos arquivos, que se encontrarão no nosso servidor. Cada uma das páginas deve ser exportada no formato .jpg com a mesma largura dos arquivos AI e PSD (2560px), e então salvas nesta pasta. Conforme for sendo criado novas versões do layout, os exports desta pasta podem ser substituídos, sem necessidade de manter a versão anterior (uma vez que temos o arquivo AI/PSD da versão anterior salva, não é necessário manter seu export nesse diretório). É importante ressaltar que manter a integridade da altura do arquivo ao exportar ajuda muito no processo de colocar o Layout na pré-visualização para o cliente. Exemplo:

Baixe aqui a estrutura de pasta completa com seus respectivos arquivos