Aqui na WD House, somos bem criteriosos em nossos processos, onde possuímos etapas bem definidas com suas especificações e prazos. Na criação de um site, uma das etapas é o web design, onde é responsável por traduzir todo o escopo do projeto em um layout navegável e com visual atraente.

Neste artigo vamos falar sobre o processo do web design, de como informações de um sitemap se transforma em um layout.

Sitemap de um Hotsite

Sitemap

1. O estudo

Antes de colocar a mão na massa, você precisa avaliar o briefing com o cliente, quais as suas expectativas, o objetivo com o site, o que ele gosta, cores, fontes, como é sua identidade visual e suas demais peças publicitárias. Você tem que ter bem claro; quais os problemas que o site deve resolver e qual a experiência que deve promover.

Pesquise o website atual de seu cliente, bem como de seus concorrentes, e pense em quais partes interessantes de conteúdo ou elementos de design que possam funcionar bem. Abuse de sites como Behance, Awwwards, Dribbble para ter inspirações. Anote tudo que achar interessante, pontos chaves de sucesso e escolha dicas visuais que podem ser úteis para que o projeto transmita a mensagem certa.

2. A Grid

Eu costumo dizer que o papel (arte gráfica) aceita tudo, porém na web é bem diferente, seguir uma grade com colunas estruturadas, além de facilitar na hora da codificação, ajuda muito no processo criativo, pois segue um padrão e os elementos se encaixam com maior facilidade. E para a versão mobile não é diferente, a grid se adapta e agiliza o seu trabalho.

Grid

3. Tipografia

O objetivo fundamental de qualquer site é transmitir informações. A informação é comunicada através da linguagem. E a linguagem exige tipografia, é a unidade básica do seu design. A importância da tipografia no design é evidente. Ela é o seu principal elemento comunicador e sua relevância é tão fundamental quanto as imagens, as cores, a diagramação e toda a identidade visual de uma marca. Então vale a pena estudar um pouco mais e escolher a fonte certa, e fazer combinações para passar a mensagem da forma correta.

Mas na web é preciso ter cuidado, pois nem toda a fonte é aceita e pode ser codificada. Hoje utilizo muito o serviço do Google Fonts, onde possui uma biblioteca bem interessante de fontes que podem ser utilizadas livremente e que não terá problema do seu site não exibi-la como você planejou.

Google Fonts

 

Outro alerta é manter sempre um padrão, não dá para abusar da quantidade de fontes utilizadas, por dois motivos. Primeiro, quanto mais fontes utilizadas mais pesado será seu código e pode trazer lentidão para o site. Segundo, o usuário pode se perder com muitas fontes, não esqueça que a experiência do usuário é o mais importante. Eu costumo utilizar no máximo 3 tipos de fontes, não esqueça que a variação da fonte, bold, regular, back, thin, cada uma conta como uma fonte.

4. O design, paleta de cores, elementos e informações

A primeira ação que faço após abrir o documento é colocar o logo no grid e fazer a paleta de cores do projeto. Assim já defino as cores que serão utilizadas no projeto, e este é um dos pontos cruciais, pois a experiência do usuário é o mais importante, ele saber o que é clicável ou não é muito importante e quem define isto são as cores.

Para ajudar a criar uma paleta você pode utilizar o Adobe Color CC, onde você pode criar sua paleta ou pegar de outros usuários.

Adobe Color CC

 

Para ajudar a valorizar o seu layout, utilize elementos gráficos como ícones, lembre-se de utilizar em .svg pois ele é leve e se adapta ao responsivo. Você mesmo pode desenhar seus ícones no Illustrator e exportar em .svg, mas se não possui esta habilidade ou quer ganhar tempo, você pode buscar no Flaticon, tem muitos elementos gratuitos e que entregam em vários formatos.

Sobre as informações lembre-se de manter sempre um padrão, ou seja, defina tamanho de fontes e use-as sempre para o mesmo tipo de conteúdo. Subtítulos todos iguais, textos sempre no mesmo tamanho e cores, assim trará uma harmonia e a sensação de uma site organizado. Claro que depende do seu projeto e objetivo, isto digo em uma regra geral. Mas se o projeto pede cores diferentes, como por exemplo o G1 que utiliza cores de fontes diferentes para cada assunto, por mais que seja assim, o usuário entende a mensagem e o padrão que ele utiliza.

Resultado do layout com grid, paleta de cores, e elementos.

Arroz Emoções

5. Validação

Depois de um longo tempo trabalhando no projeto, nosso cérebro já não processa certos detalhes. Então aqui na WD House, como falamos no início temos processos bem rigorosos, e após finalizarmos um layout, nós validamos com toda a equipe tela por tela antes de apresentar para o cliente. Com isso conseguimos validar todo o esforço que colocamos para passar a mensagem, entender o lado do usuário de como ele recebe as informações, e ver se conseguimos atingir o objetivo. E pode ter certeza que este é um dos fatores de sucesso, pois sempre tem algo a melhorar ou fazer de diferente para obter um melhor resultado.

6. Apresentação do layout

Esta é uma etapa bem importante, onde será apresentado o resultado do trabalho para o cliente. Este é um momento marcante no projeto que deve ser agendado com antecedência. Tem que ser uma reunião presencial ou online, não envie ao cliente as imagens no e-mail e peça a aprovação. Este é o momento de apresentar a ideia, de explicar os motivos, e como é uma imagem estática de explicar como irá funcionar, efeitos e até mesmo o fluxo de telas.

7. Validação final

Após a codificação, verifique o site já estruturado e funcional. Revise se está de acordo como foi desenhado, algumas vezes é preciso algumas adaptações para melhorar a experiência do usuário. Teste em todos os navegadores, desktop, tablet e smartphone, garanta que sua entrega será feita conforme planejado e com tudo funcionando.

Então, este é o processo dentro da etapa de web design. Etapas bem elaboradas e com muito estudo para entregar um projeto que funcione em todos os sentidos. Você pode perceber que muito do sucesso do site é de como é pensado o design, pois ele pode influenciar no desempenho do código utilizando poucas fontes, elementos svg, mantendo hierarquia do conteúdo.

Espero que tenham gostado, se gostou, deixe seu comentário abaixo ou também mande suas dúvidas ou sugestão para um próximo artigo.

Até a próxima.
Gabriela Consoni