Este artigo tem por objetivo te atiçar sobre a criação de um processo bem definido, e caso não se identifique com a atividade “criação de site”, você pode abstrair os conceitos macros e aplicar em sua área de atuação.
Como eu disse há alguns artigos, para mim é fácil falar sobre construção de site porque faz parte de quase 80% do meu dia, tirando os momentos onde estou no YouTube consumindo besteirol.
E para agregar ao seu arcabouço de referências, eu vou falar um pouco sobre as 5 etapas para a idealização de um site. O conteúdo que trarei a seguir está repleto de conceito por trás da criação de um processo bem definido, então, leia com a mente muito aberta.
Antes de começar
O que eu costumo chamar de passo zero é a compreensão da existência daquela demanda. Por que quem te procurou quer fechar um site?
Existem diversos motivos para que uma pessoa tenha um site, e quanto mais profundo este motivo for, melhor a forma de metrificarmos o sucesso da nossa entrega.
E este objetivo do site será o pilar para a etapa seguinte: o briefing.
Briefing
Já falei dezenas de vezes aqui no Designerd sobre briefing, e não devia ser diferente, é o assunto mais fundamental de todos em relação ao desenvolvimento de um trabalho criativo.
Caso ainda não tenha visto nada sobre Briefing, confira o artigo que escrevi sobre os 4 P’s do briefing. Confere lá e depois volta pra cá.
Partindo do ponto que já conhece a importância de um bom briefing, podemos dar sequência ao nosso projeto, fixando o objetivo principal e elencando tópicos que serão importantes para a construção do site.
Mas o que é importante?
Além de termos o objetivo ou os objetivos bem definidos, precisamos de outras informações que nos ajudarão a escolher uma linha estética e de comunicação.
E foca nessa palavra: decisão. Design é a arte de ter um infinito de possibilidades, mas selecionar apenas as fundamentais ao objetivo.
Por esse motivo que eu não vejo o Design desalinhado de métricas, números, resultado.
As informações que lhe serão úteis nesta etapa de pesquisa são:
- O que a marca é
- O que a marca não é
- Qual mensagem quer passar
- Qual mensagem não quer passar
- Como ela se comunica
Na minha opinião, essas 5 perguntas acima são essenciais para um briefing de site, e com certeza te nortearão durante as etapas seguintes.
Mapa do site
Também conhecido como Sitemap, o mapa do site é uma forma de documentar e validar as informações que o site vai conter, organizadas em prol de favorecer a jornada do usuário.
E por sua vez, a jornada do usuário é uma previsão que o designer faz sobre os passos que o usuário vai percorrer em seu produto, seja ele um site, aplicativo ou sistema.
As perguntas que você precisa se fazer no momento da construção de um mapa do site é:
- Onde essa informação faz sentido?
- Como fazer essa chamada ser contextual?
- Qual a solução mais lógica?
Claro que no final das contas, não é tão simples assim. Design de interface envolve uma pancada de outros fatores, e o mais sensível deles é o fato de estarmos tratando com seres humanos, e seres humanos são complexos e imprevisíveis, além de fugirem um pouco da lógica racional.
Voltando ao mapa do site, normalmente, a entrega dessa etapa é feita no formato de mapa mental, ou com um desenho que melhor favorece o fluxo de navegação.
Atualmente eu trabalho com mapas mentais e não tem me dado problemas em relação à apresentação para o cliente, nem para a minha assimilação nas etapas futuras.
Wireframe
Feito o mapa do site, vamos tornar aquelas informações visuais.
Lembra que te disse que Design envolve excluir uma série de informações por outras que realmente fazem sentido a determinado objetivo? No Wireframe isso acontece com toda força.
Não existe apenas uma solução para determinado problema de comunicação. Existem dezenas de milhares, e a forma como isso me angustia você não faz ideia.
E o meu perfil de designer é testador. Faço dezenas de testes, crio pranchetas paralelas para validar a solução que faz mais sentido, coloco o briefing na jogada para confirmar as minhas hipóteses e dou uma pausa para assentar meu humor.
Para você entender melhor, vamos imaginar o seguinte: você precisa fazer um componente de depoimento. Mas, pensa comigo, não existe apenas uma solução que resolve isso.
Existem milhares de soluções para um componente de depoimento em um site.
O que faz com que a decisão seja a mais adequada? Volte no briefing e reveja os objetivos, aí está a resposta.
“Neste depoimento eu quero ressaltar a imagem da pessoa.”
“Quero ter no depoimento a empresa que a pessoa faz parte.”
“Os depoimentos são muito grandes, precisa ser um por vez.”
“Os depoimentos vêm do facebook, preciso mostrar a plataforma.”
É aqui que a brincadeira fica complexa.
Mas para te acalmar, a melhor resposta para essas confusões é tratar da melhor forma possível o nível de conteúdo, isto é, prestar muito atenção, questionar muito e pôr sempre em xeque o objetivo do site.
Protótipo
E para finalizar o nosso site, chegamos na etapa do protótipo.
Lidar com ela é um tanto complexo, porque quando saímos do Wireframe, estamos exaustos e só pensamos em concluir logo, e o protótipo se torna uma etapa muito sensível, porque junto a ele vem a pergunta: como posso marcar essa etapa como pronta?
E essa resposta vai partir do nível de fidelidade que você entrega na etapa de Wireframe. Caso seja de baixa fidelidade a sua definição de “pronto” vai ser diferente caso seu Wireframe seja de alta fidelidade.
O que importa aqui é você definir um lugar onde quer chegar, e assim dar cadência para a sua entrega.
Nessa etapa, deixamos o site mais próximo do real possível, lembrando que Design de produtos digitais são idealizações do seu estado final, nada do que o Design entrega se torna o produto final necessariamente (um pouco triste isso).
Inclua ícones, imagens, cores, tipografia e aumente a fidelidade da sua entrega, fazendo com que o cliente entenda como vai ser o site depois de virar código.
Conclusão
Ufa, apesar de bem resumido, acho que consegui passar para você este conteúdo.
Ainda tem muita coisa por trás dessa área de Design de Interface do usuário, e se você quer continuar aprendendo sobre o assunto, deixe seu comentário na área abaixo deste artigo.
