O que é um wireframe e como fazer um?

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

Não importa se você está usando um wireframe para um aplicativo ou site, uma coisa é certa: você precisará criar mais de um wireframe. Wireframes tratam do fluxo do usuário. Como o usuário se move pelo seu aplicativo? Há algum lugar específico ao qual você gostaria que ele fosse?

Antes de começar a criar seus diagramas, mapeie os possíveis caminhos que o usuário pode percorrer, listando cada nova tela que ele poderá encontrar. Para cada tela, você precisará de um wireframe adicional.

Esse trabalho preliminar pode parecer exagerado, mas vale a pena. Ir diretamente para o processo de criação de wireframes sem ter uma ideia clara do fluxo do usuário acaba gerando diagramas confusos e bagunçados.

2. Adicionar formas básicas

Depois de planejar tudo de forma minuciosa, você estará pronto para iniciar os rascunhos. Comece selecionando um “quadro” para seu diagrama. Se você estiver criando um wireframe de aplicativo, selecione uma forma semelhante à tela de um celular. Para um wireframe de site, escolha uma forma semelhante a uma janela de navegador. A maioria das plataformas de wireframes digitais terá ambos os quadros básicos disponíveis em sua biblioteca de formas.

Em seguida, adicione os maiores elementos do wireframe, como formas e caixas básicas, que representam itens como uma barra de cabeçalho, coluna lateral, caixa de texto etc. Não há necessidade de incluir texto ou imagens neste momento, basta estabelecer o arranjo geral.

Repita este processo para cada wireframe que você precisa criar.

3. Adicionar botões e vincular wireframes

Depois de estabelecer o arranjo dos wireframes, é hora de adicionar algumas funcionalidades. Em qualquer tela do seu produto, provavelmente há vários botões que direcionarão o usuário para uma nova tela. Você pode tê-los adicionado como formas no último passo, caso contrário, selecione uma forma básica para representar cada botão e adicione-a agora. Você também pode adicionar qualquer texto que apareça no botão (“página inicial”, por exemplo).

Se sua plataforma de wireframes inclui recursos de vinculação, vincule cada botão ao wireframe para o qual ele deve direcionar o usuário.

Dica: selecione uma única fonte para usar no wireframe. Aplique texto em negrito e itálico quando for necessário, e espere para usar qualquer outro estilo de texto nos mockups e nos protótipos.

4. Obter opiniões e fazer alterações

Você dedicou muitas horas aos seus wireframes. O arranjo parece estar certo, e você os vinculou para simular o fluxo do usuário. Agora é hora de compartilhá-los com outras partes interessadas. Há aspectos dos seus wireframes que provavelmente precisam ser melhorados, e por isso que é importante mostrá-los para pessoas novas antes de acrescentar mais detalhes.

Talvez a localização de um botão não esteja perfeita. Ou talvez a barra de menus seja muito grande e esteja cobrindo a página. Seja qual forem as opiniões dos seus colegas, ouça e considere-as pois é um processo colaborativo.

Faça as alterações sugeridas para melhorar seus wireframes. Repita o processo até que seus projetos sejam aprovados por todas as partes interessadas necessárias.

5. Adicionar detalhes

Seus diagramas agora provavelmente são wireframes de fidelidade média. Com o projeto básico aprovado, você pode começar a aprimorar os detalhes. Adicione imagens e texto. Use cores para diferenciar os diversos elementos na página, mas continue mantendo tudo na escala de cinza. Certifique-se de que tudo está no tamanho certo, até o último pixel.

6. Compartilhar seus wireframes

Agora você deve ter um conjunto de wireframes funcionais de alta fidelidade. Compartilhe-os com as partes interessadas do projeto e equipes relevantes.