Montei um resumo das etapas baseado no meu fluxo de trabalho e no infográfico do John Furness, designer e fundador da Simple Square. Nesse infográfico, John Furness considerou o tipo de envolvimento, qual a importância do evento e quem vai executar a tarefa (designer ou cliente).

No meu infográfico, mantive a divisão de tarefas mas preferi simplificar as etapas facilitando o entendimento do processo. A partir da reunião inicial temos:

Explicando as etapas:

1. Preenchimento do briefing

O briefing é a base de informações sobre o site. É um questionário com perguntas sobre os produtos/serviços oferecidos, qual o público alvo, quem são os concorrentes, quais os objetivos a médio e longo prazos, história da empresa etc. Um briefing bem preenchido é o primeiro passo para um projeto de sucesso.

2. Envio do orçamento

Com base nas informações do briefing, consigo saber quais as necessidades da empresa e quais funcionalidades teremos (formulários, sliders, galerias, dashboards, Google Maps, videos, métodos de pagamento para e-commerce etc). Essa é minha base para pesquisa de concorrência, análise dos pontos fortes e fracos e quais as características de mercado do cliente. Envio então um orçamento/contrato detalhado contendo descrição completa do serviço, suas etapas, cronograma, valor e forma de pagamento.

3. Aprovação do orçamento

Assim que o cliente aprovar o orçamento, dou início aos trabalhos.

4. Esboço do site: wireframe e layouts

O primeiro passo é a construção do wireframe, que é um protótipo usado para sugerir a estrutura que o site terá e como ele vai se relacionar com as outras páginas (já falei sobre esse assunto aqui).

O wireframe define quais os assuntos prioritários, a localização ideal de cada elemento e a distribuição dos links em todo o site. Nesse ponto já temos uma ideia geral do conteúdo do site. É o momento onde o cliente deve aprovar a estrutura do projeto.

Já os layouts são a transformação do esboço (wireframe aprovado) em imagens. Aqui é definida a identidade visual do site através da tipografia, paleta de cores, iconografia, fotos, textos etc.

O primeiro layout a ser criado é a Home. Com ela aprovada, partimos para a criação das páginas internas do site.

5. Aprovação do layout

Fase em que o cliente revisa os últimos detalhes gráficos apresentados.

6. Envio do conteúdo

Com os layouts aprovados, o cliente já pode enviar todo o conteúdo do site (fotos, textos, videos, documentos para download etc).

7. Desenvolvimento dos códigos

Aqui o layout aprovado será convertido em linguagem de programação adequada a todos os navegadores. Tecnicamente é dividida em duas partes: o desenvolvimento front-end (construção de tudo o que podemos ver na tela como animações, cores, disposições de texto e imagem, campos etc) e o back-end (tudo o que ocorre nos bastidores do site e invisíveis ao usuário: gerenciamento de banco de dados, segurança das informações, integração de sistemas etc).

Durante o desenvolvimento do código, o site fica disponível para navegação em um endereço provisório, permitindo ao cliente acompanhar todo o processo.

8. Validação

Com todos os códigos desenvolvidos e conteúdos aplicados, é a hora da validação. Baseado na ferramenta de padronização do W3C, consórcio internacional que estabelece padrões de qualidade para sites do mundo todo, serão analisados e corrigidos todos os códigos do site. Para entender melhor, a validação funciona como uma “análise gramatical” que verifica possíveis erros na linguagem de código.

9. Aprovação final

É a última fase de verificação e onde o cliente dá o ok final para a publicação do site.

10. Publicação

Após a aprovação final, é hora de publicar o site. Isso envolve a contratação de um domínio (ex.: www.suaempresa.com.br) e também de uma hospedagem em servidores que tornarão seu site visível para os usuários da web.

—

Cada projeto tem suas próprias demandas assim como cada designer tem seu próprio método de trabalho. Aqui eu dividi em 10 fases com um tempo médio de produção entre 45 e 60 dias.

Após a publicação, o mais indicado é que o cliente faça um contrato de manutenção do site. Isso garante backups periódicos, suporte técnico, atualizações, verificações de vírus, entre outras tarefas. É a garantia de que todo o trabalho terá continuidade e funcionamento perfeito.

Saiba quanto custa a manutenção de um site mensalmente.

Então, um wireframe é um layout que demonstra quais elementos da interface existirão nas páginas do site.

Veja porque o wireframe é importante:

• Estabelece a estrutura das páginas antes de definir o visual, evitando retrabalho
• Ajuda a entender quais assuntos serão abordados e suas prioridades
• Determina os espaços para todos os itens e onde estarão localizados
• Estabelece a distribuição dos links e como será a jornada do usuário

O objetivo do wireframe é fornecer um entendimento visual básico de uma página no início de um projeto a fim de obter a aprovação da equipe e do cliente antes que a fase criativa comece. Os wireframes também podem ser usados ​​para criar a navegação do site e garantir que a estrutura usada atenda à expectativa do usuário.

Além disso, alterar um wireframe é bem mais fácil e rápido do que um design conceitual.

Definindo os wireframes

É importante lembrar que os wireframes funcionam apenas como guias. Não devem ter ilustrações, fotos e nem blocos de texto. Apenas elementos referenciais. Dessa forma, não é necessário usar cores, imagens e nenhuma tipografia específica (no máximo uma diferenciação de títulos e subtítulos definindo proporções).

Os wireframes podem variar de simples rascunhos no papel até pequenos sistemas criados no computador com detalhes mais bem definidos.

Os de baixa fidelidade ajudam na comunicação da equipe do projeto e são relativamente rápidos no desenvolvimento. São mais abstratos e costumam usar imagens simples (quadrados, textos falsos, círculos simbolizando ícones, riscos definindo links etc.).

Os wireframes de alta fidelidade são melhores para a documentação devido ao seu maior nível de detalhe. Esses wireframes geralmente incluem informações sobre cada item específico da página, incluindo dimensões, comportamento e/ou ações relacionadas a qualquer elemento interativo.

É importante lembrar que, mesmo não havendo a participação direta do redator e do designer nesse estágio (eventualmente), todo o processo deve ser elaborado com o consentimento de toda a equipe. Inclusões de textos, novas seções e novas imagens podem ocorrer no meio do processo e isso deve ser previsto no wireframe também.

Vantagens e desvantagens do wireframe

Uma das grandes vantagens do wireframe é que ele fornece uma ideia inicial que pode ser usada como revisão junto ao cliente e a equipe. Além disso, um wireframe aprovado pelo cliente dá segurança ao designer na hora de criar o layout. Como os wireframes não incluem nenhum design, nem sempre é fácil para o cliente entender o conceito. Dependendo do cliente, pode ser uma desvantagem.

…..

Fonte (adaptado):
Sachintha Keddagodage