Etapas importantes para se criar um Site

Etapas importantes para se criar um Site



Author Eduardo Rubinato


Twitter linkedin Facebook

Qualquer pessoa hoje em dia pode criar um site. Contudo, como acontece em todo o projeto é necessário entender as suas etapas, desde a concepção do seu site, lançamento, gerenciamento, pós-lançamento e dimensionamento.

Abaixo, procuro detalhar um passo a passo de como eu trabalho projetando sites - começando com a concepção, lançamento, gerenciamento pós-lançamento e dimensionamento do site.

Etapas para projetar um site 

1. Defina o escopo e as metas de seu site

Esteja você projetando um site para você ou para um cliente, é sempre necessário definir claramente o propósito e os objetivos. Ter o propósito e os objetivos do site bem definidos é como você conseguirá obter audiência.

Até, porque a principal razão pela qual existem sites é ter a marca visível e atingir maior número de usuários do seu público alvo.

Assim as empresas e marcas investem pesadamente em suas mídias sociais, branding, conteúdo e website para atingir seu público-alvo e construir relacionamentos. 

Às vezes, os clientes virão até você com um propósito, metas, objetivos, sua marca e conteúdo já definidos. No entanto, também virão clientes ocasionais que precisam de sua experiência para coordenar uma reformulação completa de seu site, seu conteúdo e marca atual. Seja qual for à circunstância, esses clientes apresentam à você uma tela em branco pronta para você com seu conhecimento e bom gosto para fazer uma obra-prima. 

Portanto, é ainda mais necessário iniciar abordando o que precede o design da web, que é a fase de definição e planejamento. Esta é talvez a etapa mais importante da web design e, portanto, seria uma injustiça se não explorássemos essa etapa antes de chegar ao tópico central em questão.

O porque

Seu propósito é simplesmente o seu “porque ”. 

Não faz sentido investir seu tempo e dinheiro em um site se você não tiver uma idéia clara do propósito da existência dele.

Definir o porque é definir o seu "problema, solução e mercado", mas para um site, por exemplo: se você tem a tarefa de criar um site de comércio eletrônico ou uma loja online, deve primeiro encontrar os problemas e as soluções para o público-alvo com o qual deseja se conectar. 

Dito isso, ao responder a essa pergunta, você utilizará métodos usados na experiência do usuário e na estratégia de negócios. Estamos falando aqui de questionários de UX, planos de projeto, workshops de oportunidade, tours de escuta e assim por diante. Esses métodos de planejamento e descoberta são muito menos complexos do que parecem e, portanto, valem muito a pena o esforço. 

Eles serão ferramentas úteis para você usar quando for construir a identidade da sua marca e, posteriormente, projetar o site. Além disso, eles fornecerão os meios para entender melhor o propósito e os objetivos pretendidos. 

O que?

Depois de definir o porque, ou seja, a finalidade, você precisará abordar os objetivos do site: o que este site pretende alcançar?

É aqui que você revisitará suas notas tiradas dos questionários, workshops de oportunidade e tours de escuta. Leia as “entrelinhas” e examine as respostas. Onde em suas anotações estão o problema, a solução, o mercado, o valor etc..

Definindo o “O que” você conseguira saber “O Como”. 

O Como prepara o caminho pois identifica o seu público, bem como as oportunidades possíveis de fornecer valor a eles (por meio do seu propósito). 

O Como

É aqui que você utiliza suas descobertas do porque e as transforma em um site. 

Nesta etapa também é onde o processo de design pode finalmente começar!  

Mas, primeiro, você precisa ajustar os objetivos.

Por exemplo: seu cliente tem um pequeno negócio de venda de cerâmica e ele veio até você para fazer um site de comércio eletrônico para gerar mais leads (porque). Depois de se sentar com eles e sua equipe, todos vocês redefiniram seu propósito de não apenas vender cerâmica, mas criar uma comunidade online para entusiastas da cerâmica (o quê). 

Você, sendo o designer analise suas anotações pós-entrevista e descubra outra oportunidade de se conectar com o público alvo, transformando sua idéia de loja online de cerâmica em algo mais parecido com uma marca online. 

Assim você proporciona uma experiência que os distinguirá da concorrência e criará uma base de consumidores fiéis. Isso exige algo mais do que um site, exige conteúdo, marca, um esquema de cores, paleta e muito mais. Este é o seu como - como você se propõe a alcançar o porque e o quê. 

Mas isso levanta também a próxima questão: como vou fazer para criar essa experiência de marca? 

De onde tirar a inspiração ao afirmar para seu cliente que sua visão aumentará os leads, validará seus investimentos, bem como seus próprios esforços? 

