Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Guia Sobre Wireframing Para Iniciantes

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Portuguese (Português) translation by Hugo Carlos Borges Pinto (you can also view the original English article)

Wireframing é um importante passo no processo de design. Ele permite que você defina a hieraquia da informação no seu design, fazendo com que seja mais fácil planejar o layout de acordo com a maneira na qual você espera que o usuário processe a informação. Se você ainda não use wireframes, é hora de colocar a mão na massa.

A simple wireframe

É como se fosse uma planta arquitetônica; você precisa ver diagramas bi-dimensionais em preto e branco antes de entender como construir a casa de fato. Similarmente em um design para telas, você não pode começar a construir camadas de pixel no Photoshop, ou escrever blocos de código, sem saber onde a informação será posicionada.

Em um nível mais produndo, um wireframe é também muito útil para determinar como o usuário interage com a interface. Por exemplo, wireframes podem conter vários estados de botões ou comportamento de menus.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Fazer wireframes é importante porque permite que o designer planeje o layout e as interações em uma interface sem ser distraído por cores, escolhas de tipografia ou mesmo cópia. Eu gosto de explicar para meus clientes que se um usuário não consegue saber para onde ir em um wireframe em preto e branco, as cores que eventualmente serão usadas não importam. Um botão precisa ser óbvio mesmo que ele não seja brilhante ou colorido.

Como a fundação de uma construção, ele precisa ser fundamentalmente forte antes que você decida dar a ele uma cara camada de tinta.

Passo 1: Inspirando-se

Antes de entrar em maiores detalhes, considerando que uma imagem vale por milhares de palavras, dê uma olhada em I ♥ wirefames. Você vai poder ter uma visão geral e entendimento visual de como outros designers estão conduzindo seus processos de wireframing.

I Heart Wireframes

Talvez pegue também este bookmarklet para seu navegador, Wirify que permite que você veja uma versão "wireframezada" de qualquer site real.

cnncom with wirify

Se você continuamente observa o que outros designers ou sites estão fazendo em seus wireframes, você vai lentamente ter uma visão em sua mente de como um wireframe ajuda na organização de informações para telas.

Passo 2: Fazendo o Design do seu Processo

Design é um processo orgânico e diferentes designers encaram wireframes e suas traduções para visuais e código de maneira diferente. Você precisa encontrar o processo que destaca seus pontos fortes e com o qual você fica mais confortável. Abaixo está um diagrama mostrando diversos processos típicos:

Wireframes Process

37signals é conhecida por defender o uso de esboços e partindo direto para o código, embora alguns dos seus designers utilizem modelos visuais nos seus processos também.

Para mim, eu já passei por diversos ciclos design-para-código para ter um processo relativamente simplificado. Este é um passo sobre o qual algumas pessoas não pensam, mas eu também considero qualquer framework html/css que eu poderei usar no projeto.

Por exemplo, eu costumava criar vários sites na framework Blueprint, portanto eu configurava tanto meus wireframes quanto a Blueprint para a mesma grade de 12 colunas. Isto acelera o tempo de fazer protótipos e desenvolvimento consideravelmente, pois ao invés de ter que escrever a largura de cada elemento no meu arquivo css, eles agora são pré-definidos de uma a doze colunas de largura. Eu agora uso a cssgrid no lugar devido ao seu suporte para design responsivo, mas ela ainda é configurada para uma grade de 12 colunas que você pode baixar como um modelo do photoshop.

the 12-column cssgrid template

Como eu disse, depende de você escolher qual processo te deixa mais confortável, algumas vezes você pode ter que testar diversas vezes antes de realizar qual é o mais efetivo. Algumas pessoas podem ser realmente muito boas para fazer esboços e preferem não usar wireframes. Outros designers podem querer ter quantos passos forem necessários para minimizar divergências ou permitir que eles considerem cada iteração enquanto o design começa a tomar forma.

Você eventualmente irá desenvolver seu próprio processo preferido mas para os fins deste tutorial eu vou usar meu processo típico como exemplo:

A razão pela qual eu uso o Illustrator como minha ferramenta de wiregraming é principalmente por três motivos:

  1. Estilos - você pode salvar estilos de fontes e objetos e reutilizá-los em qualquer parte, exatamente como no CSS.
  2. É fácil de modificar, mover ou escalar para múltiplos objetos.
  3. Ele permite uma fácil transição para o Photoshop posteriormente.

Entretanto, eu utilizo algumas outras ferramentas e isto depende do cenário do projeto. Eu vou demonstrar brevemente algumas ferramentas populares, seus pontos positivos e negativos na próxima seção.

Passo 3: Escolha Suas Ferramentas

Aqui estão algumas ferramentas populares sem ordem específica:

Balsamiq

