Os 8 mandamentos de um processo de web design (para iniciantes e sem código)

Publicados: 2021-11-01
processo de webdesign

Descubra como você pode criar um site de sucesso seguindo um processo de design de site estruturado.

Nossa hipótese é que você já tenha encontrado um nome de domínio e um provedor de hospedagem.

Se você ainda não escolheu seu host, recomendamos muito nosso parceiro Cloudways .

No exemplo abaixo, as etapas são apresentadas para o caso em que você está criando um site para você. Se o site for para um cliente, novas etapas podem ocorrer em termos de planejamento do projeto, configuração de prazos, contrato e muito mais. Mas, no fundo, você ainda terá que seguir as etapas apresentadas abaixo.

Agora, aqui estão os passos:

  1. Identificação do escopo : quais necessidades o site deve atender? Com quem o site fala? Quais são seus objetivos e motivadores? Quais empresas têm o mesmo escopo e público-alvo que você?
  2. Definindo o mapa do site do site : quais são as páginas e recursos da web que ajudam o negócio e o público a atingir seus objetivos?
  3. Criação de conteúdo : preparação da cópia para as páginas do site;
  4. Criação da marca visual : preparação da paleta de cores, fontes e gráficos a serem utilizados no design do seu site, que acabarão moldando sua identidade visual;
  5. Wireframing: esboçando o layout de suas páginas da web;
  6. Design do site : criar o site real, estar ciente das limitações das ferramentas que você está usando;
  7. Testando : certificando-se de que tudo funciona, de links a formulários e botões. Teste o site em vários navegadores e dispositivos para garantir que funcione corretamente;
  8. Lançamento: faça barulho antes de entrar ao vivo com uma estratégia de comunicação cuidadosamente planejada.

Vamos levá-los um por um.

As etapas de um processo de design de site

1. Identificação do escopo

Nesta fase, você e sua equipe precisarão descobrir as respostas para algumas das perguntas abaixo:

  • Para quem é o site?

Um site atraente pode ter suas vantagens, mas, se você deseja que os visitantes do seu site comprometam seu dinheiro ou tempo, isso significa que você precisa cavar mais para convencê-los de que o compromisso vale a pena. Para ser convincente, você precisará entender seu público-alvo, entender suas necessidades, motivadores internos e externos.

Essa escavação também significa que você precisa criar um produto que seja útil e resolva a necessidade de alguém.

Por exemplo, digamos que eu tenha como hobby fazer arranjos de flores de papel e queira levá-lo adiante e transformá-lo em um negócio. Alguém faz flores de papel? Onde posso encontrar essas pessoas?

Bem, eu poderia pensar que planejadores de casamentos e futuras noivas podem querer essa opção.

Mas devo ir ainda mais longe. Toda noiva quer minhas flores de papel ou apenas um tipo de noiva?

Isso significa que você precisará fazer algumas pesquisas e verificar seus concorrentes. Existem outros comerciantes de flores de papel? Você também concorre com boas e velhas floriculturas. Qual seria então seu valor agregado ou sua proposta de valor exclusiva?

  • O que os visitantes do seu site esperam encontrar em seu site?

Voltando ao nosso exemplo, provavelmente seus visitantes gostariam de ver uma variedade de produtos, cores, informações de envio (podem precisar de alguns cuidados extras porque as flores de papel são frágeis), etc. Que tal algumas menções de que o papel é reciclado ? Talvez seus clientes estejam muito conscientes de seu impacto no meio ambiente e se preocupem com esses detalhes

Alguém também pode alugar as flores?

Agora, e se você incluir alguns depoimentos? Talvez você tenha desenhado alguns arranjos de flores de papel para o casamento de seus amigos.

Veja onde estou chegando? Você precisa fazer sua pesquisa, antes de saltar para o design do site.

  • Como são as conversões?

Estamos falando de inscrição em curso, compra de um produto, assinatura de newsletter?

No caso de segunda-feira, você pode descobrir facilmente suas conversões na página inicial. Exemplo de página inicial de Monday.com

A principal conversão é óbvia a partir do call to action “Começar”, que está posicionado logo acima da dobra, no centro.

Outra microconversão é um registro de conferência, que você pode observar na mensagem no canto superior esquerdo.

Outra microconversão é a de “Vendas de contato”.

E o seu site, há uma conversão principal? Existem alguns secundários?

  • Como é a jornada do cliente?

Um mapa de jornada do cliente é uma representação visual do caminho que um visitante percorre em seu site desde sua entrada, até atingir o objetivo desejado e sair.

Um mapa de jornada do cliente deve incluir informações como as páginas que são visitadas e em que ordem, os passos necessários para que um visitante do site atinja seus objetivos, os pontos de interação entre sua empresa e os visitantes do site (formulários, chat, etc), pontos de atrito potenciais.

A jornada do cliente não é fixa. Você começa com uma suposição e depois ajusta ao longo do caminho. Você pode usar ferramentas como o Google Analytics para analisar o comportamento do site e fazer otimizações com base em insights reais.

2. Definindo o mapa do site do site Sitemap do site

Fonte

Agora que a jornada do cliente está clara, é hora de criar o mapa do site. O mapa do site de um site é usado para estabelecer a arquitetura de informações do site e explica as relações entre as várias páginas.

Você pode criar sitemaps em ferramentas que vão do Excel ao Figma.

3. Criação de conteúdo Criação de conteúdo do site

Agora que a estrutura do site está estabelecida, é hora de criar conteúdo para as páginas individuais.

