Um concorrente tem um aspeto cuidado em todos os ecrãs. Outro parece apertado e desatualizado, embora os dois vendam serviços parecidos. A diferença costuma estar no processo de design e nos hábitos que estão por trás dele. Notas logo a diferença, mesmo que ainda não saibas dar nome a todas as regras.
O processo de design vai da pesquisa e dos objetivos até aos esboços, ao feedback e ao acabamento final. Este capítulo explica o que isso significa em linguagem simples, porque afeta o teu website e o teu marketing, e como o aplicar sem te perderes em jargão. Vais ver também como o design gráfico entra no mesmo quadro. Vamos passo a passo.
Como funciona o processo de design
O processo de design vai da pesquisa e dos objetivos até aos esboços, ao feedback e ao acabamento final.
Os wireframes ficam muitas vezes entre as ideias em bruto e o design visual completo.
Um processo de design claro evita retrabalho caro no fim de um projeto.
Fases que podes usar em qualquer projeto
Escreve os objetivos, o público e as secções obrigatórias antes de abrires uma ferramenta de design.
Primeiro vem a pesquisa, depois a disposição em bruto e só no fim o acabamento visual. Saltar logo para as cores e os tipos de letra costuma criar retrabalho.
Os wireframes e a estrutura ligam-se diretamente a o que é um wireframe e a exemplos de bom design de website neste módulo.
Lista prática que podes usar hoje
Escreve os objetivos, o público e as secções obrigatórias antes de abrires uma ferramenta de design.
Quando reveres qualquer página, pergunta-te se o processo de design é visível logo no primeiro deslize no telemóvel. Se não for, reordena as secções antes de polires os detalhes.
Guarda capturas de ecrã antes e depois das alterações, para perceberes o que fez a diferença no processo de design do teu site.
Partilha esta lista com quem atualiza o teu site, para que o design gráfico se mantenha consistente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou os formulários iniciados, para que as alterações de design se liguem aos resultados do negócio e não apenas ao gosto.
Como este tema se liga à tua marca em geral
As escolhas visuais raramente vivem numa só página. Os wireframes ficam muitas vezes entre as ideias em bruto e o design visual completo.
As tuas publicações nas redes sociais, os teus emails e os teus materiais impressos devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras de tipografia que usas na web.
Quando o visual da marca se desvia, os clientes sentem uma discrepância subtil, mesmo que não saibam explicá-la.
Usa mau design de website para comparar notas com um capítulo relacionado deste módulo.
Um processo de design claro evita retrabalho caro no fim de um projeto.
Perguntas que muita gente ignora
Termos secundários como o que é design gráfico e o que é um wireframe ajudam-te a procurar exemplos mais profundos e a comparar o teu trabalho com os padrões habituais.
Os wireframes ficam muitas vezes entre as ideias em bruto e o design visual completo.
Escreve uma alteração de antes e depois que vais testar numa página ativa esta semana. Pequenas edições medidas valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum sobre o processo de design reduz os ciclos de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código personalizado para melhorar muitos problemas de disposição e de estilo. Um editor visual permite-te ajustar espaços, cores e tipografia enquanto vês a pré-visualização em telemóvel e computador.
O WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperar por um programador a cada pequeno ajuste. Abre o criador de websites quando estiveres pronto para aplicar o que aprendeste.
Quando publicares atualizações, volta a ver o que é um wireframe e exemplos de bom design de website, para que o módulo continue ligado na tua cabeça.
Já tens uma lente de trabalho para o processo de design. Usa-a quando reveres o teu site, aprovares materiais de marketing ou deres instruções a um designer. Continua com exemplos de bom design de website e mau design de website para manteres o ritmo neste módulo.
Perguntas frequentes
Quanto tempo demora a melhorar o processo de design?
A maioria das pequenas empresas vê páginas mais claras ao fim de poucas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela página inicial e depois aplica as mesmas regras às páginas de serviços e de contacto.
Precisas de um designer para trabalhar o processo de design?
Um designer ajuda em mudanças de imagem complexas, mas muitas correções ligadas ao processo de design podem ser feitas por ti, quando já sabes o que procurar. Usa o que é um wireframe a par deste capítulo para teres orientação relacionada.
O WEMASY pode ajudar-te a aplicar o processo de design no teu website?
O WEMASY inclui um editor visual no criador de websites, para ajustares a disposição, as cores e a tipografia sem código. Abre o criador de websites para atualizar modelos e pré-visualizar as alterações no telemóvel.
Qual é o erro mais comum no processo de design?
As pessoas tentam corrigir tudo de uma vez em vez de uma página de cada vez. Escolhe uma única prioridade, como a legibilidade ou o contraste, e depois consulta exemplos de bom design de website para a melhoria seguinte.
Como se liga o processo de design ao SEO?
Uma hierarquia visual clara e uma tipografia legível mantêm os visitantes mais tempo na página, o que apoia os sinais de envolvimento que os motores de pesquisa observam. Junta as correções de design a uma boa estrutura de conteúdo para teres os melhores resultados.
Onde deves aprender a seguir ao processo de design?
Continua com o que é um wireframe e exemplos de bom design de website neste livro, para construíres um sistema visual completo para a tua marca online.