Na construção de sites, a comunicação entre design e desenvolvimento tem evoluído constantemente. Os papéis a cada dia ficam mais próximos, o que aumenta muito o sucesso no desenvolvimento dos projetos.
É comum para a maioria o funcionamento da comunicação de design e programação no desenvolvimento de um site. Resumidamente o designer faz o desenho da interface e passa para um programador que codifica e dá vida para tudo aquilo.
Porém, ainda com certa frequência, nos deparamos com designs enviados para a equipe de programação que foram feitos sem pensar que aquilo seria utilizado em um ambiente web. O que acaba dificultando e, as vezes, até impossibilitando o desenvolvimento do produto. Neste artigo iremos falar sobre dicas e práticas a serem tomadas na hora de produzir o design de um site.
Entendendo o contexto web
Uma das coisas mais importantes que precisamos ter em mente na hora de produzir o design de um site, é lembrar que, de fato, o que estamos fazendo será reproduzido por um programador e exibido nos navegadores. Então a primeira dica que dou é sempre visualizar seu design nos navegadores e não simplesmente olhar por algum visualizador de imagens.
Isso é bem simples, basta você arrastar a imagem para dentro do navegador e clicar para dar zoom, como no exemplo abaixo:
1) Arrastar a imagem para o navegador;
2) Clicar na imagem para aplicar o zoom:
3) Visualizar a imagem no ambiente web.
Com isso você já entenderá como seu design será exibido em um navegador, facilitando a sua tomada de decisões.
Container e Colunas
Talvez essa seja a parte mais importante no desenvolvimento do design: entender bem como funciona o container e suas colunas.
O container é onde fica alocado e centralizado o conteúdo do site, podemos ver claramente no site abaixo o container contornado de azul:
A presença de um container em um site é essencial, pois ele garante que em qualquer computador ou dispositivo que o site for acessado ele irá se comportar do mesmo jeito. Normalmente o tamanho de container que usamos é de 970px ou 1170px de largura; devido ao fato de que as resoluções de tela mais usada nos dias de hoje são de 1360x768, 1920x1080 e 1280x800 (pixels).
Dentro deste container os elementos seguem uma lógica de alinhamento a partir das colunas. O padrão mais usado para essa lógica são as grids do Bootstrap, que dividem o container em 12 partes. Podemos ver na imagem abaixo o mesmo exemplo usado anteriormente com o container dividido em 12 partes:
Por exemplo, a seção “Nossos carros” ocupa metade do container, então estão sendo usadas 6 partes da coluna para alocar este conteúdo.
A maior vantagem de usar essa divisão de colunas do Bootstrap é que elas estão diretamente ligadas à programação, então se você seguir essa lógica irá garantir que a programação do site será 100% fiel ao design enviado. E para facilitar tudo isso, o Bootstrap dispõem um arquivo PSD com um container e colunas já separadas, você pode fazer o download deste arquivo clicando aqui.
Providenciando os arquivos certos
Uma das coisas que mais dificulta a vida dos programadores é ter que ficar adivinhando as fontes e recortando as imagens e ícones do arquivo de design recebido. E, de fato, isso não é trabalho do programador. Vou mostrar aqui uma prática que usamos no nosso dia-a-dia que facilita muito a conversa entre designer e programador.
Após finalizado o design crio uma organização em pastas da seguinte forma:
-
Arquivos para desenvolvimento
-
Imagens
-
Favicon
-
Fontes
-
Devision
-
Pasta imagens
Todas as imagens e ícones que serão necessárias para a programação do site. Como no exemplo abaixo:
Além disso, é muito importante que todas as imagens que você inserir nesta pasta estejam otimizadas para web, pois, um dos fatores que mais influência no carregamento dos sites é o carregamento de imagens, e gerando uma imagem otimizada deixará o arquivo muito mais leve e propício para o ambiente web. É bem simples gerar imagens otimizadas, no Photoshop basta você utilizar o atalho Ctrl + Alt + Shift + S e abrirá a seguinte tela:
Depois basta clicar em “Salvar” e escolher o local onde o arquivo irá ser salvo.
Se você quiser melhorar e otimizar ainda mais suas imagens, depois de salvar no Photoshop você pode passar as imagens no site Tiny PNG (https://tinypng.com/), aí com certeza suas imagens estarão totalmente otimizadas para a web!
Pasta Favicon
Coloco o favicon que será utilizado no site nos tamanhos de 152x152 e 16x16 (pixels). Caso você não saiba, favicon é aquele ícone que fica ao lado do título do site nos navegadores:
A resolução utilizada nos sites é de 16x16 (pixels), porém é importantíssimo mandarmos também um favicon de 152x152 (pixels), pois alguns navegadores e dispositvos utilizam outros tamanhos de favicon.
Pasta Fontes
Todas as fontes que utilizei no site. Porém, aqui tem uma dica muito importante. Para facilitar muito a vida do programador, e garantir a fidelidade do site com o design, recomendo que você use apenas as fontes do Google Fonts. Você pode conferir elas clicando aqui.
Pasta Devision
Por último, a pasta chamada Devision. Todos os programadores amam ela! Nesta pasta coloco o design do site com todas as referências de fontes, cores e medidas que estão sendo utilizadas. Por exemplo:
Com todas estas pastas tenho certeza de que você se orgulhará do resultado final e criará uma ótima relação com a equipe que irá desenvolver o site. :)
Dica bônus!
Uma ferramenta que utilizamos internamente para conversarmos e criarmos apontamentos sobre os design é a RedPen, e realmente nos ajudou muito, você basicamente sobe uma imagem e manda o link gerado para seus colegas. Então eles acessam o link e podem ir clicando na imagem e gerando comentários, como no exemplo abaixo:
Uma questão que você deveria manter em mente é: A construção de um site, como qualquer outro projeto, terá muito mais chances de sucesso com a colaboração de todos os envolvidos. Designers e programadores, quando trabalhando em sinergia, conseguem criar soluções incríveis.
Já foi o tempo onde o programador era literalmente obrigado e fazer todo e qualquer tipo de solução maluca para agradar única e exclusivamente o designer. Aliás, com o rumo que o desenvolvimento web está tomando, o designer precisa se adaptar a um contexto totalmente diferente de poucos anos atrás. Mas isso é assunto para um próximo texto!
Gostou deste artigo? Então comenta aí abaixo sobre o que você utiliza no dia-a-dia! :)
