Processo de criação de site [Guia completo]

Neste guia completo você aprenderá como funciona o processo de criação de site – para que solicite melhores orçamentos (ou cobre as etapas de desenvolvimento do projeto de seu web designer contratado).

Vamos supor que você seja dono de uma empresa e gostaria de destacar o seu negócio nas pesquisas do Google. Para isso, você precisa de um site.

Existem milhares de web designers qualificados no mercado – você não terá dificuldade em encontrá-los.

Você pede 3 orçamentos – Um de R$ 300,00, outro de R$ 1.000,00 e outro de R$ 3.000,00.

Qual é a diferença entre eles? O que esperar de um web designer e como escolher o melhor orçamento?

Entenda como funciona o processo de criação de sites seguindo todas as seções deste guia e domine o assunto antes de solicitar vários orçamentos – e não saber ao certo quais pontos cruciais você deve ter maior atenção.

O processo é formado por 5 etapas:

• Wireframe
• Codificação
• Otimização
• Funcionalidades
• Manutenção

Wireframe

O wireframe é o rascunho inicial do site. É um esboço que deve ser criado e aprovado por você para dar continuidade ao projeto.

O esqueleto inicial é formado por menu, seções, títulos, parágrafos, botões, ícones, imagens…

O que você deve fazer: organize em uma pasta todo o conteúdo que for importante para o projeto – como logo, identidade visual, fotos da equipe, imagens da fachada da empresa.

O que o web design deve fazer: planejar a diagramação do conteúdo enviado no wireframe do projeto.

Algumas perguntas importantes:

• Qual a tipografia utilizada?
• Qual a paleta de cores?
• Quais os tamanhos das fontes (título, subtítulos, parágrafos, botões)?
• O design é mais orgânico ou geométrico?
• Qual será a principal chamada à ação?
• Como será estruturada as seções?

Essas serão algumas das perguntas que o web designer deve fazer antes de começar a criar a ideia inicial do site e iniciar a busca por inspirações.

Sim, é isso mesmo que você leu. Inspirações…

Por maior que seja a experiência e habilidade de um web designer – nenhum grande projeto começa sem antes buscar ideias de projetos já existentes.

Agora, para garantir a máxima qualidade do design e experiência do usuário (UX) – é necessário estudar ótimos projetos. Só assim virão ótimas inspirações.

Não estou falando que os web designers copiam layouts uns dos outros. Cada projeto é único e demanda características completamente diferentes.

Mas, se você olhar bons sites – a chance de criar bons sites aumentarão. Se analisar sites ruins… você terá maior chance de copiar aspectos ruins.

Nunca se baseie nas cores ou projetos de seus concorrentes locais. Busque os melhores projetos do seu segmento de atuação a nível global.

Recomendação: você já conhece o site dribbble.com?

Imagine um lugar que reúne trabalhos de milhares de profissionais na área de design.

O Dribbble (com 3 letras “b” mesmo) é uma fonte essencial para a construção de um bom wireframe.

Mas, qual a ferramenta para fazer o wireframe?

Muitos web designers utilizam o Photoshop (que é uma ótima ferramenta para o wireframe). Mas, existem dezenas de ótimas opções no mercado.

Recomendação: você já ouviu falar do Figma? Ferramenta ideal para protótipos – que podem ser compartilhados facilmente com pessoas ao redor do mundo com um simples link.

Após a conclusão do desenho inicial do projeto utilizando o Figma, existe uma simples opção de compartilhamento – que permite o cliente acompanhar o trabalho que vem sendo realizado pelo web designer – o que facilita o feedback do cliente.

Lembra no início da matéria sobre o orçamento de R$ 300,00?

Então, provavelmente ele não vai ter essa etapa importante do desenvolvimento web.

Todo o processo de diálogo e feedback entre você e o web designer demanda tempo e comprometimento com o projeto.

Orçamentos baratos podem deixar a desejar essa etapa de planejamento.

Seguindo o processo para criar sites – depois que o rascunho for feito e aprovado por você, segue a etapa de codificar.

Codificação

A etapa de codificação consiste em transformar o rascunho inicial do projeto em uma linguagem que os navegadores de internet podem ler.

Quando você abre um site no Google Chrome, por exemplo, o navegador está lendo arquivos em HTML, CSS e JavaScript dentro de uma pasta que está hospedada em algum computador.

O navegador processa esses arquivos e renderiza para mostrar à você a página do site.

Por exemplo, essa postagem que você está lendo agora nada mais é do que vários códigos que são lidos e traduzidos pelo navegador.

Você não pode simplesmente pegar o rascunho, criar imagens e mostrar no site como se fossem fotos.

As ferramentas de pesquisa, como o Google, não entenderão qual é o conteúdo real do site, e as chances de ranquear serão muito baixas.

