Produção de um site: 6 etapas que não podem faltar

Quando se trata de construir um site, é útil ter um processo a seguir, especialmente se você está apenas começando como web designer. Boas diretrizes podem ajudá-lo a trabalhar melhor, reduzindo o esquecimento ao mínimo.

Cada designer ou empresa desenvolverá componentes exclusivos para seu processo de design da web ao longo do tempo, mas o básico permanece o mesmo: aprender, planejar, projetar, codificar, lançar e manter.

Neste artigo, compartilharei meu processo de criação de site.

Antes de entrarmos nisso, deixe-me primeiro compartilhar dois processos paralelos que devem ocorrer em todo o seu processo de design.

A primeira coisa que você deve fazer continuamente é buscar feedback . Você economizará muito tempo e esforço perdidos ao obter feedback em intervalos regulares.

A segunda coisa que você deve fazer continuamente é testar. Teste tudo ao longo do caminho para evitar dor de cabeça pelo caminho.

Ótimo, agora vamos começar com o processo de 6 etapas para a produção do seu site!

1. Aprenda

Qual você acha que é a etapa mais importante do processo de design da web? Planejamento? Projetar? Codificar?

Não deve surpreendê-lo que aprender – descobrir e entender o que você precisa construir em primeiro lugar, é a parte mais importante de todo o processo da criação do site.

Por quê? É realmente simples. Quanto mais você souber sobre o que precisa realizar, melhores serão suas chances de criar um site de sucesso.

Pense assim: se você é um arqueiro, não precisa saber para onde apontar sua flecha? É para isso que serve o alvo. O pontinho vermelho no meio é o alvo. Por ser menor, é mais difícil de acertar, mas mesmo se você mirar e errar, com certeza chegará mais perto do que atirasse aleatoriamente.

Então, como você pode um alvo com uma criação de site. Antes de prosseguir, você precisa definir o que significa acertar o alvo em seu projeto.

Como um web designer, acertar o alvo é dar aos seus clientes o que eles querem, é pelo que eles estão pagando.

O que os clientes desejam varia muito, caso a caso. Já que você não é um leitor de mentes, você precisa descobrir proativamente o que eles querem.

Em alguns casos, eles podem nem saber o que querem e, em outros casos, podem ter dificuldade em verbalizar o que imaginaram porque não conhecem termos e conceitos do setor como CSS, Ajax ou bancos de dados.

Briefing criativo

Felizmente, existe uma ferramenta que os web designers podem usar para reunir facilmente essas informações. É chamado de briefing. Um briefing criativo é basicamente uma série de perguntas que você faz a seus clientes para que possa entender o escopo e os objetivos de um projeto.

Você pode fazer essas perguntas durante uma reunião presencial ou por telefone, ou pode simplesmente disponibilizar um formulário via Google forms.

Você deve obter essas informações da maneira que você e seus clientes se sentirem mais confortáveis, mas faça o que fizer, não pule o briefing porque ele se tornará a força vital do seu projeto.

Que tipo de perguntas você deve fazer em seu briefing? No mínimo, descubra:

• O público-alvo do cliente
• Seus objetivos primários e secundários para o site
• Características atuais da marca
• Concorrentes
• Diferenciais

Também gosto de perguntar aos clientes quais sites eles gostam e não gostam para me dar uma ideia visual de para onde devo ir e o que devo evitar.

Você também pode querer saber se eles precisam de uma loja online, se eles já têm um logotipo (se não, você pode fazer um para eles ), quem será responsável por manter o site assim que entrar no ar e assim por diante.

Você pode ter perguntas exclusivas que deseja incluir; use-os e sempre adapte suas perguntas por projeto.

2. Plano

Depois de aprender o que você precisa construir, é hora de começar a planejar como você fará isso acontecer. Antes de começar a projetar um site, você precisa saber exatamente o que e como projetá-lo, e tudo começa com a criação de uma estratégia de design.

Sua estratégia de design para cada site que você fizer deve ser feita à mão para se adequar à visão do cliente (se você estiver projetando um site para si mesmo, você se qualificaria como o cliente ).

Então, quais fatores irão moldar sua estratégia de design? O briefing funcionará como a base do seu plano, fornecendo-lhe algumas informações básicas, como quais são os seus prazos e quem é o público-alvo do site.

É especialmente importante conhecer seu público, porque isso afetará onde e como o site será visualizado. 

Pesquisa e anotações

Quaisquer que sejam as lacunas deixadas no quadro estratégico, você deverá preencher algumas pesquisas. Agora é a hora de visitar sites concorrentes e ver quais tipos de designs já existem no mercado-alvo, para que você saiba como diferenciar seu próprio design.

Veja quem aparece primeiro em uma pesquisa no Google, daí você começar a juntar as peças para dar início ao seu projeto.

Enquanto você está pesquisando, você também começará a pensar sobre quais cores usar, onde colocar as chamadas para ação, que tipo de fontes você deve usar e outros detalhes semelhantes.

Nesse ponto, você também deve fazer anotações, tirar capturas de tela e iniciar uma prancha de temperamento.

Esboço e organograma

Em seguida, é hora de criar um organograma e começar a deixar suas ideias assumirem um estado mais tangível. Gosto de começar esboçando minhas ideias em um pedaço de papel normal, como fazem muitos outros web designers.

Outras pessoas preferem usar uma ferramenta de wireframe. Durante essa fase, você não só vai querer começar a pensar seriamente sobre o layout do site, mas também sobre a estrutura do seu site e como a navegação será configurada.

Esta é a sua chance de ver o que funciona melhor e um bom lugar para experimentar diferentes ideias antes de usar o Photoshop ou o Illustrator para criar algo mais concreto.

