Wireframes são uma das partes mais importantes de um projeto web, portanto, desenvolver wireframes para web sites é uma etapa que, mesmo frequentemente negligenciada, abandonada, mesmo, não o deveria ser.
Neste artigo, veja mais sobre a importância desta etapa do projeto web e conheça algumas diretrizes importantíssimas para se preparar wireframes de qualidade, que realmente façam a diferença na qualidade final e nível de profissionalismo e produtividade de seus web projects.
A maioria dos designers desenvolve wireframes para seus projetos, de uma forma ou de outra, mesmo que sejam apenas esboços rápidos na parte de trás de alguns papéis de rascunho. Wireframe é uma parte importante do processo de desenvolvimento web, especialmente para projetos mais complexos.
Por que fazer wireframes
Wireframes realmente são úteis quando você está se comunicando com clientes, pois lhes permite visualizar suas ideias mais facilmente do que quando você apenas as descreve verbalmente. Para casos em que o “cliente” é a próprio empresa em que se trabalha ou para quando se tratam de projetos pessoais, a afirmativa também é verdadeira.
Então, que esteja claro: desenvolver wireframes é realmente um passo necessário no processo de design! Mesmo se o site que se está projetando seja incrivelmente minimalista e simples, fazer o wireframe ajuda a esclarecer exatamente o que precisa ser feito nos diferentes tipos de página do projeto.
Ao dedicar tempo para criar, pelo menos, um wireframe simples, tenha certeza de que seu web design levará em conta todos os elementos das diferentes páginas que compõem o projeto e precisam ir para o design. Além disso, eles estarão posicionados na melhor localização a que o estudo destes elementos chegou.
Além disso, o processo de produção de wire frames é muito mais simples, fácil e barato de ser feito do que quando se “pula” essa etapa e se parte direto para o HTML/CSS: wireframes podem ser facilmente revistos, adaptados ou descartados.
Wireframes x Modelos x Protótipos
Wireframe, modelo (mockup) e protótipo são frequentemente usados como sinônimos, mas são três coisas diferentes (embora, frequentemente, haja alguma sobreposição entre eles). Cada um tem um propósito diferente do outro e sua própria importância no processo de design:
- Wireframes. São “ilustrações básicas” da estrutura e componentes de uma página web. Geralmente são o primeiro passo no processo de design (depois da concepção mental, obviamente).
- Modelos. Geralmente focam sobre os elementos de design visual do site. São muitas vezes bastante próximos ou idênticos ao web design final efetivo e incluem todos os gráficos, tipografia e outros elementos da página. Mockups geralmente são apenas arquivos de imagem.
- Protótipos. São layouts semi-funcionais das páginas e servem para dar um preview de maior fidelidade do site real. Esta fase antecede a programação da lógica de negócios do site. Enquanto eles não podem ter toda a funcionalidade, eles geralmente dão aos clientes a capacidade de interagir com os elementos e simular a forma como o site irá, eventualmente, trabalhar. Protótipos podem ou não incluir elementos de design finalizado.
Em suma, o wireframe vêm em primeiro lugar, seguido do modelo (ou mockup) e, caso seja possível/viável, haverá inúmeros benefícios ao se fazer o uso de protótipo (às vezes chamado “wireframe funcional“).
Como criar wireframes
Criar wireframes é tão simples ou tão complicado quanto você queira. Em sua forma mais básica, um wireframe poderia ser nada mais do que um esboço numa folha de papel. Outros “wireframes” são criados digitalmente e são realmente mais como protótipos, com objetos clicáveis e toda a interatividade prevista.
O tipo de wireframe que será criado vai depender do que o projeto demanda. Projetos mais complicados provavelmente requerem wireframes mais elaborados, enquanto sites simples pode ter wireframes simples.
O que incluir em um wireframe
Os wireframes devem incluir informações suficientes para refletir o que precisa aparecer em cada página do projeto web. Pense sobre os elementos gerais da maioria das páginas web: cabeçalhos, rodapés, barras laterais, áreas de conteúdo, meta-informação, busca, widgets, gráficos, etc. Depois de ter uma idéia do que terá o site, comece a criar os wireframes com base nesses elementos.
O quão detalhado deve ser o wireframe também depende do projeto e de sua finalidade. Se o wireframe servirá apenas como um documento orientador para referência, então talvez não seja uma boa ideia dar muito foco nesta etapa; por outro lado, se ele vai ser usado por mais de um designer ou desenvolvedor – ou apresentado a clientes – então ele precisa ser melhor trabalhado.
Wireframes de baixa fidelidade x Wireframes de alta fidelidade
Existem algumas opções quando se trata do “estilo” de wireframes. Alguns designers optam por wireframes de baixa fidelidade , que são basicamente linhas sobre um fundo liso com alguns rótulos. Estes incluem tanto os desenhados a mão, como wireframes digitais, e são geralmente muito simples.
Wireframes de alta fidelidade vão um passo além ao usando determinados elementos de design dentro do próprio wireframe. Isto pode incluir o logotipo ou alguns outros elementos gráficos básicos, bem como o esquema de cores e outros elementos visuais de design.
Wireframes assim começam a se aproximar do nível de modelos, mas eles podem ser inestimáveis para transmitir uma sensação de como o site será, especialmente para os casos em que se tem dificuldade em vislumbrar como o site será ao ver wireframes de baixa fidelidade.
Técnicas para fazer wireframes
Existem dezenas de maneiras diferentes para criar wireframes que vão desde simples – caneta e esboços em papel – a diagramas mais complexos – que parecem quase tão eficientes quanto sites em produção.
Existem, também, abordagens diferentes para o propósito e o raciocínio por trás da criação de wireframes, dependendo das necessidades do projeto e dos designers envolvidos nisto.
Aqui estão alguns recursos sobre diferentes procedimentos para a criação de wireframes para web (em inglês):
- Wireframes com InDesign e Illustrator. Esse é um artigo da UXmatters sobre como criar wireframes usando Adobe InDesign e o Illustrator. Eles falam sobre o que o levou até a decisão de usar o InDesign e o Illustrator em detrimento a outros outros produtos até chegar na parte sobre como usar esses 2 aplicativos para criar wireframes.
- Método Caixa Cinza. Jason Santa Maria tem um post fantástico sobre o “Método Caixa Cinza” de criação de wireframes. Ele descreve seu processo inteiro de criação de wireframes, desde esboçar no papel até criar uma escala de cinza no Illustrator. Artigo com vários exemplos.
- O Futuro dos Wireframes. Inclui informações valiosas sobre processos e métodos de criação de wireframes, especialmente em termos de como fazer o processo de wireframe melhor para designers, desenvolvedores e proprietários de sites.
- 20 Passos para Fazer Wireframes Melhores. Este artigo estabelece 20 passos sobre o que você deve fazer para criar wireframes melhores. É um post fantástico para verificar se você é completamente novo na arte de fazer wireframes ou apenas infeliz com o seu processo atual.
Processo do wireframe
Existem muitas variações, mas há um punhado de passos fundamentais para a criação de um wireframe. É provável que você comece com uma lista de coisas que o site precisa incluir ou um documento de especificação formal de design. Outros já gostam de começar com um “olhar geral” do design e ir acrescentando detalhes, uma vez que se tem os fundamentos básicos do layout.
Quer você decida rabiscar algumas coisas no papel ou trabalhar com algum software, ainda não descarte um ou outro método. Alguns designers fazem esboços no papel e depois os passam para software específicos; outros vão direto para o software; outros ainda ficam somente no “wireframe de papel”. Tenha em mente que, caso se depare com algum “entrave criativo”, mudar os formatos com que se trabalha pode fazer maravilhas para sua criatividade!
É muito comum experimentar várias idéias e possibilidades diferentes com wireframes antes de tomar decisões finais em um projeto. Aliás, é justamente para facilitar/agilizar isso que é muito bom trabalhar com wireframes, já que, como se tem o mínimo de tempo e energia investidos, é possível facilmente fazer alterações e tentar coisas novas.
Uma vez que um wireframe básico é criado, você pode enviá-lo para outros membros da equipe para análise ou colocá-lo um pouco de lado por 1 ou 2 dias para analisar novamente. Quando estiver satisfeito, é hora de mostrá-lo ao cliente ou, caso não seja o caso de haver um cliente, começar a trabalhar em modelos baseados no wireframe.
Ferramentas para criar wireframes
Existem muitas ferramentas para wireframe disponíveis. Algumas são feitas especificamente para wireframes, enquanto outros são mais gerais, apesar de cumprirem bem seu papel quando trabalho é esse.
As ferramentas que você vai usar vão depender de preferência pessoal e dos requisitos do projeto. Não há “melhor” ferramenta para fazer wireframes, mas sim aquela na qual você se sente melhor usando e que funciona melhor para você.
Papel e caneta
Caneta (ou lápis) e papel são as ferramentas mais básicas que você pode usar para criar um wireframe. Também é útil usar papel quadriculado para criar elementos em proporção.
Você pode querer usar um lápis para o seu esboço inicial, para que você possa apagar as coisas sem ter que começar de novo. Então, a medida que for finalizando os elementos, pode passar caneta por cima para evitar apagar o que não precisa mais ser apagado.
Você também pode considerar usar canetas coloridas (ou lápis coloridos) para diferenciar elementos e dar mais sentido ao wireframe. Por exemplo, uma cor para um grupo de elementos pode ser útil, pois ajuda a identificar instantaneamente outros itens.
Programas para criação de wireframes
Existem diversos programas para criar wireframes disponíveis no mercado. Alguns são pagos, outros de graça, outros mais completos e alguns nem tanto; mas todos com o objetivo de ajudar na criação de wireframes para facilitar e agilizar o processo de desenvolvimento web.
Recomendamos fortemente que dê uma lida no artigo “Ferramentas para criação de wireframes“. Lá você vai encontrar uma boa lista com os principais programas para criação de wireframes com descrição e imagem de cada um.
Modelos para wireframes
Usar modelos (templates) para criar seus wireframes pode acelerar bastante o processo, especialmente se você optar por usar caneta e papel ou programas que são capazer de cumprir este propósito (como o Adobe Illustrator). Veja alguns bons modelos, kits e elementos de interface gratuitos para serem usados na elaboração de wireframes:
- Free Web UI Wireframe Kit. Fuel You Interface oferece, neste kit, diversos elementos para wireframes, tais como botões, breadcrumbs, caixas de diálogo, campos de busca e mais.
- Yahoo! Developer Network Design Stencils. Conhecidíssimo set de UI da Yahoo! para o desenvolvimento de wireframes. Eles disponibilizam os modelos para vários programas como OmniGraffle, Visio, Illustrator e Photoshop.
- Free Sketching & Wireframing Kit. Conjunto de elementos para wireframe disponível em vários formatos de arquivo: Adobe Illustrator, SVG, PDF e EPS.
- Sqetch. Kit para Illustrator que inclui modelos e elementos, incluindo para iPad, elementos GUI e elementos de formulário.
- Dragnet Kit for Fireworks. Kit para Adobe Fireworks que inclui uma variedade de elementos da interface como botões, menus, combobox e abas.
Frequentemente esta lista com modelos para wireframes será revisada e novas fontes serão incluídas. Portanto, fique atento a este artigo para saber quando novos recursos forem disponibilizados.
Utilize wireframes para pensar o projeto
Trabalhar com wireframes pode ser uma ótima maneira de pensar o design de um projeto web sem gastar horas trabalhando em modelos no Photoshop ou codificando projetos preliminares. A flexibilidade dos wireframes permite trabalhar com diversas idéias de design e layout rapidamente e com pouco custo.
Dê uma olhada nos documentos de especificação de projeto; eles dirão quais elementos são necessários para o site. Em seguida, comece a organizar tudo em wireframes. Não tenha medo de tentar coisas não tradicionais nesta fase. Lembre-se: são apenas wireframes. Um erro ou uma tentativa fracassada neste momento, não definirá um fracasso ou fará com que você tenha muito retrabalho. Libere sua criatividade nesta fase!
Wireframes como resultado final do projeto
Apresentar wireframes para o cliente pode ser uma valiosa forma de se certificar de que todos estão em sintonia com o projeto antes de criar os modelos do projeto real. É muito mais fácil alterar a posição dos elementos quando você está trabalhando com wireframes do que quando está com o projeto no Photoshop ou páginas já codificadas.
Se for esse o caso, de haver a etapa de apresentação dos wireframes, isso também pode mostrar a habilidade do designer e agrega valor ao projeto, como um todo. Certifique-se, portanto, de que a etapa para criação, apresentação e aprovação dos wire frames constam no escopo do projeto – e isso acarreta em um impacto no tempo total, obviamente – e, por consequência, haverá um impacto no processo geral de design.
Wireframe em rascunho x Wireframe elegante
Um dos maiores considerações ao criar wireframes que será apresentado é a forma como eles devem parecer. Geralmente há duas formas de pensar sobre este assunto. Um ponto de vista sobre esta debate wireframe em rascunho contra wireframes elegantes (mais bem elaborados/apresentados) afirma que: tudo o que será apresentado a um cliente deve ser o mais polido e formalizado possível.
O outro ponto de vista argumenta que oferecer ao cliente um wireframe “polido” faz do cliente menos propensos a solicitar alterações, já que as coisas passam o sentimento de “finalizado”. Em outras palavras, wireframes em rascunhos dão mais margem para que o cliente não goste do resultado e/ou solicite mudanças. Há prós e contras em cada uma das abordagens.
Wireframes elegantes muitas vezes podem ajudar um cliente a visualizar melhor o layout do site e ter uma ideia melhor de como tudo vai funcionar e se parecer. Acrescentando coisas como cor ou gráficos você chega ainda mais perto deste objetivo. No entanto, você corre o risco de que seu cliente não oferece um feedback verdadeiro por sentir que a proposta já está “muito finalizada”.
Por outro lado, wireframes em forma de rascunhos são mais como “idéias cruas” e parecem mais convidativos ao feedback do cliente. A desvantagem é que os clientes que não são particularmente orientados visualmente – ou que não têm familiaridade com o que wireframes são – podem ter dificuldade em imaginar qual realmente é a proposta e como o site irá se parecer no final de todo o desenvolvimento.
Recursos de wireframes
Para concluir este guia sobre desenvolvimento de wiframes, aqui estão diversos recursos na web dedicados ao design/produção de wireframes:
- I ♥ Wireframes Flickr Group. Milhares de wireframes para se ver e milhares de membros cadastrados colocando novos conteúdos com frequência.
- I ♥ Wireframes Tumblr. Excelente lugar para se ver muitos wireframes e se inspirar (é associado ao grupo do Flickr acima).
- Wireframe Showcase. Site que apresenta um “antes e depois”, mostrando wireframes com seus respectivos projetos finais. Excelente!
- Wireframes Magazine. Cobre todas as coisas relacionadas a wireframe, incluindo toneladas de stencils e modelos, bem como exemplos para inspiração.
Esta lista de recursos para wireframes será constantemente atualizada. Fique ligado!
Conclusões
Depois de acompanhar este guia completo de wireframes, é possível chegar a algumas conclusões importantes sobre o assunto.
Como o wireframe deve ser, depende do objetivo do projeto e/ou do perfil do cliente. Caso haja maior espaço para troca de ideias, opte pelo wireframes no estilo rascunho; caso apresente algo mais elegante, um wireframe melhor trabalhado – podendo até conter cores, gráficos, etc -, o impacto da apresentação é melhor, contudo, isso não abre tanto espaço para discussões, pois causa sentimentos de completude e imutabilidade.
De qual maneira se vai fazer os wireframes, também é algo opcional: há pessoas que preferem wireframes em papel e caneta; outros em programas de editoração de imagens; e ainda os que preferem programas específicos para construção de wireframes, modelos e protótipos. Mais uma vez, é você quem decide qual destes será melhor.
Deve haver, no projeto, a importantíssima etapa de elaboração de wireframes. É preciso que dentro do prazo – e orçamento – conste os períodos estimados para a feitura, edição, entrega, feedback e revisão de cada wireframe. É logicamente mais rápido, fácil e dispende menos recursos financeiros se alterar elementos num wireframe do que numa estrutura HTML/CSS já pronta.
Caso queira que seu projeto dispense retrabalhos e que possíveis mudanças sejam pensadas e mostras de maneira mais rápida, podendo ser feitas com um custo baixíssimo, então usar wireframes em seus projetos é de extrema importância!