Go to the profile of Matheus Castro
Matheus Castro
“We are made of starstuff.”

Sobre Wireframes e Protótipos

Modelo de wireframe em papel

Wireframes

O wireframe é uma forma sucinta de desenhar estruturas de interfaces, que elucida de maneira simplificada como deve ser o funcionamento de algum produto. Objetivando organizar os elementos que farão parte da compostura do design, sendo assim, é preciso planejar todo o processo para alcançar os objetivos previamente definidos. Os wireframes não mostram como será o layout final, na verdade são como que um rascunho.

Botando a Mão na Massa

Na hora de elaborar os wireframes, é preciso estar atento a algumas questões. Segue abaixo uma série dos fatores que ajudam na concepção dos wireframes:

  • Os objetivos do negócio;
  • Os requisitos do sistema;
  • O conceito criativo do produto;
  • Os guidelines de branding;
  • As boas práticas de usabilidade e navegação;
  • As possibilidades e as limitações técnicas da plataforma a qual o produto será concebido (HTML, JS, CSS, e etc);
  • As possibilidades, as limitações, e boas práticas do dispositivo onde a interface será acessada (desktop, smartphones, tablets, caixas eletrônicos, notebooks e etc).

E os Protótipos…

Além de pensar na estrutura de interface, também é preciso ponderar a forma como o usuário navegará por ela, como serão as interações, que é definido pelo processo de navegação. Para tal tarefa existe os protótipos. “Protótipos são versões interativas dos wireframes, onde é possível clicar ou interagir com algumas partes da tela para simular como será seu funcionamento…”. Logo provêem maior interatividade, menor cansaço e uma aproximação mais fiel à realidade na experiência de navegação pela interface a ser trabalhada.

É evidente que existe diferença entre wireframes e protótipos, mesmo pertencendo a mesma família. Os wireframes são representações mais simples de uma interface, por isso a sua concepção necessite menos trabalho. Já os protótipos são representações mais fiéis a realidade e a maneira como a interface será, logo demandam mais trabalho.

Referência

Capítulo 3: Wireframes, Protótipos e Rabiscoframes do livro “Introdução e Boas Práticas em UX Design” do autor Fabricio Teixeira.