Escolha suas ferramentas

Esta parte do processo também é a oportunidade perfeita para avaliar quais ferramentas você precisará usar. Você absolutamente não deve cair no padrão de usar um conjunto predeterminado de ferramentas para cada site que criar. É uma prática potencialmente perigosa para todos os envolvidos, incluindo os usuários finais do site e o cliente (sem mencionar o quão monótono seu portfólio pareceria).

Pense bem sobre qual sistema de gerenciamento de conteúdo funcionaria melhor considerando os objetivos do site.

3. Design

Eu sei que existem muitos web designers por aí que gostam de pular diretamente para o estágio de design sem pensar duas vezes no aprendizado ou planejamento, mas o design é mais do que apenas o ato de criar. Você deseja realmente criar algo bom e útil, mas você simplesmente não poderá fazer isso sem primeiro fazer um trabalho preliminar antes de começar a projetar.

Se você já fez o trabalho braçal de aprendizado e planejamento, isso torna o projeto real muito mais fácil. Quando você não precisa se preocupar com pequenos detalhes, isso realmente abre um novo nível de eficácia e produtividade porque você pode se concentrar em coisas mais importantes.

Quando estiver pronto para começar a projetar, lembre-se de que você precisa projetar mais do que apenas uma página inicial. Você também precisará de um design para as subpáginas do seu site. Às vezes, pode ser fácil projetar um conceito de página inicial, dividi-lo e começar a codificar apenas para chegar às subpáginas sem ter direção. Você também pode precisar criar uma versão mobile do seu site.

A fase de design em si é direta. Basta abrir o Photoshop (ou a ferramenta de criação gráfica de sua escolha) e começar a dar vida ao seu organograma. Se preocupe com os detalhes. Torne-o pixel perfeito. Mesmo que você sinta que o projeto em que está trabalhando é mais cansativo do que ficar olhando para a parede por 24 horas seguidas, coloque todo o seu empenho nele. Seu cliente perceberá e você ficará orgulhoso do trabalho que realizou.

Você terá que decidir neste ponto se deseja usar conteúdo real em seu design ou algum texto fictício (por exemplo, Lorem Ipsum ). Eu pessoalmente prefiro usar conteúdos e fotos reais, se estiverem disponíveis, para torná-las o mais próximo possível da realidade.

Durante a fase de design, é extremamente importante buscar feedback com freqüência para garantir que todos os requisitos especificados foram atendidos. Se o cliente deseja fazer alterações, agora é a hora de fazê-lo antes que o design seja codificado, tornando dez vezes mais difícil fazer o que seria uma alteração simples se você fizesse durante a fase de design.

4. Código

Depois de ter um design matador, você precisará transformá-lo em um site real e ativo. Uma aposta segura, não importa com qual sistema de gerenciamento de conteúdo você vai trabalhar, é começar com um modelo genérico de HTML e CSS.

Comece com um modelo básico

Se você for como eu, você já tem um conjunto de arquivos HTML e CSS iniciais prontos para uso que já estão vinculados entre si e já contêm algum código inicial básico.

Antes de prosseguir, é uma boa ideia adicionar seu título, descrições e metatags ou, pelo menos, anotar o que devem ser se você for usar um sistema de gerenciamento de conteúdo posteriormente.

Esquematize as seções principais e o conteúdo

Comece a dividir seu HTML / CSS inserindo as seções principais (suas principais <div>) para o cabeçalho, rodapé e área de conteúdo.

Em seguida, comece a adicionar seu conteúdo de texto e imagem. O objetivo é manter sua marcação o mais semântica possível para que cada elemento seja significativo.

Evite divitis – o ato de utilizar muitos divs. Por exemplo, você não precisa de um div apenas para conter o logotipo. Tente usar um <h1>ou um <p>– ele pode ser estilizado exatamente da mesma maneira (por exemplo, transformá-los em elementos de bloco usando a display propriedade CSS).

Validar e testar

Não se esqueça de certificar-se de que seu código é validado usando a ferramenta de validação fornecida pelo W3C.

Você também precisará fazer alguns testes de navegador para garantir que o site tenha a aparência e aja conforme o esperado e forneça uma experiência, independentemente de como o usuário o acessa.

Use Firebug e YSlow para depurar seu site e certifique-se de que seu trabalho esteja funcionando em uma velocidade ideal .

Uma última coisa: não se esqueça de implementar o Google Analytics ou sua alternativa analítica favorita para que você não perca o rastreamento das estatísticas durante a produção.

5. Produção

Quando você finalmente aperfeiçoou o site, é hora de lançá-lo ao público. O lançamento pode significar coisas diferentes para pessoas diferentes, principalmente porque existem vários sistemas de gerenciamento de conteúdo e circunstâncias de desenvolvimento por aí.

Por exemplo, se você está redesenhando um site que usa um sistema de gerenciamento de conteúdo ou plataforma de publicação, seu lançamento pode ser tão simples quanto aplicar um novo tema.

Se você estiver projetando um site totalmente novo em uma área restrita ou ambiente de desenvolvimento local , “ir ao ar” significa enviar seus arquivos por FTP para o servidor de produção.

6. Manter

Durante a fase de planejamento, você deve ter determinado quem será o responsável pela manutenção do site. Se um cliente não puder manter o site, você pode sugerir que ele o contrate regularmente ou conforme necessário para gerenciar e executar tarefas de manutenção.

Durante a transferência / encerramento do projeto, também pode ajudar a fornecer algumas diretrizes e treinamento básico para seu cliente para certificar-se de que ele entende como manter o site de maneira adequada.