Desenvolvimento de sites em 7 passos simples

Web designers muitas vezes pensam sobre o processo de design web com foco em questões técnicas, tais como wireframes, código e gerenciamento de conteúdo. Mas o design excelente não é sobre como você integra os botões de mídia social ou até mesmo imagens visuais. O grande design é realmente sobre a criação de um site que alinha com uma estratégia abrangente.

O desenvolvimento de sites bem desenhados oferece muito mais do que apenas estética. Ele atrai visitantes e ajuda as pessoas a entender o produto, a empresa e a marca através de uma variedade de indicadores, abrangendo visuais, textos e interações. Isso significa que cada elemento do seu site precisa trabalhar em direção a um objetivo definido.

Mas como você consegue essa síntese harmoniosa de elementos? Através de um processo de design web holístico que leva em consideração a forma e a função.

Conheça os 7 estágios para o desenvolvimento de sites

1) Identificação da meta : onde eu trabalho com o cliente para determinar quais objetivos o site precisa cumprir. Ou seja, qual é o propósito.

2) Definição do escopo : uma vez que conhecemos os objetivos do site, podemos definir o escopo do projeto. Ou seja, quais páginas e recursos do site requer para cumprir o objetivo, e a linha de tempo para construir isso.

3) Criação de sitemap e wireframe : com o escopo bem definido, podemos começar a cavar no sitemap, definindo como o conteúdo e os recursos que definimos na definição do escopo irão inter-relacionar.

4) Criação de conteúdo : Agora que temos uma imagem maior do site em mente, podemos começar a criar conteúdo para as páginas individuais, sempre mantendo a otimização do mecanismo de pesquisa para ajudar a manter as páginas focadas em um único tópico. É vital que você tenha um conteúdo real para trabalhar na nossa próxima etapa:

5) Elementos visuais : com a arquitetura do site e alguns conteúdos, podemos começar a trabalhar na marca visual. Dependendo do cliente, isso pode já estar bem definido, mas você também pode definir o estilo visual desde o início. Ferramentas como telhas de estilo, moodboards e colagens de elementos podem ajudar com esse processo.

6) Testando : Até agora, você tem todas as suas páginas e definiu como elas são exibidas para o visitante do site, então é hora de garantir que tudo funcione. Combine a navegação manual do site em uma variedade de dispositivos com rastreadores de sites automatizados para identificar tudo, desde problemas de experiência de usuário até links simples quebrados.

7) Lançamento! Uma vez que tudo está funcionando lindamente, é hora de planejar e executar o lançamento do seu site! Isso deve incluir o planejamento de tempo de lançamento e estratégias de comunicação - ou seja, quando você vai iniciar e como você vai deixar o mundo saber? 

Agora que esboçamos o processo, vamos cavar um pouco mais fundo em cada etapa.

1. Identificação do objetivo

O estágio inicial é tudo sobre a compreensão de como você pode ajudar seu cliente.Nesta fase inicial, o designer precisa identificar o objetivo final do site, geralmente em estreita colaboração com o cliente ou outras partes interessadas. Perguntas para explorar e responder nesta etapa do processo incluem:

Para quem é o site?
O que eles esperam encontrar ou fazer lá?
O objetivo principal deste site é informar, vender ou divertir?
O site precisa transmitir claramente a mensagem principal de uma marca, ou faz parte de uma estratégia de branding mais ampla com seu próprio foco exclusivo?
Quais sites concorrentes, se houver, existem, e como esse site deve ser inspirado por / diferentes do que esses concorrentes?

Esta é a parte mais importante de qualquer processo de web design. Se essas perguntas não forem todas claramente respondidas no resumo, todo o projeto pode entrar na direção errada.

Pode ser útil escrever um ou mais objetivos claramente identificados, ou um resumo de um parágrafo dos objetivos esperados. Isso ajudará a colocar o design no caminho certo. Certifique-se de entender o público-alvo do site e desenvolver um conhecimento prático da concorrência.

Para mais informações sobre este estágio, verifique " O processo de design web moderno: definir metas ".

Ferramentas para o estágio de identificação do objetivo do site

