“Wireframe”

Depois da pesquisa com os usuários, o Wireframe é utilizado para organizar os requisitos dos clientes e definir os elementos que vão compor a interface gráfica do produto.

O modelo deve ser simples e apenas esboçar o design do projeto, indicando os espaços para textos e imagens, sem incluí-los propriamente. 

O nível de detalhamento depende de quão específico você quer que o wireframe seja, podendo ou não incluir informações sobre, por exemplo, cores e estilo. 

A criação do Wireframe é uma etapa que vem antes da construção e da codificação da interface do produto e ajuda os desenvolvedores a entenderem como  produzir a solução proposta. 

Além disso, esse modelo é importante para a validação pelos stakeholders e para colher o feedback dos clientes antes do início do processo de desenvolvimento.

 

Framework para Wireframe

Não existe assim de fato um framework específico para desenvolver um wireframe. Porém, a criação dele envolve algumas etapas que vão desde a user research até o esboço do esqueleto do projeto:

1. Realizar a pesquisa com os usuários
2. Organizar as informações recolhidas durante a pesquisa
3. Mapear o fluxo do usuário
4. Esboçar e esquematize o produto 

 

Também é importante definir o grau de detalhamento do Wireframe. Os modelos mais simples  contam apenas com os itens mais básicos para o desenvolvimento da interface. Já os mais completos podem incluir footers, informações extras e pequenas indicações de cores. 

Alguns elementos que não podem faltar no seu Wireframe são os espaços para logo, imagens, textos, header e botões.

 

Wireframe nos cursos da PM3 

Para se aprofundar em Wireframe, não deixe de ver a aula “Fundamentos de UX”, do Curso de Product Management da PM3, com a instrutora Natalia Arsand. 

Você vai entender melhor quais os elementos do design de experiência e as principais metodologias utilizadas no processo.