O design começa com a descoberta e depois se concretiza por meio de pesquisas sólidas.

2. Pesquise para planejar seu conteúdo

Uma vez tendo o propósito, as metas e os objetivos claros, e à hora de apresentar estas definições ao público alvo. 

Planejando seu conteúdo com pesquisa

Este tipo específico de web design não exige pesquisa de UX, em vez disso, um pouco de pesquisa de IU. Olhe para a concorrência do seu cliente, o que eles estão fazendo e quem é o mercado deles? Como você pode atrair seu público por meio de um design atraente?

Pesquise a concorrência, extraia o que funciona em seus sites e aprimore esses componentes observando as tendências de design e pesquisas de mercado. Obtenha a inspiração a partir daí. 

Além disso, o design constitui elementos visuais e escritos. Certifique-se de estudar a linguagem usada nos setores e / ou indústria de seu cliente, ou de sua concorrência, e aproveite essas descobertas como você faria com os elementos visuais durante o estágio de pesquisa.

Criação de um quadro de inspiração

Depois de reunir suas notas e percepções dessa pesquisa, um quadro de inspirações. Os painéis são ideais porque permitem que você consolide suas descobertas e as transforme em uma representação mais visual. Eles podem servir de base para quando você construir a identidade da marca .

3. Crie a identidade do seu site 

Identidade de marca é o precursor final do design. Quer você tenha decidido ou não redigir um quadro com algumas inspirações, é necessário construir uma identidade de marca. 

Desenvolver a identidade de uma marca é o que distingue seu trabalho de outros, atrai seu mercado, torna seu site inesquecível e gera bons leads para você ou seu cliente.

Haverá momentos em que um cliente já terá sua identidade de marca estabelecida e buscará seus serviços para implementação em um site. No entanto, haverá ocasiões em que você será procurado para serviços mais "completos". Portanto, é parte do título, como designer, conhecer os elementos importantes da identidade da marca, assim como você conhece os princípios do design. 

 

A roda de cores (ou círculo de cores)

A cor talvez tenha o impacto mais profundo na identidade de uma marca, pois dita o tom geral e o humor de uma marca em relação ao usuário imediatamente após a chegada ao site. Todos nós sabemos disso - cores vivas transmitem felicidade, cores suaves transmitem uma espécie de seriedade, a falta de cor torna o foco à informação e não a marca. 

Existe uma psicologia por trás da cor, portanto, faça questão de usar a cor a seu favor. Um esquema de cores escolhido pode melhorar a identidade de uma marca e a experiência do consumidor. Existem muitas ferramentas de cores que podem ajudá-lo a identificar o esquema de cores certo a ser usado.

Tipografia

 

Quando empregada estrategicamente, a tipografia pode ser usada como um dispositivo criativo para comunicar significado. Não apenas em suas palavras, mas na própria fonte. A tipografia pode moldar e construir a identidade de uma marca e o reconhecimento de um usuário. Ele pode prender a atenção deles e transmitir tons e humores gerais, da mesma forma que as cores. 

Alguns dizem que a tipografia tem um impacto psicológico mais profundo do que a cor, alguns acreditam que a cor é o concorrente mais forte. Quaisquer que sejam os extremos do espectro em que você se enquadra, a tipografia é expressiva e tem um impacto convincente na psique humana.  

Imagens

O elemento visual final da identidade da marca de um site são as imagens. Elas podem atuar como um elemento central de design para a identidade de marca, tanto para conteúdos de mídia social ou blog. 

As imagens também podem ir além do uso de fotos; abrangendo uma ampla variedade de elementos que se reúnem em uma página da web. Ícones, ilustrações e animações podem compensar as imagens em um site. 

 As imagens são um elemento interessante, pois também podem ser uma simples brincadeira com o espaço em branco em uma página da web para criar um melhor equilíbrio no layout ou destacar um CTA (call to action).  

Certifique-se de que as imagens que você escolher deve ser coerente com a aparência do site. Imagens inapropriadas, ou que não tenham a ver com a mensagem a ser passada, podem desconsiderar inteiramente a identidade de uma marca como um todo.  

Funcionalidade

A funcionalidade pode facilmente passar despercebida, mas pode fazer maravilhas para aprimorar a experiência de um site e distingui-lo de marcas concorrentes.

Funcionalidade não é uma necessidade, mas quando incorporada de forma eficaz pode levar uma marca a novos patamares. No entanto, nem toda marca precisa de personalizações e estilizações em seu site. Por isso, é essencial conhecer a marca do seu cliente e o público-alvo antes de criar seus modelos funcionais hiperestilizados.  

Estilo e personalidade

