Descubra como Wireframes podem lhe auxiliar na elaboração dos seus projetos

Sabia para que eles servem, quais os tipos existentes, quais programas usar, conceitos e dicas para a elaboração de um wireframe

Modelo de Wireframe

Eae! Td bele?

No processo de desenvolvimento de um site além do Projeto Gráfico (o layout cheio de cores que você faz no PSD) podem existir também outras partes como Arquitetura da Informação, UX, etc.

Pensando nisso, falarei neste artigo sobre a parte de prototipação, mais especificamente dos wireframes.

Se você ainda não ouviu falar sobre, provavelmente irá ouvir. Se você nunca usou um, provavelmente irá usar… Porque um designer, principalmente se você for freela, é muito mais do que usar Photoshop ou Illustrator. Você é um projetista:  deve saber planejar o que será feito e como ser feito.

E você pensando que seria só fazer uns gradientes no photohop, né Galucho?

Então, sem mais delongas, vamos conhecer essa ferramenta largamente usada no desenvolvimento de interfaces. Vem comigo!

Neste artigo você descobrirá:

O que é um Wireframe?

Wireframe é um esboço: uma simulação de como a interface deverá funcionar.

Basicamente é unir todas as informações que colhemos no briefing para o papel,  de um modo estruturado  prevendo como será  a construção.

Logo, ele retrata o layout , de forma simples, da página organizando o conteúdo e os elementos da interface no espaço que pretendemos usar.  Além de fornecer toda a estrutura para o designer elaborar o layout, ele fornece os elementos funcionais (como a navegação, por exemplo) que serão usados por um desenvolvedor.

O wireframe geralmente não tem estilo tipográfico, cor, ou gráficos, já que o foco principal está na funcionalidade, comportamento e no conteúdo.

E também ele precisa ser flexível a alterações rápidas, permitindo assim que se façam testes dos vários pontos do projeto (usabilidade, navegação, interação, leiturabilidade, por exemplo)

A importância da prototipação

T&L Skills Council - Wireframes

A grande vantagem dos wireframes é que através deles conseguimos demonstrar quais serão as informações e elementos que estão contidos no projeto, além de como deve ser o seu funcionamento, de uma forma simples, prática e muito mais rápida do que construir o layout direto Photoshop.

São muito mais fáceis de se fazer e mais baratos. E podem ser tranquilamente revistos, adaptados e descartados quase que instantemente.

Eles são muito úteis quando você precisa apresentar seu trabalho, seja para o seu cliente, ou seu superior, porque permite que ele (seu cliente) visualize melhor as suas ideias facilitando assim o entendimento do projeto e otimizando o tempo de ambos.

Independente da complexidade do site, fazer essa prototipação ajuda a esclarecer dúvidas, e a definir exatamente o que se precisa ser feito por todas as áreas envolvidas no projeto.

O que colocar no wireframe?

Apesar do wireframe conter  somente o essencial,  quando estiver elaborando –o pense em como será o design, pense em cada ação( e na sua reação também), pense passo a passo.

Então o primeiro passo,lógico, é pensar. E saiba que durante a elaboração  você terá que refazer e testar coisas várias vezes. Faz parte do processo.

E uma ferramenta que pode lhe auxiliar nessa parte da organização dos pensamentos é o mapa mental. Após a leitura desse artigo, confira esse bônus sobre mapas mentais.

Estrutura:

Working in Visio - Redesign

Comece por elementos comuns:  cabeçalhos e rodapés, áreas de conteúdo, navegação, barras laterais, busca, etc. E depois adicione o restante, como widgets, imagens, botões.

Coloque também elementos sobrepostos como modais, caixas de seleção, botões de rádio e outras funcionalidades.

Caso precise, quando se coloca medidas , por exemplo, utilize de etiquetas e setas para evidenciar.

Navegação:

DSC_9811
Essa parte é muito importante.  Ela deve mostrar a relação entre os links, o modo que serão apresentados ao usuários e as opções  existentes para se navegar no site.

Conteúdos:

Lorem, Wireframes

Coloque onde ficará aquele banner, aquele título, aquela caixa de texto.

Nos títulos, nos textos da navegação e/ou links utilize termos genéricos que mostrem a o tamanho e a importância, por exemplo “H1 Título” ou “Link Nav 1”

Não perca tempo colocando conteúdo real no seu wireframe. Utilize, por exemplo, o  Lorem Ipsum, para preencher o espaço.  O importante não é o que está escrito e sim os formatos, o posicionamento e as margens deste conteúdo.

Tipos de Wireframes

Basicamente existem dois tipos de wireframes:  de baixa fidelidade  e de alta fidelidade.

Sketches - app Rock in Rio iPhone

Wireframes de baixa fidelidade são basicamente compostos somente por quadrados, linhas, círculos, triângulos sobre um fundo simples (normalmente em branco) e  com alguns rótulos.

Este tipo de wireframe pode ser desenhado a mão ou em algum software gráfico.

Mock Election - 1.0-home

Wireframes de alta fidelidade são mais incrementados.  Esse estilo usualmente se aproveita de elementos do design do projeto como, por exemplo, cores, imagens , ícones, o logo do cliente, etc.

