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.
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.
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.
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!
