Na semana retrasada eu comecei a falar sobre Wireframes (aqui), o guia visual que define como o conteúdo do seu site será organizado, o qual você deverá seguir durante todo o processo de desenvolvimento do projeto. Nesse mesmo post falei que ”se você pensa que fazer um wireframe não passa de rabiscar vários quadradinhos em um papel está desperdiçando o seu tempo ou apenas procurando algum alívio terapêutico no ato de desenhar quadrados”.

 

Ok, você pode ler o artigo completo aqui porque, no post de hoje, a grande questão é: o que acontece em um projeto que pula a etapa do Wireframe?

 

Em resumo: você decidiu colocar todos os seus objetivos de negócio de lado para perder o seu tempo fazendo apenas mais um site bonito. É quase a mesma coisa que decidir construir uma casa, mas ir direto à decisão de quais serão as cores utilizadas na decoração.

 

E quando isso acontece, um estranho fenômeno acontece entre a equipe: todos os membros dela esquecem quais eram os objetivos do projeto e centenas – se não milhares – de e-mails começam a superlotar sua caixa de entrada propondo a discussão de assuntos completamente irrelevantes, como “o tom de azul usado na fonte dos títulos deveria ser outro” ou “as imagens do site poderiam ter bordas arredondadas”.

 

E eu falo isso por experiência própria. Em um dos primeiros projetos web em que trabalhei, presenciei profissionais incríveis e experientes envolvidos em horas e horas de discussões e reuniões irrelevantes sobre a textura de fundo do layout e as bordas arredondadas das imagens, acreditem!

 

Não estou dizendo que sites feios vendem mais que os bonitos, longe disso. Apenas sonho com o dia em que os grandes líderes de equipes entenderão que Web Design não é branding ou decoração, mas sim uma forma de ajudar a sua marca a vender mais. O seu site deve ser visualmente agradável, claro, mas se você quiser que além disso ele te dê lucro, a preocupação com o design deve ser a etapa final do processo de desenvolvimento, para só depois que toda a inteligência de funcionamento e alcance dos objetivos do site estiverem definidos.

 

Então, agora que eu já te convenci que o Wireframe é importante – oremos! –, aqui está uma pequena lista de passos para criar Wireframes eficientes:

 

Tenha Personas definidas antes de iniciar a criação de Wireframes

 

Porque é essencial que você conheça o público-alvo ao qual os conteúdos do seu site, ou produtos de sua loja virtual, estarão direcionados, assim como seus comportamentos como consumidores, para que os objetivos de negócio sejam alcançados.

 

E se você ainda tem dúvidas sobre a criação de personas, comece respondendo as seguintes perguntas:

 

  1. Quem é o seu consumidor?
  2. Qual é o problema específico que ele está tentando resolver acessando o seu website e consumindo os seus produtos/serviços?
  3. Por que ele iria preferir comprar de você e não da concorrência?
  4. Por quantas etapas ele passa até chegar à decisão final de compra?
  5. O que ele procura em seu website?

 

 

personas

 

 

E, se você precisa de mais ajuda para criar personas, confira esse post, que eu escrevi em julho, sobre o assunto. Ele com certeza te ajudará.

 

 

Qual a mensagem que o seu website quer passar?

 

A partir do momento que você tem o seu público-alvo definido, você precisa definir qual é a mensagem do seu website, ou seja, qual informação você quer exibir em primeiro lugar e, principalmente, como essa mensagem será exibida e orientar o caminho do usuário pelo site.

 

 

Comece a desenhar seu Wireframe e pensar na hierarquia das informações

 

Depois de definir quais as mensagens que o seu website irá passar ao usuário, é hora de começar a “rabiscar”. Pegue um papel e uma caneta e comece a definir o melhor lugar para cada bloco de informação, pensando em hierarquia visual e fluxo das informações, ou seja: o que você deseja que o seu futuro comprador veja primeiro?

 

E não deixe de abusar de canetinhas coloridas e post-its, porque é para ser criativo mesmo, e a ordem das coisas vai mudar muitas vezes. A regra é fazer bagunça, porque no final ela se torna muito organizada e eficiente.

 

 

Fonte: Pinterest (http://bit.ly/1EJGL5y)

Fonte: Pinterest (http://bit.ly/1EJGL5y)

 

 

Acrescente detalhes aos seus Wireframes

 

Depois de ter definido o posicionamento de cada mensagem e bloco de informações, é hora de passar para o computador e acrescentar os detalhes que farão o seu website funcionar. Essa etapa já deve ser feita em tamanho real, e também é quando você deve começar a pensar nos seguintes itens:

 

  1. Convenções de usabilidade – nessa etapa você define itens como o posicionamento dos menus de navegação no topo do site, a localização do logotipo da empresa à esquerda, utilização de breadcrumbs, ferramenta de busca no canto superior direito, etc.
  2. Layout e espaçamento – Isso diz respeito a utilizar tamanho real, inclusive no espaçamento entre blocos, para facilitar, prever e dinamizar o momento de definir o layout.
  3. Hierarquia de informação – antes você já deixou pré-definido o que é mais importante do que, mas aqui, mais do que isso, você também pode se dedicar ao que deverá ser enfatizado dentro de cada bloco de prioridades, com tamanhos e cores de fontes, etc.
  4. Faça anotações sobre a forma que o usuário deverá interagir com cada área, para que a equipe de design e desenvolvimento possa trabalhar de forma eficiente e efetiva.
  5. Onde as chamadas para ação estarão? Qual tamanho elas deverão ter? Serão botões, formulários, ou somente frases?
  6. Que tipo de imagens/animações você acredita que ajudarão a transmitir a mensagem da marca?
  7. Como você acredita que a marca poderia fortalecer sua presença e conquistar mais confiança do usuário no layout?

 

Feito isso, é só partir para o que, na minha humilde opinião de designer, é a melhor parte: o layout!

 

Mas e você, qual é a sua experiência com a criação de Wireframes? O que você acha sobre essa etapa na construção de um site? Compartilhe com a gente!