Balsamiq se tornou popular porque wireframes produzidos com o Balsamiq lembram esboços, deixando óbvio imediatamente que o wireframe não é um produto final mas um trabalho em progresso. Balsamiq também possui uma imensa biblioteca de componentes reutilizáveis que você pode arrastar e soltar facilmente para fazer o design de seus wireframes.

Sample Balsamiq wireframe from the Balsamiq website

Você também pode utilizá-lo em praticamente qualquer plataforma, com versões para desktop disponíveis para Mac, Windows e Linux, e ainda há uma versão web se você prefere trabalhar na nuvem. Aplicativos de terceiros para iOS como o iMockups também suportam o formato de exportação do Balsamiq.

Omnigraffle

Um velho favorito do Mac, Omnigraffle também tem uma ampla biblioteca de componentes reusáveis suportada por usuários ; Graffletopia.

youll like omnigraffle if you enjoy using beautiful stencils like this one

Como foi desenvolvido especificamente como um aplicativo de diagramas, o Omnigraffle também possui recursos complexos como layout automático, suporte de estilos de objetos customizáveis, guias inteligentes e ferramentas de gráficos. Alguns destes recursos também estão disponíveis no pacote Adobe CS, mas se você não tem o pacote CS, o Omnigraffle possui um bom custo (~US$100) para produzir wireframes detalhados.

Axure

Quase como o avô das ferramentas de wireframe, Axure foi uma das primeiras ferramentas de wireframe/protópicos de nível profissional. Até recentemente, estava disponível apenas para Windows. Eu pessoalmente não tenho muita experiência com ele, mas é conhecido por ser uma ferramenta amplamente utilizada entre profissionais da indústria.

Flairbuilder

Uma nova criança no pedaço, Flairbuilder possui grande suporte a interações.

from show  hide to if-else interactions

Ele também suporta uma grande biblioteca de componentes, páginas mestras e você pode exportar o protótipo para ser visto online.

Aplicativos online

Se aplicativos para computadores de mesa não são sua preferência, existem ferramentas como mockflow, hotgloo e mockingbird.

Keynote/Powerpoint

Keynotopia "transforma seu aplicativo de apresentações favorito na melhor ferramenta para protótipos rápidos de aplicativos para dispositivos móveis, web e computadores de mesa". Para usuários que não possuem Mac, não se desesperem, pois a Keynotopia também oferece modelos para Powerpoint.

Eu pessoalmente recomendo altamente o Keynotopia se você precisa fazer wireframes ou protótipos de aplicativos móveis rapidamente. Outra boa alternativa é Keynote Kungfu.

Adobe CS

Para aqueles já familiarizados com o pacote Adobe, Fireworks, Illustrator e InDesign são ferramentas para wireframes muito capazes com suas vantagens e desvantgens individuais.

Fireworks

Você pode trabalhar o processo de design inteiro no Fireworks, de wireframes básicos para o visual completo. O Fireworks suporta páginas mestras (pense nestas como modelos reutilizáveis nos quais cada edição no modelo mestre pode ser aplicado em todas as páginas derivadas dele), biblioteca de elementos e você pode fazer protótipos interativos com o Fireworks relativamente fácil.

Illustrator

Esta é uma das minhas ferramentas favoritas porque já estou muito familiarizado com o Illustrator e tenho certeza que muitos designers aqui também. Eu uso o Illustrator quando estou tentando fazer rapidamente wireframes rápidos mas complexos, sem necessidade de interações.

O que o torna uma vencedora? A habilitade de exportar como um arquivo PSD com camadas editáveis, amplo suporte para copiar e colar para o Photoshop, e excelentes controles de tipografia, com estilos de fontes que você pode salvar, editar e reutilizar, quase como CSS.

Indesign

Similarmente às vantagens do Illustrator com suporte ainda mais forte a controles de estilos tipográficos, ótimo suporte a páginas mestras e recente habilidade de fazer protótipos interativos.

Have you seen the interactive controls of InDesign

Eu escolho Indesign quando eu tenho que fazer protótipos multi-página, interativos e de alta fidelidade. O único problema para mim é o fraco suporte para exportação para o Photoshop para designs visuais.

ProtoShare

"Protótipos Poderosos Fácilmente." A versão 9 lançada recentemente possui uma nova paleta WYSIWYG. Vale a pena conferir.

Passo 4: Configurando uma Grade

Existem muitas teorias com relação a sistemas de grades, mas sem entrar em muitos detalhes, eu vou explicá-los como "uma maneira simples e estruturada para posicionar elementos".

Eu estou utilizando o Illustrator para este tutorial mas estes passos podem ser seguidos com qualquer ferramenta.