O objetivo desse estilo de wireframe é se aproximar mais do layout do projeto transmitindo uma melhor ideia de como ficará o site .

O nível de detalhamento do wireframe depende do projeto, da finalidade e da preferência de quem está projetando.

Se você pesquisar mais sobre isso , dentro dessa questão de AI,  você também encontrará 3 tipos diferentes de modelos : Wireframe, Mockup e Protótipo.

Na minha opinião, somente um deles já basta na maioria dos projetos, pois não existe a necessidade de usar três camadas diferentes para a mesma coisa. Mas mesmo assim é bom conhecer como funcionam as coisas, principalmente em algumas empresas.

Wireframe: como já vimos, é um esboço simples da interface. Organiza o conteúdo e os elementos da interface no espaço que pretendemos usar. Pode ser feito a mão ou em algum software gráfico.

Mockup:  é  uma prévia fiel do design do projeto. Nele se incluí normalmente o design final e todos os elementos que irão compor a página, porém , normalmente,  são estáticos.

Protótipo:  é  uma prévia funcional do resultado final. Normalmente não contém todas as funcionalidades que existirão no projeto, mas proporciona aos clientes a capacidade de interagir com a interface e simular o resultado final. Um protótipo pode ou não ter elementos do projeto de design.

Como criar Wireframes?

Criar wireframes é simples: você pode fazê-lo a mão, numa folha de papel,  em algum software de sua preferência, como Illustrator, Photoshop, ou algum específico para essa função como o Axure.

A forma como você vai criá-lo vai depender do seu estilo e também da demanda do projeto.

Projetos mais simples provavelmente  não exigirão tanto, enquanto que projetos maiores talvez exijam um pouco mais.

O importante é fazer algo útil e com qualidade.

Logo, não importa tanto se você vai usar uma programa ou folhas de papel. “Capisce?”

Se você optar por fazer no papel, além de lápis, borracha e canetas, algo que pode lhe ajudar na elaboração é usar o papel quadriculado.

Visualize your ideas quickly

Você pode também usar esse modelo de navegador com o corpo quadriculado: http://www.raincreativelab.com/paperbrowser/.  É  só baixar e imprimir.

Se você optar por criar usando algum software, você  pode usar programas específicos. Abaixo segue alguns deles:

Desktop:

Online:

 Templates:

E para facilitar a sua vida segue alguns links de galerias com inúmeros exemplos de wireframes:

E para lhe ajudar ainda mais também veja esse Método do Jason Santa Maria. Ele descreve seu processo de criação de wireframes, desde o esboço no papel até o Illustrator

Conclusão

O wireframe ajuda os designers a saberem quais telas serão e como devem ser layoutadas.

O wireframe ajuda os desenvolvedores a tirarem dúvidas sobre como serão os comportamentos, as funcionalidades, entre outras coisas.

O wireframe ajuda a você mostrar para o seu cliente o que você tem em mente e com isso aumentam suas chances de receber um melhor feedback.

Então, Galucho, essa ferramenta pode lhe ajudar em muito  no processo de elaboração de uma interface.

É algo simples, barato , editável e  que pode prever e evitar problemas.

Espero que tenha gostado.

E você usa wireframe no seu dia a dia? Tem dúvidas sobre alguma coisa?  Usa outra ferramenta de prototipação que não citei aqui?

Deixe seu comentário.  Estou curioso saber sobre suas experiências com wireframes.

Até mais.

Forte Abraço!

Referências:

http://sixrevisions.com/user-interface/website-wireframing/
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes

Imagens:

https://www.flickr.com/groups/ilovewireframes

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.

  • Mariana Tarifa

    Adorei as Dicas! Muito bom! Favoritei sua página!

  • Marcelo Quirino

    Olá David!

    Sou webdesign freelance, e gostaria de dizer que seu artigo sobre wireframes, foi um dos poucos artigos em português, que falou claramente sobre este tema e sua importância. Leio muito artigos em inglês, que tem me ajudado muito, mas conhecendo seu trabalho, fico muito feliz, pois material em português e bem escrito é raro!! rsrs

    Obrigado e Parabéns pelo artigo!

    • Olá Marcelo.

      Realmente… A maioria que existem em português, pelo menos os que vi até hoje, são um pouco superficiais. :/

      Muito obrigado pelos elogios !!!

      Forte Abraço!

  • Andre

    Cara estou curtindo muito seus artigos, estou começando a me aventurar no mundo free la e posso dizer que está me ajudando bastante. Obrigado =)

  • Cesar

    Ola

    Então fiz um curso basico de web design, faz uns dois anos, mas nao pude retirar muita coisa hoje quero retirar e acompanho voce a algum tempo, digamos q o tempo nao me deixa participar e hoje li esse artigo sobre wireframe achei bastante produtivo

  • Pingback: UX - User Experience - Chief of Design()

  • Daniel

    Excelente artigo! Claro e simples me ajudou bastante.

    • Olá Daniel.

      Muito Obrigado!!

      Pretendo continuar ajudando. :D

      Vlw!

      Abrs.