Aqui estão algumas práticas recomendadas quando se trata de redação:

  • Use palavras e conceitos familiares aos seus usuários ideais;
  • Não vá com buço e jargão;
  • Tente se comunicar como faria em um encontro cara a cara normal. Dessa forma, você induzirá uma sensação de familiaridade;
  • Escreva no tempo presente e evite a voz passiva;
  • Sempre verifique sua legibilidade. Para isso, você pode usar ferramentas como Readable .
  • Teste suas manchetes com amigos, estranhos, colegas. Como David Ogilvy coloca:

“Em média, 5x mais pessoas lêem o título do que lêem o corpo do texto. Quando você escreveu seu título, gastou oitenta centavos do seu dólar.”

Isso significa que os títulos são vitais em um site.

Tente otimizar seu conteúdo em torno de certas palavras-chave relevantes para seu público (SEO). Você pode usar ferramentas como o Google Trends (gratuito), Ubersuggest (gratuito) ou Ahrefs (pago).

  • Faça uso da estrutura de redação do AIDA.

A – Atenção : crie um conteúdo que chame a atenção, que desperte a curiosidade e que convença o seu público de que ele precisa saber mais sobre a sua marca.

I – Interesse : dê aos seus visitantes um motivo para permanecerem engajados. A chave aqui é tornar o problema pessoal para que você esteja falando apenas com o cliente em potencial e com mais ninguém.

D – Desejo : é aqui que você mostra aos visitantes da sua página inicial como suas ofertas fornecem uma solução para o problema/dor. Aqui você pode começar a explicar os recursos do seu produto, com foco em como esses recursos podem melhorar suas vidas.

A – Ação : agora é hora de persuadir os clientes em potencial a agir: comprar, assinar, baixar um brinde, iniciar um teste, etc.

4. Criando a marca visual

Este passo não precisa ser sempre o seu 4º passo. Você pode começar ainda mais cedo no processo com isso.

A identidade visual refere-se à maneira como você molda a percepção em torno de sua marca.

Este é todo um processo por si só.

Aqui você precisará:

  • Defina como seus gráficos devem ser. Você usará formas, gráficos 3D, ilustrações? Ilustração do Mailchimp

Fonte

  • Defina a tipografia do seu site ; Tipografia

Fonte

  • Escolha uma paleta de cores . Da paleta de cores, você pode evoluir para um guia de estilo, onde você pode estabelecer as cores dos links, títulos, botões, planos de fundo, etc. para isso você pode usar ferramentas como a roda de cores da Adobe . Paleta de cores

Fonte

  • Faça curadoria de imagens que contam a história da sua marca; Imagens selecionadas

Fonte: https://convertsquad.com/blog/

  • Desenhe seu logotipo Design de logotipo

Fonte

  • Preparar ativos físicos (embalagem de produtos, etc). Embalagem do produto

Fonte

A maioria dos elementos acima podem ser usados ​​para criar um mood board. Ao reunir suas fontes, gráficos e cores em um quadro de humor, você poderá entender melhor a visão geral do humor do site. Qual será o seu tom geral e voz: claro ou escuro? Formal ou brincalhão? Mood board usado em um processo de web design

Fonte

5. Estrutura de arame Wireframes para o processo de web design

Fonte

Wireframes são esboços de uma página da Web ou aplicativo. Você pode desenhá-los à mão, criá-los no Google Docs, Sketch ou Figma , dependendo da complexidade do seu site. Um wireframe é usado para layout de conteúdo e funcionalidade em uma página. Deve dizer a um designer onde ele deve colocar um vídeo, imagens, títulos, blocos de conteúdo, botões, etc. É bom usar wireframes antes de entrar no design porque eles permitem que você seja mais flexível. É mais fácil alterar a estrutura de um wireframe do que a de um site pronto.

6. Design do site Design do site

Fonte

Agora estamos falando de negócios!

Temos nosso conteúdo, wireframes, elementos visuais, agora é hora de começar a trabalhar.

Como mencionado no título, você não precisa ser um web designer ou geek de código para criar um site. Existem muitas ferramentas disponíveis para ajudá-lo a criar um site sem código. Eles são chamados de Construtores de Páginas.

A maioria deles permite que você personalize cada centímetro do seu design e o torne responsivo.

Dentro do WordPress, você pode usar nosso próprio construtor Colibri, ou Elementor, por exemplo. Fora do WordPress, Wix e Squarespace são muito populares. Essas ferramentas podem fornecer modelos que você pode enriquecer adicionando suas próprias seções, recursos visuais e conteúdo.

Agora, se o seu design requer certas animações, efeitos, talvez seja necessário adicionar algum código.

7. Teste

Ok, digamos que seu conteúdo e recursos visuais estejam no ar. Seu trabalho ainda não está pronto. É hora de garantir que tudo funcione: você não tem links que levam a lugar nenhum (também conhecidos como links quebrados ou 404s), que todos os seus botões e formulários funcionam, que o site parece bem na maioria dos navegadores e dispositivos.

Agora, antes do lançamento, você pode testar um pouco como seu site é percebido por pessoas externas. Dessa forma, você pode evitar ser pego em seus próprios preconceitos. Para isso, você pode fazer uma simples pesquisa de usuário: o teste de 5 segundos . Este é um método que ajuda você a avaliar qual é a primeira impressão que os usuários obtêm nos primeiros cinco segundos de visualização de uma página inicial, por exemplo

8. Lançamento

Agora, quando você inicia, basta clicar em publicar e pronto. Não, você precisa criar algum buzz, lançar algumas campanhas de relações públicas, fazer uma mensagem nas redes sociais para que as pessoas saibam que você está fora!

E isso é um embrulho pessoal. Agora você tem os passos certos para um processo de web design.

Feliz construção do site!

Se você gostou deste artigo e quer saber mais sobre como criar um site WordPress , não deixe de se inscrever no canal do Colibri no Youtube e nos seguir no Twitter e Facebook!