Pessoas de audiência
Resumo criativo
Análises de concorrentes
Atributos da marca
 

2. Definição do escopo

Um dos problemas mais comuns e difíceis que assolam projetos de design web é o escopo do escopo. O cliente define com um objetivo em mente, mas isso gradualmente se expande, evolui ou muda completamente durante o processo de design - e a próxima coisa que você conhece, você não está apenas projetando e construindo um site, mas também um aplicativo da Web, e-mails , e notificações push.

Este não é necessariamente um problema para designers, pois muitas vezes pode levar a mais trabalho. Mas se as expectativas aumentadas não forem acompanhadas por um aumento no orçamento ou cronograma, o projeto pode tornar-se completamente irrealista rapidamente.

A anatomia de um gráfico de Gantt.Um gráfico de Gantt, que detalha uma linha de tempo realista para o projeto, incluindo quaisquer marcos importantes, pode ajudar a estabelecer limites e prazos viáveis. Isso fornece uma referência inestimável para designers e clientes e ajuda a manter todos focados na tarefa e nos objetivos em mãos.

Ferramentas para definição de escopo

Um contrato
Gráfico de Gantt (ou outra visualização da linha de tempo)
 

3. Criação de sitemap e wireframe

Um sitemap para um site simples. Observe como ele captura a hierarquia da página.O sitemap fornece a base para qualquer site bem projetado. Isso ajuda os designers a ter uma idéia clara da arquitetura de informações do site e explica as relações entre as várias páginas e elementos de conteúdo.

Construir um site sem um sitemap é como construir uma casa sem um plano. E isso raramente resulta bem.

O próximo passo é construir o wireframe. Os wireframes fornecem uma estrutura para armazenar o design visual e os elementos de conteúdo do site e podem ajudar a identificar possíveis desafios e lacunas no sitemap.O sempre incrível Timothy Noah criou  um kit de wireframing do Webflow que você pode clonar de graça .Embora um wireframe não contenha elementos de design finais, ele atua como um guia para o aspecto do site. Alguns designers usam ferramentas lisas como Balsamiq ou Webflow para criar seus wireframes. Eu, pessoalmente, gostaria de voltar ao básico e usar o papel e lápis de confiança.
 

4. Criação de conteúdo

Quando se trata de conteúdo, SEO é apenas metade da batalha.Uma vez que a estrutura do seu site está em vigor, você pode começar com o aspecto mais importante do site: o conteúdo escrito .

O conteúdo tem dois propósitos essenciais:
 

Objetivo 1. O conteúdo gere o engajamento e a ação

Primeiro, o conteúdo envolve os leitores e os leva a tomar as ações necessárias para cumprir os objetivos de um site. Isso é afetado pelo conteúdo em si (a escrita) e como é apresentado (a tipografia e os elementos estruturais).

A prosa absurda, sem vida e prolongada raramente mantém a atenção dos visitantes por muito tempo. O conteúdo curto, rápido e intrigante os agarra e faz clicar em outras páginas. Mesmo que suas páginas precisem muito de conteúdo - e muitas vezes, eles fazem - adequadamente "fragmentar" esse conteúdo, dividindo-o em pequenos parágrafos, complementados por recursos visuais, podem ajudá-lo a manter uma sensação leve e atraente.
 

Objetivo 2: SEO

O conteúdo também reforça a visibilidade de um site para os motores de busca. A prática de criar e melhorar o conteúdo para classificar bem na pesquisa é conhecida como otimização de mecanismos de busca ou SEO .

Obter suas palavras-chave e frases-chave corretas é essencial para o sucesso de qualquer site. Eu sempre uso o Google Keyword Planner. Esta ferramenta mostra o volume de pesquisa para possíveis palavras-chave e frases de destino, para que você possa aprimorar o que os seres humanos reais estão buscando na web. Enquanto os motores de busca estão se tornando cada vez mais inteligentes, também as estratégias de conteúdo. O Google Trends também é útil para identificar os termos que as pessoas realmente usam quando pesquisam.

O meu processo de design centra-se na concepção de sites em torno de SEO. Palavras-chave que você quer classificar para ter uma posição na etiqueta do título - mais perto do início, melhor. As palavras-chave também devem aparecer na etiqueta H1, meta descrição e conteúdo corporal.

