Wireframe — Você sabe para que serve?
No universo do design, você já deve ter ouvido falar sobre os wireframes mas, tem ideia do que é e qual a sua função?
Entre explicações e analogias, vamos entender um pouco mais sobre essa ferramenta tão utilizada e importante para o desenvolvimento de interfaces.
A definição da palavra:
Wire vem de fio ou linha.
Frame vem de moldura e ou estrutura.
Então, a palavra wire-frame é um termo em inglês que combinada, significa estrutura de linhas ou estrutura de arame.
Esta definição explica muito sobre o formato do processo e sua aplicação nos projetos.
Quando começamos a desenvolver um wireframe, não pensamos em cores, tipografias ou marca, o foco está em desenvolver a arquitetura e distribuir os elementos na interface. Por isso, esses elementos estéticos que fazem parte da camada de UI, geralmente é a última parte a ser construída (o famoso topo do iceberg).
O wireframe é o momento de mergulhamos nas ações dos usuário e nos comportamentos das telas como resultados dessas ações. Então, pensamos nas estruturas (Frame) da interface e a desenhamos com linhas (Wire) muito básicas e sem cores, utilizando apenas branco e tons de cinza, justamente porque essa é a parte onde você vai pensar apenas na arquitetura da informação.
Vamos fazer uma analogia para entender melhor:
Imagine que faremos uma receita de bolo.
Primeiro separamos os ingredientes e misturamos todos eles para formar a massa do nosso bolo, para que ele seja assado, certo?!
E nessa parte o bolo não é bonito, mas ele contém uma estrutura formada pelos ingredientes para atingir o resultado de uma massa fofinha e saborosa.
Depois de o bolo assado, é que nós vamos nos preocupar em construir sua cobertura, podemos fazer um creme e depois enfeitar esse bolo com confeitos para trazer um pouco de cor. E está pronta nossa receita de um bolo completo de saboroso.
O wireframe não é tão diferente, ele é a junção dos nossos ingredientes (das ações e comportamentos) que formam a massa (interface em linhas simples) onde teremos um resultado visível de como será a estrutura da interface.
Só depois de ter a estrutura pronta e validada é que vamos confeitar pensando em cores, tipografias e etc.
Por consequência, o wireframe por ser uma estrutura simples e básica, acaba também sendo barato e economizando tempo no projeto, imagine se você planejar toda cobertura do bolo e no final a massa acabar queimando, fica difícil de aplicar a cobertura porque perdemos o sabor principal da nossa receita, certo?!
Assim acontece com as interfaces, se planejamos toda uma camada estética e não termos uma massa para aplicar, ela é apenas uma camada estética sem funcionalidade.
Espero que esse conteúdo tenha lhe ajudado a entender melhor o objetivo do wireframe e como ele funciona.
Comenta aqui embaixo pra gente o que você achou.
Até a próxima! ;)
