Logotipo WebingPro.
Menu
Background Image
Voltar para a página anterior

O que é um wireframe
e qual a sua importância?

Postado por João Paulo Villa Mello em 03/09/2014 às 07:29

Background Image

Arquitetura da Informação

Antes de começarmos a falar sobre os Wireframes e Experiência do Usuário, vamos dar uma breve (bem breve mesmo) introdução sobre a Arquiteutra da Informação.

O que é

“A arquitetura da informação é a categorização da informação em uma estrutura coerente, preferencialmente aquela que a maioria das pessoas possa compreender rapidamente. Geralmente é hierárquica, mas pode ter outras estruturas, como concêntrica ou até mesmo caótica. Ela está totalmente relacionada com filosofia e semiótica.” (Wikepédia).

Conforme definido pelo WURMAN, basicamente, a Arquitetura da informação consiste na organização de informações com o propósito de torná-las compreensíveis.

Quando nos referimos ao meio digital, principalmente na criação de sistes ou sistemas baseados na web/nuvem, o propósito é o mesmo, devemos criar interfaces organizadas e intuitívas para que os usuários possam compreender com facilidade a mesma.

UX Design

“A maioria das pessoas acredita que User Experience é somente encontrar a melhor solução para os seus usuários – mas não é. UX trata sobre definir o problema que precisa ser resolvido (o porquê), definir para quem esse problema precisa ser resolvido (o quem), e definir o caminho que deve ser percorrido para resolvê-lo (o como).” – Whitney Hess,

Wireframes

O que é um Wireframe

A curto e grosso modo nós podemos dizer que o Wireframe é o esqueleto do seu projeto. Ele não utiliza cores, nem imagens. Você vai ver blocos brancos, pretos e tons de cinza, simulando o conteúdo do site. Mas, por quê?

A resposta é simples, com o Wireframe nós nos concentramos na navegação e na hierarquia dos conteúdos e não no visual dele, se as cores estão ou não de acordo com a marca e afins. Nós nos preocupamos com a navegação, usabilidade e disposição do conteúdo.

Nós vamos pensar se o nosso público vai entrar no nosso site e entender como ele funciona, se a navegação dele vai ser agradável, se estamos exibindo o conteúdo certo na hora certa e no lugar certo. Afinal, o que define, em boa parte, se você vai ou não continuar em um site é a capacidade que o mesmo tem de te oferecer um bom conteúdo, além de ser funcional e fácil de navegar por ele. Claro que a parte visual também conta nessa hora, mas veja só, de que adianta termos um produto maravilhoso que não funciona? Ou então, um produto ultra funcional, mas que não tem um apelo visual? Ambas as partes são aliadas e, um bom trabalho feito nas duas, é o ideal. Mas nosso foco hoje é o Wireframe, certo? 🙂 então, vamos lá!

A importância de um Wireframe

Bom, se você ainda não se convenceu que um Wireframe é importante para o seu projeto, vamos listar mais alguns pontos aqui.

Aprimora o seu sistema/site/projeto

Pular essa etapa, na minha opinião, é quase que matar o seu projeto antes mesmo de ele começar. Aqui na WebingPro um Wireframe básico é sempre incluso nos projetos. Se deixarmos de pensar na usabilidade, na navegação, na disposição dos elementos, qual a chance de, na hora de criar o layout, você ter certeza de que, não tudo, mas boa parte do que é necessário ao seu projeto, foi previsto?

O Wireframe impede que aconteçam grandes falhas na navegação e na usabilidade do seu site e sabe onde isso pode impactar? Principalmente na perca de usuários, leads e então, consequentemente, em perca de conversão. Ou seja, seu site poderá ter uma usabilidade prejudicada, que influenciará diretamente nos resultados que o mesmo vai gerar, isso tudo por que essa etapa foi descartada.

Outro ponto muito importante que devemos salientar aqui é a previsão de funcionalidades. No Wireframe nós conseguimos prever como aquele “Aniversariantes do mês” vai funcionar, onde ele vai estar (em qual página) e assim por diante. Ele evita que algumas funções sejam esquecidas ou feitas de forma diferente do que foi pensado, evitando assim, que se chegue na parte de desenvolvimento sem uma funcionalidade de alta importância para o projeto.

Na hora da criação de qualquer produto, seja um site ou uma embalagem, é essencial pensar no usuário e em como ele vai se comportar com o seu produto, afinal, o seu produto é para ele, certo?

Como o próprio Google disse recentemente “Focus on the user and all else will follow.” (Em tradução livre: “Foque no usuário e todo o resto será consequência”).

Agiliza o processo de criação

