Como fazer e o que acontece se eu não fizer Wireframes?

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?

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.

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!