O conteúdo bem escrito, informativo e rico em palavras-chave é mais facilmente buscado pelos motores de busca, o que ajuda a tornar o site mais fácil de encontrar.

Normalmente, seu cliente produzirá a maior parte do conteúdo, mas é vital que você forneça orientação sobre quais palavras-chave e frases devem incluir no texto.Muito demais para uma postagem no blog, Lisa, mas um trabalho brilhante!
 

 

5. Elementos visuais

Finalmente, é hora de criar o estilo visual para o site. Esta parte do processo de design geralmente será moldada por elementos de marca existentes, escolhas de cores e logotipos, conforme estipulado pelo cliente. Mas também é o estágio do processo de web design onde um bom web designer pode realmente brilhar.

As imagens estão assumindo um papel mais significativo no design web agora do que nunca. Não só as imagens de alta qualidade proporcionam ao site uma aparência profissional, mas também comunicam uma mensagem, são amigáveis ​​para dispositivos móveis e ajudam a criar confiança.

O conteúdo visual é conhecido por aumentar cliques, envolvimento e receita . Mas, mais do que isso, as pessoas querem ver imagens em um site. Não só as imagens tornam a página menos complicada e fácil de digerir, mas também aumentam a mensagem no texto e podem até transmitir mensagens vitais sem que as pessoas precisem ler.

Recomendo usar um fotógrafo profissional para obter as imagens corretas. Basta ter em mente que imagens maciças e lindas podem atrasar consideravelmente um site. Uso Optimizilla para compactar imagens sem perder qualidade, economizando em tempos de carregamento de página. Você também quer se certificar de que suas imagens são tão sensíveis quanto o seu site .

O design visual é uma forma de se comunicar e atrair os usuários do site. Certifique-se, e pode determinar o sucesso do site. Fique errado, e você é apenas outro endereço da Web.

 

6. Testes

Uma vez que o site tem todos seus visuals e conteúdo, você está pronto para testar.

Teste completamente cada página para garantir que todos os links estejam funcionando e que o site seja carregado corretamente em todos os dispositivos e navegadores. Os erros podem ser o resultado de pequenos erros de codificação e, embora seja frequentemente uma dor para encontrá-los e corrigi-los, é melhor fazê-lo agora do que apresentar um site quebrado ao público.

Nota do editor: Recomendo a Spider Spider Screaming Frog para este estágio. Ele permite que você faça muitas das tarefas de auditoria padrão tudo em uma única ferramenta, e é grátis para até 500 URLs.

Tenha uma última olhada nos meta títulos e descrições da página também. Mesmo a ordem das palavras no meta título pode afetar o desempenho da página em um mecanismo de pesquisa.

O Webflow possui um excelente artigo sobre o processo de pré-lançamento .

 

7. Lançamento

Agora é hora da parte favorita de todos os processos de design web: quando tudo foi completamente testado e você está feliz com o site, é hora de lançar.Não fique excitado demais, mas ... estamos quase lá!Não espere que isso vá perfeitamente. Pode haver ainda alguns elementos que precisam ser consertados. O design da Web é um processo fluido e contínuo que requer manutenção constante.

O design da Web - e realmente, o design em geral - é tudo sobre encontrar o equilíbrio certo entre forma e função. Você precisa usar as fontes, cores e motivos de design corretos. Mas a forma como as pessoas navegam e experimentam o seu site é tão importante.

Os designers qualificados devem ser bem versados ​​neste conceito e capazes de criar um site que caminha na delicada corda bamba entre os dois.

Uma coisa importante a lembrar sobre a fase de lançamento é que não está perto do final do trabalho. A beleza da web é que nunca foi concluída. Uma vez que o site fique vivo, você pode executar continuamente testes de usuários em novos conteúdos e recursos, monitorar análises e refinar sua mensagem.
 

Como está o seu processo?

Você está seguindo um processo de design similar ou o seu parece radicalmente diferente? 
Nós gostaríamos de ouvir tudo sobre isso, então comente abaixo.