Primeiramente, determine um tamanho de documento. Eu usei 1280 x 900 porque eu vou usar cssgrid o que vai permitir que meu website escalone entre resoluções mobile até um máximo de 1140 pixels facilmente.

Posicione o modelo baixado do cssgrid no seu documento.

Dica:

Existem inúmeros modelos de grades disponíveis para download, mas se você está interessado em customizar seu próprio modelo dê uma olhada em responsify.it.

Passo 5: Detemine o Layout Com Blocos

Comece desenhando blocos na grade. Pense na ordem da informação que você deseja apresentar para seus visitantes, do topo para baixo é mais fácil, seguido da esquerda para a direita. Abaixo um exemplo de um wireframe que possui um layout comumente utilizado por empresas de software atualmente:

Algumas vezes, dependendo dos seus objetivos e da instituição para a qual você está fazendo o design, você pode ser criativo com o layout, embora ainda mantendo a hierarquia visual da informação em mente. Este é um exemplo real de um dos meus clientes no qual eu estava rompendo com o layout tradicional de website para empresas de software:

Aqui está um layout para um blog, com blocos de anúncios cuidadosamente posicionados e instruções específicas para o cliente:

Passo 6: Defina a Hierarquia de Informações Com Tipografia

Depois que estiver satisfeito com como os blocos estão posicionados, comece a posicionar pequenos pedaços do seu conteúdo para sentir se a informação está bem estruturada. A regra geral é a mesma: a informação que você deseja entregar para sua audiência deve ser clara, mesmo em um wireframe preto e branco.

Simplesmente usando tamanhos de fontes diferentes como começo é uma grande maneira de diferenciar entre os diferentes níveis de informação.

Não tenha medo de experimentar neste estágio. Algumas vezes, enquanto você completa mais detalhes, você pode perceber que o layout original não está funcionando direito. Este é o principal ponto no processo de fazer wireframes; fazer quantas iterações forem necessárias para selecionar a melhor maneira de representar a informação que você está tentando comunicar.

No exemplo abaixo, eu decidi que queria que as capturas de tela tivessem mais impacto e também comecei a usar caixas pretas para definir as áreas que teriam importância visual para o website:

Passo 7: Ajustando Detalhes com Tons de Cinza

Usar todo o espectro de tons de cinza pode te ajudar a determinar a força visual dos seus elementos sem ter que escolher uma paleta de cores. Na verdade, isto pode te ajudar durante o processo de design visual posteriormente.

Passo 8: Wireframe de Alta Fidelidade

Este é um passo opcional, mas se você deseja conduzir as coisas incrementalmente você pode querer testar isto. Fazer um wireframe de alta definição significa apenas adicionar mais detalhes, tantos quanto possíveis, sem entrar demais nos mínimos detalhes.

Também pode envolver cores:

A ideia geral é que no estágio visual/código você vá querer estar no modo de requinte e não mais no modo de experiência ou esboço. Faça os ciclos de iteração (opiniões <-> wireframing) o mais rapidamente possível em um aplicativo de wireframe confortável para você, ao invés de ficar alterando camadas e pixels no Photoshop.

Dito isto, em certos cenários pode ser mais adequado pular o estágio de definir muitos detalhes e ir direto para o estágio de protótipos interativos (como na 37signals). O argumento a favor disto é que certos detalhes de interação não podem ser comunicados completamente em uma imagem estática.

Se você trabalha com um time de desenvolvedores, você pode querer enviar os wireframes aprovados para os desenvolvedores gerarem os códigos básicos da framework enquanto você trabalha no visual.

Passo 9: Transformando um Wireframe em um Visual

Mencionada anteriormente, a razão pela qual eu tendo a preferir usar o Illustrator para wireframes é porque eu posso exportá-lo para um arquivo .psd com a maioria das camadas editáveis. Quando eu estou no Photoshop não vou precisar editar a tipografia tanto (Photoshop tem controles de tipografia interiores, mas muito melhorados na CS6):

Photoshop Export Options

Aqui está um exemplo de um wireframe transformado em um visual. A espinha dorsal do wireframe está praticamente intacta, embora haja alguns ajustes visuais. Você também pode ver este website ao vivo:

Webwise 2010

Conclusão

Assim chegamos ao final deste tutorial. Eu espero que ele tenha inspirado você a começar a experimentar! Assim como em qualquer processo de design, não tenha medo de iterar, iterar e iterar.

Também, faça questão de passar algum tempo experimentando diferentes ferramentas e processos. Você vai ver que vai compensar o investimento de tempo para achar uma ferramenta que pareça intuitiva para você.

Sinta-se à vontade para fazer qualquer pergunta nos comentários, obrigado por ler!

Recursos Adicionais

Se você quer saber mais sobre wireframing, você pode querer conferir estes recursos (em inglês).

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.