Bottom tab tab, side drawer e Floating Action Button (FAB) são os padrões mais frequentemente utilizados para navegação móvel de nível superior. Se você quiser criar caminhos de navegação claros e simples, use um desses padrões em seu aplicativo.
Bring in Actual Copy
Depois de estar satisfeito com a sua hierarquia visual, comece a substituir placeholders e texto fictício por conteúdo real (cópia real ou o que é relevante para o utilizador). Há uma razão importante pela qual devemos evitar textos fictícios nesta fase – Lorem Ipsum não comunica como a página suporta os usuários para alcançar seus objetivos. Além disso, muitos dos elementos visuais que criamos são baseados no conteúdo que temos em nossos produtos. Quando você começa a adicionar conteúdo real, você vai perceber que alguns elementos UI (ou mesmo seções UI) não são necessários para o seu produto.
Por vezes, ao preencher seus wireframes com detalhes reais, você pode notar que o layout que você tem não está funcionando bem. Neste caso, é importante iterar e encontrar uma melhor forma de representar as informações que você está tentando comunicar.
Depois de preencher a página com uma cópia real, teste se a página flui para o usuário. Alguns conteúdos da sua página podem estar fora de ordem. Este é o momento perfeito para reorganizar o conteúdo da página e melhorar a composição.
Below é um exemplo da nossa wireframe para a nossa tela inicial que tem dados reais. Diferentes tamanhos de fontes são usados para priorizar alguns blocos de UI (como categorias de alimentos).
Segure bem a sua escala de conteúdo
Se o seu design ficar ótimo em uma tela de telefone de tamanho médio como o iPhone XS, isso não significa que os usuários do iPhone 5 e iPhone XS Max terão a mesma grande experiência. Embora seja absolutamente bom começar com uma tela de tamanho médio quando se usa wireframing, também é essencial verificar como o conteúdo fica em telas de tamanhos diferentes (tanto menores quanto maiores) e ajustá-la, se necessário.
Conectar as Páginas Juntas para Criar um Fluxo
Embora seja possível enviar o seu desenho como uma coleção de telas individuais, é melhor criar um fluxo a partir delas. Os fluxos UX tornam mais fácil para a equipe entender os detalhes dos cenários de interação – eles comunicam como as pessoas devem interagir com um produto.
Os fluxos UX também farão você pensar sobre a funcionalidade do aplicativo como um todo. Por exemplo, após visualizar o fluxo UX, você pode notar que você precisa introduzir um estado extra entre a tela inicial e uma página com resultados de busca (porque o backend do seu sistema levará alguns segundos para retornar os resultados).
É também uma boa idéia dar um número de referência para cada tela. Os números de referência facilitarão muito sua vida ao discutir o projeto com outros membros da equipe ou partes interessadas.
Teste Suas Decisões de Projeto
Teste é o passo final (e um dos mais importantes) no wireframing. Testar implica interações do usuário e é por isso que este termo é frequentemente usado no contexto de protótipos. Mas é possível conduzir testes simples para um fluxo criado a partir de wireframes. Usando Balsamiq, é possível criar protótipos simples clicáveis ligando wireframes entre si. O objetivo de tais testes é ver se as telas trabalham juntas.
Conclusão
O objetivo final do wireframing é identificar o contorno do conteúdo e criar uma base sólida para as etapas futuras do processo de design. Wireframes bem projetados tornam o design visual e de interação muito mais fácil.
Como em qualquer atividade de design, gaste tempo suficiente experimentando diferentes ferramentas e processos e você encontrará seu próprio estilo para wireframing. A prática torna perfeito.
Palavras de Nick Babich
Originalmente publicado no site Balsamiq’s UI Education Site