Wireframe: o que é e como utilizar

Neste artigo eu vou falar sobre uma ferramenta que vai ajudar a diminuir alterações e te manter sempre alinhado com o cliente, otimizando seu tempo e atacando o objetivo central dos projetos.

E como plano de fundo para conversarmos sobre este assunto, vou falar sobre Wireframe.

Afinal, o que é Wireframe?

Wireframe é o esqueleto de um projeto de interface. Muito utilizado por UI designers, o wireframe é uma representação visual primitiva que auxilia na validação de diagramação e diminuição de alterações.

Bem posicionado nas etapas de um projeto, o wireframe te ajudará nas entregas, facilitando o alinhamento de expectativas com o seu cliente, desonerando de refações e alterações.

Por que utilizar?

Já falei sobre a importância de um processo bem definido no Design, mas vou aproveitar o tema para reforçar.

Existem duas coisas que todo designer quer evitar e os mais conscientes buscam trabalhar desde o começo do projeto: perda de tempo e refação.

Parecem sinônimos mas o que quero falar com isso são assuntos complementares.

Perda de tempo em um projeto é mal investimento dos minutos e horas, que para designers autônomos, significa menos tempo dedicado a outros projetos, e menos dinheiro entrando no caixa.

Já a refação, mesmo próximo à perda de tempo, tem como diferença o fator chamado: expectativa do cliente.

O excesso de refações abala sua relação com o cliente e sua a confiança na entrega.

Quanto menor o tempo investido em refação, melhor a qualidade do tempo investido em um projeto.

E esse é o principal motivo para utilizarmos wireframes.

Aplicado nas etapas mais iniciais, o wireframe tem por objetivo te ajudar na validação de diagramação do layout da sua interface, que consequentemente, ajuda a mitigar as alterações.

Isso tem a ver com um dos pilares do Design Thinking que já citei aqui: feedback.

Colher feedbacks constantemente é a melhor ferramenta que podemos utilizar para alcançar o objetivo e também otimizar o uso do tempo no projeto.

Como criar um Wireframe

Entendido isso, você deve estar se perguntando: como eu faço para criar um Wireframe?

Como resposta, eu tenho outras perguntas para você:

• Já entendeu sobre o seu processo?
• Qual o seu objetivo com o Wireframe?
• Alinhou as expectativas com o cliente?

Respondidas essas perguntas, vamos para o próximo passo.

1- Tenha ciência do objetivo

O objetivo do wireframe norteia o seu nível de fidelidade.

Sim, o wireframe pode assumir vários níveis de fidelidade, que em outras palavras, significa a proximidade da entrega final.

Quanto menor a fidelidade, menor o peso das alterações, já que utilizamos o wireframe para validar e alinhar.

Por outro lado, utilizar baixa fidelidade exige capacidade crítica do seu cliente, que com poucas informações visuais, precisa abstrair-se para compreender o foco do wireframe.

Se optar por maior fidelidade, precisa estar seguro das suas decisões visuais, mas também alinhado ao perfil do cliente, que desta vez precisa das informações bem explícitas para compreender que aquela etapa impacta no resultado final.

O nível de fidelidade vai depender do seu tato.

Você entendeu que seu cliente é mais exigente em relação a posicionamento de elementos, jornada do usuário e consegue abstrair informações? Um wireframe de baixa fidelidade será útil para ambos. Tanto para você no processo de alterações, como para ele no tempo de espera para a entrega.

2- Compreenda as etapas

Posso resumir este tópico em uma palavra: autoconhecimento.

Autoconhecimento, neste caso, significa compreender suas necessidades e também das necessidades de cada perfil de cliente.

Se você tem um processo bem definido, não esqueça de deixar claro para o cliente sobre passado, presente e futuro, isto é, fazer constantes alinhamentos de expectativas.

Por vezes esquecemos que os especialistas somos nós, e utilizamos vários termos técnicos onde apenas outros designers compactuam deles, esquecendo que o cliente também tem sua especialidade.

Compreendeu as etapas? Explicite o que acontece em cada uma delas, mantenha seu cliente informado e ressalte para você mesmo, isso te ajudará a dar sequência e manter a cadência do projeto.

Elementos de um Wireframe

E para pôr em prática o que falei acima, vamos entender sobre os elementos de um wireframe de baixa fidelidade. Entenda-os como uma forma de designers se comunicarem, universalmente.

Para a criação de um wireframe de baixa fidelidade, você deve utilizar elementos básicos da geometria, como linhas, quadrados e circunferências.

1- Imagem

Utilize um quadrado com linhas diagonais para representar uma imagem. Caso seja outro tipo de mídia, como um vídeo, utilize o botão de play..

2- Botão

Você pode utilizar um quadrado com um texto escrito, deixando claro através da cor que é um botão. Normalmente eu costumo usar uma cor de ênfase para o botão, pois isso me dá clareza onde existirão outros botões e como estou ritmando a interface.

3- Texto

Para textos, você pode utilizar retângulos mais altos nos títulos e grupos de retângulos menores para parágrafos.

Observação: Talvez seja melhor trabalhar o wireframe através da definição de conteúdo, pois o Design como complemento visual, deve servir a um objetivo maior do que ser simplesmente bonito.

Conclusão

Espero que tenha curtido este artigo. Nele eu falei sobre wireframe, como trabalhar com essa ferramenta e também a forma de representar os principais elementos.

Se você curtiu, compartilhe com seus amigos designers e comente abaixo caso eu tenha esquecido de falar sobre alguma coisa.

O post Wireframe: o que é e como utilizar apareceu primeiro em Designerd.

Wireframe: o que é e como utilizar publicado primeiro em: https://www.designerd.com.br/