O que é "Wireframe"

Definição e origem do termo

O Wireframe funciona como um protótipo para o desenvolvimento de um aplicativo, um software ou um site. Esta é uma etapa fundamental do design de interface e de produto. 

Ele costuma ser uma estrutura bidimensional que indica o esqueleto da página web, as funcionalidades, o layout, e o comportamento do usuário. O Wireframe corresponde à fase inicial de concepção de um produto e pode ser criado tanto manual, como digitalmente. 

Com o surgimento e o aumento do número de empresas de tecnologia, o Wireframe passou a ser amplamente utilizado pelos times de UX e UI para o desenvolvimento  de produtos. 

Como usar o termo "Wireframe" na prática

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. 

Conteúdos sobre o tema

Confira alguns materiais gratuitos para saber mais sobre Wireframe:

 

 

Você tem vontade de elevar a barra em produto no Brasil?

A PM3, contando com a ajuda da comunidade, está construindo o primeiro Glossário de Produto do Brasil e você pode fazer parte disso!

Ficou com vontade de ajudar também?

Clique aqui e registre sua colaboração. Ah, nós sempre damos os devidos créditos às pessoas. 😉