Cor, tipografia, imagem, funcionalidade se unem para comunicar o estilo geral e a personalidade da marca. O trabalho como web designer é reunir esses elementos de design para ilustrar a identidade desejada para seus clientes na forma de um site. 

Cada um dos elementos listados acima empresta estrutura um ao outro, assim como a descoberta e os métodos de pesquisa fazem e farão. A parte empolgante é ver esses elementos se unirem para estabelecer uma experiência de usuário de alta qualidade para a marca e seus usuários. 

4. Prototipação (wireframes)

Depois de definir o escopo e as metas do projeto, reunir seu conteúdo e definir sua marca é hora de conceituar o layout do seu site. Isto é, criar um protótipo (wireframes).

Quando você pensa em wireframes, pense em relação ao esboço de um arquiteto. É conceitual. O objetivo é dar estrutura e direção. No entanto, não é o produto acabado. Os wireframes devem ser iterados. Eles servem quase como instrução e, portanto, não são inteiramente finitos, pois são simplesmente plantas do potencial design pretendido de um site ou aplicativo móvel. 

No entanto, isso não quer dizer que wireframing não seja essencial. Mesmo que você decida seguir em frente usando um modelo ou um clonável em sua ferramenta de desenvolvimento escolhida, você ainda precisa de algum tipo de direção ou visão para permitir que você conceitualize e visualize o conteúdo e o layout do design do seu site.

Qualquer que seja o meio que você usa para abordar seu design de wireframe é do seu interesse pelo menos ter um design de esboço (ou design de wireframe usando sua ferramenta de design preferida, tais como: Figma, InVision, Adobe Xd, etc..

Otimize seu conteúdo, postando wireframes antes do design

Estamos quase na fase de desenvolvimento, contudo, precisamos abordar as oportunidades potenciais de SEO que podem surgir se você otimizar seu conteúdo antes de iniciar o design.   

Lembre-se de que existe um site para gerar leads e convertê-los em nova clientela. Isso é possível em teoria, no entanto, existem mais de 4,45 bilhões de sites indexados somente no Google... 

Assim ao finalizar a identidade da sua marca, sente-se e organize um mapa do site (ou uma lista de todas as páginas da web pretendidas que serão incluídas em seu site). Liste todo o conteúdo e cópia dessas páginas e, em seguida, as palavras-chave e frases-chave que se correlacionam com o referido conteúdo e cópia. Além disso, certifique-se de olhar os URLs e imagens alt do seu site e especificar as palavras-chave que podem ser usadas em seus metatags e descrições.

Além disso, reserve um tempo para mergulhar no processo de otimização de seu conteúdo antes de começar o design. 

5. Escolha sua plataforma de construção de web preferida

Com sua identidade determinada e conteúdo reunido, agora você pode passar para a próxima etapa, escolhendo sua plataforma de construtor web. 

Seja usando WordPress, Wix, Squarespace e Shopify, Pinegrow, Webflow e até mesmo desenvolvendo na mão. No entanto, é importante sempre levar em conta os prós e os contras de determinada plataforma para que ela não afete o desempenho e usabilidade do seu site.

6 - Construindo o site

Agora, finalmente é hora de começar a projetar. Se você seguiu os conselhos apresentados para dar corpo ao propósito e à identidade do seu site, a "diversão" pode finalmente começar!

Atualmente eu trabalho usando o Visual Studio Code e um framework Codeigniter para construção dos sites que eu projeto, contudo existem várias opções para quem sabe programar ou não. 

Na minha visão o ideal para o Designer que ele se propõe a trabalhar com criação de sites é que ele entenda de Html5, Jquery, Css, Minificação, Gzip, pois isso é usado com muita freqüência na construção de sites.

Veja, você pode graças as construtores de sites criar um site sem estes conhecimentos, contudo, você ficará refém da plataforma e muitas vezes dependendo da escolha a rapidez e usabilidades do seu site ficará comprometida.

7. Realize testes de usuário

Embora possa parecer um passo extra, não é. O teste de usuário é simplesmente o método para garantir que após o lançamento, a interface do seu site bem como o fluxo de usuário alcançou as metas definidas. Mesmo que o fluxo não seja tão complexo quantos alguns projetos de UX, você fará bem em conduzir esses testes essenciais.

Reserve um tempo para mostrar seu site a seus colegas ou amigos. Registre seus insights e faça perguntas para feedbacks. Isso pode ser moderado ou não moderado,  dependendo do seu gosto e da complexidade do site. 

8. Publique o site

Uma vez que o design está completo, os testes e feedbacks foram satisfatórios chegou a hora de publicar o site :).

whats