Wireframes, o que são e por que os utilizamos?


Lauro Becker

Por   

 20/04/2022 

Lauro Becker
20/04/2022

COO, atua desde 2005 com tecnologia, internet, projetos e processos de inovação.

✓ Conteúdo criado por humano

Definindo Wireframe

Podemos definir wireframe como um esqueleto, um protótipo ou uma versão bastante primitiva do visual de um projeto. Ele consiste na representação da diagramação e das estruturas macro do site, ou seja, apresentamos por meio de formas geométricas e linhas como pensamos a divisão da interface em seções.

Definindo Wireframe

O wireframe não contém cores, identidade visual ou conteúdo e pode ser feito com lápis, caneta, régua e borracha, ou pode também ser feito com um software como o Adobe Photoshop, que produz uma imagem estática (e mais caprichada) de um wireframe, ou caso você esteja trabalhando em um projeto um pouco mais complexo, como o de um software, é interessante usar uma ferramenta como o Adobe XD, que é gratuíto, e que pode entregar protótipos mais próximos da realidade, com interações e animações, mas ainda mantendo a característica de não ter cores, identidade visual ou conteúdo.

Desta forma, os dois objetivos principais do wireframe são o auxílio ao designer na hora da diagramação dos conteúdos e na aplicação da identidade visual, e também ser a principal ferramenta em relação a um alinhamento inicial da expectativa do cliente quanto ao visual do projeto contratado.

Dica: Por que utilizar Mobile First no Web Design?

Variáveis possíveis em um processo de design e no uso de wireframes

Existem três variáveis quanto a função dos wireframes dentro do  processo de desenvolvimento de design e, desta forma, precisamos ter a sensibilidade de entender o contexto aonde eles podem ou não serem inseridos e as variáveis que o permeiam este uso.

As três variáveis principais: 

  • as características individuais do designer responsável;
  • as definições dentro da empresa da qual trabalhamos; e 
  • por fim o nível de conhecimento do cliente em relação a construção de interfaces. 

Abaixo vamos esclarecer um pouco mais quanto a isso:

Cliente: a variável externa

O ponto chave da utilização do wireframe como uma aproximação prévia a apresentação de design para o cliente é justamente o conhecimento e a capacidade de análise crítica/construtiva dele. O momento ideal para a coleta mensuração desta capacidade é no briefing e em conversas prévias ao desenvolvimento. Converse com o seu cliente e crie uma proximidade maior para que esta "intimidade profissional" adquirida possa ser suficiente para que você consiga tirar uma conclusão quanto ao conhecimento dele.

Cliente: a variável externa

Caso o seu cliente consiga entender a função primitiva de um wireframe, e nele já conseguir fazer observações construtivas, isto acaba diminuindo o tempo gasto com alterações que você faria no futuro e também deixa todo o processo de aprovação mais tranquila, já que o cliente acaba participando mais ativamente do processo de design.

Por outro lado, caso o seu cliente não tenha ciência da utilidade de um wireframe, você acabará perdendo tempo e criará uma relação de certa estranheza com o seu cliente, pois ele acabará se perguntando o porquê de estar perdendo o seu tempo com isto. Tenha sensibilidade para conseguir discernir que tipo de cliente você está atendendo.

Dica: Usando o conteúdo a favor do Design

Processos de trabalho e complexidade do projeto

Independentemente de você ser um freelancer ou trabalhar numa empresa, você está sujeito a processos de trabalho e desenvolvimento. O projeto que você ou sua empresa está executando pode ter diversos graus de complexidade e é interessante a existência de vários processos de trabalho que abrangem esta diversidade.

Processos de trabalho e complexidade do projeto

Garanta que para projetos mais complexos você ou sua empresa tenham uma etapa focada em prototipação e wireframe, independentemente deste ser apresentado para o cliente ou não, pois esta etapa tem forte influência na qualidade final de um projeto maior, pois nela é que poderemos prever as telas com precisão, além de criar uma UX mais coesa ,organizada e sólida e por fim o protótipo ainda acaba lhe reduzindo o tempo e a dificuldade de execução da tarefa, pois ela já havia sido bem planejada antes.

- Escrito originalmente por Gabriel Sauer.

Dica: A Orgânica é uma agência de Marketing Digital especializada. Saiba mais!


Você quer
aumentar suas vendas
através do Marketing Digital?

Receba gratuitamente o Diagnóstico Content+Performance, a metodologia de Marketing Digital da Orgânica!

Quero saber como Vender Mais

Quer uma consultoria gratuita de marketing digital?

Assine nosso blog

E entenda como transformar audiência em vendas.

Assine nosso blog

E entenda como transformar audiência em vendas.