Sites assim possuem muito mais chances de gerar clientes fieis, de aumentar vendas e de estarem nas primeiras posições do Google.
Existe um senso comum que diz que para fazer um site basta um programador, o que em parte é verdade.
Mas na produção de sites que tragam resultados existem outros profissionais e campos científicos envolvidos como Design, Artes, Arquitetura, Marketing,Publicidade e Jornalismo.
Tudo isso? Sim, tudo isso. Vou te explicar o porque.
Um artista tem condições de fazer um site muito bonito, porém talvez não tenha condições de fazer um site com experiência agradável, o que coloca o projeto na categoria “bonitinho, mas ordinário.”
Por isso nos últimos anos surgiu o profissional de UX Design (Design de Experiência do Usuário), que busca através de conhecimentos dos campos científicos citados acima, criar sites com visual de impacto e ótima experiência para os clientes.
Além desse profissional, existem outros como o Arquiteto da Informação, que cria toda a planta do site (assim como um arquiteto de construções) e O UI Designer, que é mais focado no visual (antigo web designer).
Esses profissionais atuam antes da programação, e os programadores só inicias seus trabalhos quando tudo o que esse pessoal projetou for aprovado pelo cliente.
Em média, essas são as etapas que a maioria das agências passam para criar sites e lojas virtuais de sucesso:
- Estudo do Briefing
- Estudos de Arquitetura da Informação e Experiência do Usuário
- Produção dos Wireframes
- Estudos de Identidade Visual
- Produção do Layout
Estudo do Briefing
O briefing é um documento muito importante e que servirá como estrela norte para os profissionais que criarão seu site ou e-commerce.
No documento, a agência pedirá algumas informações sobre a empresa e sobre os objetivos do site.
Um bom briefing será capaz de coletar as seguintes informações:
Conteúdo
O conteúdo é o motivo pelo qual as pessoas entrarão no seu site. Por exemplo, uma loja virtual tem como conteúdo seus produtos. Já o site de uma empresa tem como conteúdo a oferta de serviços.
Além disso, vídeos, blogs, notícias, pesquisas, infográficos, formulários também podem ser considerados conteúdo de site.
Contexto
O contexto nada mais é do que os objetivos do site. Por exemplo, o contexto de um e-commerce pode ser aumentar o faturamento através de um novo canal: a internet.
O site pode ter outros contextos como informar as pessoas em casos de portais de notícias, entretenimento em caso de blogs de memes ou ainda retirar dúvidas como no caso de fóruns e enciclopédias online.
Usuário
O usuário são as pessoas que se interessaram pelo conteúdo do site. Por exemplo, uma loja virtual de calçados femininos atrairá mais usuários mulheres do que homens, porque elas se interessam mais que eles pelo produto.
É importante que a empresa já conheça seu perfil de público-alvo e personas antes de preencher o briefing, assim evitando que agência crie um site bom para o usuário errado.
O Briefing também recolherá informações gerais como as redes sociais da empresa, a necessidade de responsividade e os sites referências do cliente.
Com todas essas informações documentadas, os profissionais estudarão o briefing e entrarão em contato em casos de dúvidas.
Estudos de Arquitetura da Informação e Experiência do Usuário
Arquitetura da Informação
No briefing as agências pedem para que os clientes citem sites ou e-commerces que os agradem seja no visual, nas funcionalidades, na arquitetura, etc.
A ideia não é copiar essas referências, mas sim inspirar-se naquilo que há de bom e evitar aquilo que está ruim.
Lembra-se do Conteúdo, Contexto e Usuário recolhidos do Briefing? Esses 3 itens são a base do trabalho do Arquiteto da Informação! Por isso é importante que o Briefing recolha informações desses 3 tópicos.
Há muitos sites diferentes internet afora. Existem alguns que contém apenas uma página enquanto outros contém mais de cem mil páginas.
Para organizar sites gigantescos com muito conteúdo, o Arquiteto da Informação é o profissional recomendado para esse trabalho.
Para definir como será a arquitetura do site, o profissional poderá utilizar algumas metodologias como o Card Sorting:
Card Sorting
O arquiteto criará cartões, cada um com um conteúdo do site e então uma pessoa que se encaixe no perfil de usuário separará esses cartões em categorias.
O Card Sorting pode ser aberto, quando o usuário tem liberdade para criar novas categorias para inserir um conteúdo, ou fechado, quando o arquiteto as defini de ante mão.
Com o resultado, o arquiteto terá mais segurança na categorização e estruturação dos links e conteúdos do site.
Experiência do Usuário
A experiência e Usabilidade de um site é muito importante para que o usuário não se decepcione na hora de usar.
Para esclarecer essa questão, falarei sobre algo que me irrita muito em algumas lojas virtuais:
O valor do frete no Brasil é o maior obstáculo das lojas virtuais. Por isso eu prefiro saber o quanto de frete pagarei antes de apertar o botão comprar.
Porém, muitas lojas não disponibilizam o cálculo de frete na página do produto e isso me deixa irritado.
Essa é uma “estratégia” que muitos lojistas usam imaginando que o usuário pensará “Bom, já vim até aqui mesmo, vou comprar com esse valor de frete mesmo.”
O que eles não sabem é que mais de 80% dos carrinhos são abandonados no E-commerce brasileiro.
A melhor coisa a se fazer nesse caso, em vez de irritar o usuário, é possibilitar o cálculo do frete já na página de produto.
O profissional apto para gerar boas experiências digitais é o Designer de Experiência do Usuário, mais conhecido como UX Designer.
A experiência do Design é tão importante que ela pode ser considerada fator para estar na primeira página do Google.
Um site com experiência de usuário ruim terá taxas de rejeição muito altas, o que apontará para o Google que o site não é útil para o usuário.
Um site pode ser considerado bom quando o usuário consegue cumprir seus objetivos em pouco tempo e sem se perder e são esses objetivos o foco do trabalho do UX designer.
Produção dos Wireframes
O Wireframe é um passo muito importante, e às vezes ignorado pelos clientes. O objetivo dessa ferramenta é definir a disposição dos conteúdos, categorização dos menus e as ideias de interações que foram geradas.
Algumas vezes os clientes ficam um pouco chateados, pois existe um senso comum de que trabalhos artísticos são feitos de forma rápida e por isso quando veem o wireframe acabam fazendo algumas colocações como “esse é o visual final?” ou “eu queria ver algo mais finalizado”
Quem, assim como eu, trabalha com produção visual sabe o trabalho que dá para criar uma boa opção de layout.
Já pensou se um engenheiro faz um prédio sem seguir uma planta? As chances de acidentes mais graves acontecerem são muito altas!
Da mesma forma acontecerá se um designer produzir um site ou loja virtual sem um wireframe bem-feito antes, as chances do projeto não entregar os resultados esperados são muito altas.
Existem diversas ferramentas para se fazer wireframes, inclusive é possível fazer bons wireframes com lápis e papel.
Porém, em casos de agência, é muito importante pensar na apresentação do projeto e por isso ferramentas de edição vetorial ou de imagem como Photoshop, Illustrator e Corel Draw são mais recomendadas.
Existem também ferramentas próprias para a criação de wireframes como o Axure que dá a possibilidade de construir wireframes navegáveis e interativos.
Estudos de Identidade Visual
Com o wireframe aprovado pelo cliente é possível iniciar os estudos para criação do visual do site.
Através do estudo de referências, do briefing e da identidade visual do cliente, algumas questões serão definidas antes de ser iniciado a produção do layout.
Conceito do Layout
Os conceitos do layout são os adjetivos que o visual do site deverá transmitir. Limpo, moderno, tecnológico, simples, clássico, assustador são palavras que podem ser definidas para um site.
Muitas vezes o cliente sabe bem o que quer em relação ao visual do site e definirá isso muito bem no briefing.
Porém, nem sempre isso acontece a caberá ao time de criação definir os conceitos do projeto.
Paleta de cores
A paleta de cores definirá as cores que o site usará. Não é por que um projeto tem o conceito colorido que o designer utilizará um monte de cor sem nenhum critério.
Definir as cores é muito importante porque além de toda a ciência física por trás delas, ainda há o significado da cor que pode ser diferente para cada cultura.
Como você pode ver no infográfico acima, existem cores que combinam melhor com outras e também a atribuição de significados.
Uma ferramenta muito usada para definição de paletas de cores é o Adobe Kuler, que conta com uma biblioteca de paletas que podem ser usadas e alteradas.
Fontes
As fontes usadas nos textos de um site também são muito importantes para reforçar os conceitos escolhidos, além de que uma boa fonte é essencial para a leitura.
Existem milhares de fontes grátis e pagas mundo afora, porém assim como no caso das cores, não é recomendado usar muitas no projeto. Se o site tiver mais de 3 fontes, perderá a consistência e terá uma identidade visual fraca.
O site mais famoso para encontrar fontes é o Google Fontes. Nele existe uma infinidade de fontes grátis disponíveis para download e também para incorporar direto ao seu site, caso você já possua um.
Iconografia
A informação visual é mais rápida de ser interpretada do que a textual e por isso muitos sites utilizam ícones em vez de texto, ou ainda usam ícone e texto para deixar mais claro ainda.
Existem vários estilos iconográficos e todos os ícones do site devem seguir o mesmo padrão.
Os ícones acima são do site Flaticon, o maior site de ícones do mundo. Lá é possível baixar ícones individuais ou em pacotes, o que garante a padronização do estilo iconográfico.
Elementos Visuais
Sites com elementos muitos diferentes geram estranheza, então por isso definir estilos de imagens, estampas, grafismos e ilustrações é essencial para que o site não fique inconsistente.
Existem diversos serviços para baixar elementos visuais grátis como o Freepik e também pagos como o Shutterstock.
Se o cliente deseja fotos únicas no seu site, terá que pagar por um fotógrafo para isso, pois as agências web geralmente trabalham com banco de imagens.
Já as estampas, grafismos e ilustrações podem ser criadas pelo próprio designer da agência. Caso o cliente procure por um estilo mais característico de ilustração terá que contratar um ilustrador.
Inspiração
Trabalhar com criatividade não é fácil, pois existem dias em que ela simplesmente não vem e ter ideias originais parece impossível.
Por isso muitos profissionais buscam inspirações em sites como Pinterest, behance, Dribble para romper com o bloqueio criativo.
Esses sites contam com milhares de imagens de projetos feitos por excelentes profissionais para quem está sem ideias.
No Pinterest, ainda é possível salvar imagens de qualquer lugar da internet em quadros e por isso é muito usado por profissionais criativos.
Produção dos layouts
Depois de ter todos os conceitos, paletas de cores, fontes, estilo iconográfico e estilo de elementos definidos chegou a hora de botar a mão na massa.
A maior parte dos designers trabalham com os programas da Adobe. Muitos deles podem ser usados para criar sites como o Photoshop, Illustrator, Fireworks e o Muse.
A produção respeitará o wireframe, de modo que o designer não possui permissão para alterar o posicionamento dos elementos.
Depois de pronto, os layouts podem ser prototipados em ferramentas como o Invisionapp. Esses protótipos são muito legais para apresentar a ideia para o cliente e já ter uma ideia de como será a navegação do site.
Se o cliente aprovar, o site é enviado para que a programação inicie seus trabalhos. Caso contrário, o designer corrigirá o que o cliente não gostou e assim será até que o mesmo aprove.
Conclusão
Depois desse trabalho todo, os profissionais envolvidos podem dar uma relaxada, tomar a bebida de preferência e partir para o projeto seguinte.
Depois que a programação do site estiver pronta, o UX designer ainda fará um teste para ver se tudo está de acordo com o wireframe e o layout aprovado.
Caso esteja tudo certo o site está preparado para ser lançado e ter os seus primeiros visitantes.
Esses são os passos necessários para criar um site ou loja virtual que traga resultados para o seu negócio.
Abaixo você confere nossa postagem como infográfico.
