Quando se trata de wireframes, quanto mais cedo você começar, melhor. (Na medida do possível, é claro.) Determinados projetos exigem diferentes tipos de fluxos de trabalho, mas, como regra geral, você deve criar seu primeiro wireframe na fase inicial ou de planejamento do ciclo de vida do projeto.
Se for criar o wireframe na fase inicial, comece com wireframes de baixa fidelidade. A fase inicial é o melhor momento para fazer experiências: você teve uma boa ideia para um site ou aplicativo, mas não sabe exatamente como ele será. Wireframes de baixa fidelidade são rápidos e fáceis de criar, portanto, são as ferramentas de brainstorming perfeitas. Registre suas ideias, envie-as para outras partes interessadas para obter opiniões e, em seguida, comece o processo tudo de novo.
Conforme o projeto avança para a fase de planejamento, comece a fazer wireframes de média e alta fidelidade. A fase de planejamento é quando os projetos começam a se concretizar, e você precisará de wireframes abrangentes antes de passar para a próxima fase — a execução.
Conforme o andamento do projeto nas duas primeiras fases, seus wireframes devem se tornar mais complexos e aprimorados. Ao entregar os designs para a equipe de desenvolvimento para iniciar a codificação (a fase de execução), o processo de wireframes será encerrado.
Elementos de um wireframe
Wireframes parecem simples pois não há muito acontecendo esteticamente. De certa forma, é por isso que eles são tão eficazes. Ao desenvolver sites e aplicativos, é muito tentador tentar criar fontes e cores logo antes de planejar a experiência do usuário adequadamente. Em wireframes, você deixa essas distrações de lado e foca em três aspectos fundamentais do seu produto: design de informações, design de navegação e design de interface.
Design de informações
Ao interagir com seu aplicativo ou site, os usuários recebem informações constantemente: que tipo de site estão visitando? Como podem interagir com ele? Qual é o “propósito” do site? O processo é automático e, em grande parte, subliminar. Como designer, você facilita essa interação ao escolher como apresentar as informações em uma página.
Como é isso na prática?
Por exemplo, se o seu site fornece um serviço de mensagens, a maioria dos usuários que visitam ele se enquadra em duas categorias: usuários existentes ou novos visitantes. Usuários existentes provavelmente farão login, e novos visitantes podem querer criar uma conta ou simplesmente aprender mais sobre o seu serviço. Na página inicial, você precisa atender cada tipo de visitante e lhes fornecer informações suficientes para atingir seus respectivos objetivos. Talvez essa informação seja comunicada por meio de botões: fazer login, cadastre-se ou mais informações. O design de informações decide o que incluir e onde posicioná-los.
Design de navegação
Todos nós já gastamos muito tempo procurando o menu de “Configurações” em aplicativos. E todos já tivemos a sensação de que um site está dando voltas na navegação. Por exemplo, quando você acha que a página de “Informações da conta” está apenas a um clique, mas você acaba voltando para a página inicial ou, pior, uma página de erro 404. Enfim, a moral da história é que nós, os usuários, passamos por problemas de design de navegação o tempo todo.
O design de navegação determina as maneiras pelas quais os usuários se movimentam pelo seu aplicativo ou site. A partir de qualquer tela, o usuário pode acessar várias outras telas. No entanto, eles não saberão disso a menos que você os informe. Menus suspensos, links clicáveis e barras de rolagem são exemplos de elementos visuais que ajudam o usuário a navegar no seu produto.
Design de interface
O design de interface junta tudo isso: informações, navegação e, bem, tudo o que está em seu wireframe. Tanto o design de navegação quanto o design de informações têm componentes na tela, como botões, menus etc. O design de interface é como esses elementos são incorporados na interface do usuário como um todo, que inclui outros elementos como caixas de texto, imagens de cabeçalho e barras laterais.
Como fazer um wireframe
Agora que você entende a teoria dos wireframes fornecida neste guia, é hora de colocar esse conhecimento todo em prática. Veja alguns passos para começar a criar wireframes:
1. Mapear um plano