O web designer precisa estruturar o conteúdo de uma forma que os navegadores entendam o que é título, imagem, menu e formulário da página.

Para isso, existe o HTML.

Entenda a seguir como funciona o HTML, CSS e JavaScript na composição do site – de forma breve para que domine todos os aspectos importantes do tema.

O que faz o HTML?

O HTML é o esqueleto do site – a estrutura responsável pela hierarquia das informações mostradas.

Vamos supor que sua empresa seja um restaurante italiano em São Paulo. Seria interessante mostrar ao Google que essa informação é o título principal da página inicial do seu site, certo?

Para fazer isso, é necessário escrever a frase entre as tags <h1>.

<h1>Restaurante italiano em São Paulo</h1>

Pronto, agora o Google saberá que essa é a principal frase da página – ajudando em seu ranqueamento.

O que faz o CSS?

O CSS é responsável pelo estilo e formatação dos elementos presentes no site.

Por exemplo, vamos supor que a frase acima deva ser escrita em vermelho. Para isso, é uma boa prática utilizar classes CSS.

<h1 class="vermelho">Restaurante italiano em São Paulo</h1>
Code language: HTML, XML (xml)

Depois, o web designer deve adicionar o seguinte código CSS dentro do projeto para que o HTML consiga ler o que significa ter a classe “vermelho” no título.

.vermelho {
color: red;
}
Code language: CSS (css)

Pronto. Utilizando as etapas acima o título principal do site aparecerá em vermelho.

O CSS pode realizar pequenas animações também, que podem ser atrativas ao usuário e complementar sua experiência ao navegar pelas páginas.

O que faz o JavaScript?

O JavaScript é uma linguagem de programação integrada aos navegadores para permitir a leitura de <script> possibilitando interações avançadas do usuário com o site.

Por exemplo, para saber quantas pessoas acessaram seu site em um determinado período é necessário adicionar um <script> do Google Analytics em todas as páginas do site.

Animações de pop-ups, troca de abas e avisos podem ser obtidos com a ajuda do JavaScript.

Depois de codificar o projeto – está na hora de melhorar todos os seus aspectos para garantir a melhor experiência possível de navegação.

Otimização

A otimização consiste em aprimorar a experiência do usuário com o site em todos os aspectos.

• O site deve abrir em menos de 3 segundos para manter a atenção do usuário
• O layout deve ser responsivo, mudando sua formatação dependendo do tamanho do dispositivo utilizado (computador, tablet ou celular)
• O conteúdo das páginas deve ser revisado. O objetivo principal da página está sendo cumprido? (por exemplo: pegar emails, conseguir contatos pelo formulário, ou ganhar curtidas nas redes sociais)

Confira abaixo uma breve explicação de cada passo da otimização.

Velocidade

Existem várias maneiras de melhorar a velocidade de acesso de um site. Segue abaixo algumas delas:

• Ter um servidor rápido
• Instalar um plugin de cache
• Configurar um CDN
• Reduzir o tamanho das imagens
• Remover tudo o que não será utilizado

Sempre que é dito ‘servidor’ você pode traduzir para computador. Um servidor que hospeda um site nada mais é do que um computador ligado 24h por dia que mostra o conteúdo de pastas solicitadas ao digitar o domínio no navegador.

Ativar uma solução de cache é importante para pré-carregar o site e oferecer seu conteúdo mais rapidamente para os usuários que o acessam. Confira aqui mais informações sobre plugin de cache.

Dentre as soluções estão minimizar o tamanho dos arquivos HTML, CSS e JavaScript, carregar imagens apenas quando aparecerem na tela (lazy loading), entre outros…

Layout responsivo

É uma boa tática criar o layout para computador primeiro – e depois o layout para tablets e celulares.

Utilizando o “media queries” do CSS é possível dizer ao navegador para alterar o layout de duas colunas (que fica bom para computadores) para o layout de uma coluna apenas (ideal para celulares).

Hoje em dia, grande parte dos usuário estão buscando informações no Google utilizando o celular – portanto, é essencial ter um site responsivo.

Além disso, existem as novas tecnologias Google AMP e Facebook Instant Articles para acesso do conteúdo do site de forma instantânea pelo celular.

Você pode conhecer mais sobre elas clicando aqui.

Alteração de conteúdo

Nem sempre todos os textos e informações do site precisam estar completos antes da conclusão do projeto.

É normal adicionar novos produtos e serviços que sua empresa começou a oferecer – ou adicionar pratos no menu online de seu restaurante – após um tempo que o site já estiver disponível para acesso.

Para isso, confirme com seu web designer se o conteúdo será editável – e como você fará o acesso para realizar as alterações.

Veja na imagem abaixo como funciona uma adição de produto no ecommerce utilizando os plugins WooCommerce + Elementor + ACF.