Fica muito mais fácil na hora da criação visual do projeto. Podemos utilizar todo o nosso tempo pensando no conceito do projeto e no apelo visual que queremos para o mesmo, afinal, toda a navegação e hierarquia já foi pensada antes.

Claro que Wireframes não devem ser seguidos a risca pelos Diretores de Arte/Designers, se não era só pintar o Wireframe, né? 😛

A ideia é alinhar o conceito visual da marca, o objetivo do projeto a estrutura que foi criada com o Wireframe para que possamos chegar no nosso produto final.

Agiliza o desenvolvimento

Entendo que esse ponto é um pouco polêmico, porém, aqui na WebingPro agiliza bastante o desenvolvimento do projeto. Todo o painel de controle e banco de dados é criado a partir do Wireframe, afinal, ali nós já temos tudo o que será exibido, como e onde. Então os desenvolvedores podem começar a trabalhar antes mesmo do projeto ser concebido visualmente. O que, convenhamos, vai agilizar bastante o seu processo.

Um pequeno exemplo da WebingPro

Abaixo um exemplo de como trabalhamos aqui na WebingPro, na imagem da esquerda podemos ver o Wireframe (clique para ampliar) navegável e suas funcionalidades. Já na imagem da direita podemos ver o resultado do Wireframe, a proposta visual (clique para ampliar).

Wireframe - Amazing Trips
Wireframe – Amazing Trips (Clique para ampliar)
Proposta Visual - Amazing Trips
Proposta Visual – Amazing Trips (Clique para ampliar)

 

Conclusão

Bom, recapitulando, vimos hoje os seguintes tópicos:

  1. O que é Arquitetura da Informação
  2. O que é um Wireframe
  3. A importância de um Wireframe

Vou deixar aqui embaixo alguns Links úteis para você criar bons wireframes, ou então se você for o cliente, validar o seu wireframe da melhor forma possível.

  1. Checklist de UX – Por Fabrício Teixeira
  2. Métodos e Entregáveis – Por Fabrício Teixeira
  3. Wireframes para Web: Guia completo – Por Tárcio Zemel

Então, espero que tenha fixado na cabeça de vocês, desenvolver um Wireframe é fundamental para o processo de criação. Independentemente do tamanho do seu projeto ou da complexidade dele. Não importa se é um super sistema web ou um blog minimalista. O Wireframe vai te ajudar a entender como cada página vai exibir seu conteúdo e como o usuário vai navegar pelo seu site.

Espero que tenha conseguido passar bem qual a importância e o quão fundamental é um Wireframe para o seu projeto. Qualquer dúvida, crítica ou sugestão, deixem nos comentários, ficarei bem feliz 🙂

Se gostou, não se esqueça de compartilhar com os amiguinhos! Se não gostou, compartilha também (mas explica pra gente poder melhorar, por favor!) :p

Conheça o autor do post

João Paulo Villa Mello:
Notice: the_author_description está obsoleto desde a versão 2.8.0! Use the_author_meta('description') em seu lugar. in /home/webingpro/www/blog/wp-includes/functions.php on line 3830
Falar de si próprio é sempre complicado, né? Mas vamos lá... Viajante nas horas vagas, fascinado pelo mundo e louco para conhecer a Austrália. Sou um cara persistente, sonhador e apaixonado pelo meu trabalho. Por ser designer, sempre fui muito criativo e sempre tive uma imaginação muito fértil, é comum me ver em outro mundo :) Sou desde pequeno apaixonado por design, onde conheci toda a parte de ux, ai e o marketing digital, o qual tenho o prazer de respirar todos os dias <3

  • Leonardo

    Oi João, tudo bem? Cara, faço meus wireframes numa lousa. Queria começar a fazer com algum software. Você recomenda algum?

    • Fala Leonardo,
      Beleza cara e por ai? 🙂

      Então, as vezes eu faço o Wireframe em um papel, vou desenhando, pensando nas interações, no usuário, enfim, todo o processo. Pelo fato de ser mais fácil/rápido eu testar algo direto ali no papel até ter a ideia final. Então, recomendo continuar na lousa em uma primeira etapa, até para discutir o projeto com mais pessoas.

      Depois, passe para algum programa para fazer um protótipo navegável. Pra mim o melhor que tem hoje é o Axure, inclusive, é o que usamos aqui na WebingPro 🙂

      Segue o site: http://www.axure.com/

      Existem diversos programas, como o Balsamiq, o OmniGraffle, o Gliffy e vários outros, porém, como disse acima, pra mim, o Axure é o mais completo desses 🙂 Ai cabe a você escolher qual você vai preferir!

      Muito obrigado pelo comentário e espero ter ajudado!
      Abraços e uma ótima semana!