Pergunte em seu orçamento como será feita a edição do conteúdo – e peça para ver exemplos a partir de fotos da interface (como a imagem mostrada acima).

Após o cadastro no back-end, veja como é mostrado esses campos para o usuário do site (front-end):

Confira mais informações sobre a plataforma WordPress na próxima seção deste guia.

Funcionalidades

Existe uma ferramenta que facilita a criação de sites com funcionalidades avançadas – e ela se chama WordPress.

Mais de 25% dos sites no mundo são construídos nessa plataforma.

E qual o motivo para tamanho sucesso (em um mercado com várias opções de construtores de site)?

A comunidade é gigantesca e ativa.

Existem milhares de postagens e tutoriais sobre WordPress – facilitando a entrada de novos desenvolvedores no mercado.

E a tendência é de crescimento. Novos desenvolvedores estão se especializando em WordPress – devido ao maior alcance de pessoas.

Portanto, criar o seu site na plataforma WordPress significa ter à sua disposição vários desenvolvedores e uma forte comunidade.

Confira abaixo algumas das funcionalidades possíveis em sites WordPress:

• Ecommerce
• Blog
• Plataforma para doações
• Fórum de suporte
• Plataforma de cursos

São diversas as possibilidades. Uma funcionalidade extra pode ser desde um formulário de contato mais avançado (com dezenas de opções e envio de arquivos) até uma solução ecommerce completa.

A correta configuração de funcionalidades extras pode ser tão difícil quanto todas as outras etapas juntas. Por isso, saiba exatamente o que está sendo oferecido pelo seu web designer antes de contratar os seus serviços.

Você se lembra dos orçamentos de R$ 1.000,00 e R$ 3.000,00?

É nessa etapa, dependendo da complexidade do projeto, que não existe um limite para um custo do projeto – por isso, é importante dominar e conhecer o básico de cada tarefa solicitada para entender o porquê do valor proposto em orçamento.

Manutenção

Nesta etapa verifique se o web designer oferece o serviço de hospedagem de sites e quanto custa a hora de trabalho dele.

Para que seu site fique no ar sempre que um cliente potencial acessar – é necessário ter uma hospedagem estável e de qualidade.

Entenda a seguir o que é uma hospedagem de sites.

Hospedagem

O seu site (conjunto de arquivos HTML, CSS e JavaScript) dentro de uma pasta (igual você tem em seu computador) precisa de um servidor (computador) ligado 24h por dia.

Isso gera custos (energia elétrica, depreciação do computador, etc).

Muitos web designers freelancers ou agências oferecem planos com hospedagem de site já inclusa.

Além disso, é importante avaliar qual é o custo de alterações no site. Geralmente, é cobrado por hora de trabalho.

Não confunda hora de trabalho (desenvolvimento de layout, edição de conteúdo, criação de imagens no Photoshop) com a hospedagem de site.

É possível ter algumas pequenas alterações no site inclusos no valor da hospedagem, mas isso depende de cada web designer.

Alguns benefícios que a hospedagem pode oferecer:

• Certificado SSL (criptografia)
• Caixas de email corporativo
• Backups periódicos
• Suporte via email e WhatsApp

O certificado de segurança SSL deixou de ser apenas um diferencial de confiança. O Google informou que os sites criptografados terão preferência na ferramenta de busca.

Além disso, é importante ter backups em caso de uma possível incompatibilidade após a atualização de um plugin – ou qualquer outro erro que comprometa os acessos ao site.

Um suporte rápido via email ou WhatsApp também é sempre bem-vindo.

Pergunte como funciona a manutenção ao solicitar seu orçamento – e evite qualquer surpresa depois que todo o projeto for entregue.

Quais são os próximos passos após a conclusão do projeto?

Por curiosidade, saiba também quais são os melhores caminhos para divulgar seu site na internet.

• Invista no Google Adwords Express. Mostre sua empresa para quem pesquisa seus produtos e serviços na região.
• Escreva postagens no blog do site e apareça organicamente nas pesquisas do Google para as principais palavras-chave de sua empresa.

Conclusão

Este guia apresenta etapas consolidadas para a criação de sites. Agora, você consegue entender melhor como funciona o desenvolvimento de um projeto e conseguirá melhores orçamentos, além de poder cobrar melhor as tarefas de seu web designer.

Mas, é importante frisar que existem diversas formas de criar sites – e que este guia deve servir apenas como base e não como o único caminho. Cada web designer domina diferentes ferramentas para desenvolver rascunhos, codificar e otimizar seus sites.

Espero ter esclarecido alguns pontos do processo para você. Caso tenha qualquer dúvida sobre o conteúdo deste guia pode entrar em contato comigo por email ou WhatsApp.

Por gentileza, comente abaixo ou avalie pelo computador esse guia. O seu feedback é muito importante para mim.

Agradeço sua companhia até aqui.

Abraço e até a próxima!