Criar um wireframe e um protótipo básicos

Neste projeto, aprenderemos a criar um wireframe e um protótipo básicos de um aplicativo móvel.

Vamos imaginar que você teve uma ideia sensacional para um aplicativo...Isso ou aquilo. No aplicativo, os usuários recebem duas opções e precisam escolher apenas uma. É genial! Antes de finalizar o logotipo e começar a escolher os brindes da empresa, você deverá criar alguns wireframes e protótipos básicos para testar sua ideia de aplicativo com os usuários.

Wireframes são mockups de baixa fidelidade de páginas da web ou aplicativos. Você pode usar wireframes para criar rapidamente várias versões de como seu produto final pode ficar, sem gastar muito tempo se concentrando em detalhes como cores, imagens ou outros elementos de design.

Uma forma de avançar com os wireframes é usar protótipos, que são designs com elementos interativos. Eles ajudam a criar, testar e mostrar como os usuários vão navegar e interagir com o produto.

Juntos, os wireframes e os protótipos ajudam você a planejar como os usuários vão navegar e interagir com os aplicativos.

Ao final deste projeto, você terá experiência em trabalhar com estruturas, formas, texto e prototipagem no Figma. Vamos começar.

Projetar um wireframe com estruturas, formas e texto

Para criar nosso wireframe, vamos usar os seguintes objetos:

• Duas estruturas para conter os designs
• Sete retângulos para representar as imagens e os botões no aplicativo
• Quatro camadas de texto para identificar os rótulos dos botões principais

Criar um arquivo

Para começar, precisamos de um novo arquivo de design.

1. Faça login na sua conta Figma em figma.com.
2. No navegador de arquivos, clique em Rascunhos.
3. Clique em Novo arquivo de design.

Adicionar a primeira estrutura

Cada estrutura representa uma página diferente do nosso aplicativo. Também queremos que nosso aplicativo seja compatível com dispositivos móveis, portanto, usaremos tamanhos de estruturas predefinidos. Para este projeto, vamos nos concentrar nas duas estruturas a seguir:

• Uma estrutura "Isso ou aquilo" que mostra duas opções
• Uma estrutura "Isso" que mostra o que acontece quando o usuário seleciona "Isso"

Vamos começar com o quadro "Isso ou aquilo".

1. Clique no ícone de estrutura na barra de ferramentas ou pressione F.
2. No painel Design na barra lateral direita, selecione o tamanho predefinido do iPhone 14 Pro.

Agora que temos uma estrutura, vamos renomeá-la. Estabelecer uma estrutura de nomenclatura clara facilita a localização e o gerenciamento de camadas nos arquivos.

1. No painel de camadas, clique duas vezes no nome da estrutura que você acabou de colocar no canvas.
2. Renomeie a estrutura para "Isso ou Aquilo" e pressione return (Mac) ou enter (Windows).

Adicionar formas

Como não precisamos entrar em muitos detalhes com cores, estilos e design, podemos usar formas básicas para representar o layout do nosso aplicativo.

Vamos adicionar retângulos à estrutura "Isso ou Aquilo" para representar as duas opções.

1. Selecione a ferramenta Retângulo ou pressione R e clique dentro da estrutura "Isso ou Aquilo".
2. Use os campos Largura e Altura na barra lateral direita para inserir valores de pixels para a forma. Definimos a largura do nosso retângulo como 319 e a altura como 240.
3. Clique e arraste o retângulo para posicioná-lo na parte superior da estrutura. O Figma tentará alinhar o objeto com outros ao redor dele, fazendo ajustes automáticos. Nesse caso, ajustaremos o retângulo ao centro do quadro.
4. Para personalizar a cor de preenchimento, selecione o retângulo e abra o seletor de cores na seção Preenchimento, na barra lateral direita. Usamos o código hexadecimal #8ED3E2 como cor de preenchimento.

Queremos que o segundo retângulo tenha exatamente o mesmo tamanho, portanto, vamos duplicar o primeiro retângulo.

1. Selecione o retângulo e pressione Command + D (Mac) ou Control + D (Windows) para duplicar.
2. O novo retângulo será colocado diretamente sobre o primeiro retângulo. Clique e arraste o segundo retângulo para o meio da estrutura.
3. Altere a cor de preenchimento do segundo retângulo. Usamos o código hexadecimal #D48C8C como cor de preenchimento.

Ficou ótimo! Agora, mude o nome das duas camadas retangulares que você adicionou. Nomeie o retângulo superior "Imagem Isso", e o retângulo inferior "Imagem Aquilo".

Agora que você sabe como adicionar e modificar formas, adicione mais dois retângulos para representar o "Botão Isso" e o "Botão Aquilo". Cada retângulo tem uma largura de 130 e uma altura de 95. Não se esqueça de renomear as camadas. Quando terminar, a estrutura deve ter a seguinte aparência:

Adicionar texto

A primeira estrutura está quase pronta. Vamos adicionar algum texto para identificar os botões "Isso" e "Aquilo".

1. Selecione a ferramenta Texto na barra de ferramentas ou pressione T.
2. Clique no retângulo inferior esquerdo e digite "Isso".
3. Com a camada de texto selecionada, use as configurações de Texto para ajustar o tamanho para 24.
4. Clique e arraste a camada de texto para movê-la em direção ao centro do retângulo inferior. O Figma tentará alinhar a camada de texto ao centro do retângulo, fornecendo uma guia vermelha como indicador visual.

No momento, a camada de texto está logo acima da camada retangular. Queremos combinar essas duas camadas em um grupo, para que elas possam ser tratadas como um único objeto.

Para agrupar essas camadas, selecione os dois objetos clicando e arrastando o cursor sobre elas no canvas, capturando-as na caixa de seleção azul. Em seguida, use o seguinte atalho de teclado para criar um grupo:

• macOS: Command + G
• Windows: Control + G

O painel de camadas na barra lateral esquerda agora exibe apenas uma camada chamada “Grupo 1”. Renomeie-a para “Botão Isso”.

Agora que você já sabe como adicionar camadas de texto e criar grupos, crie um "Botão Aquilo". Quando terminar, o design deve ter a seguinte aparência:

Criar a segunda estrutura

Agora que a estrutura "Isso ou Aquilo" está completa, precisamos pensar em como será a próxima estrutura.

Se o usuário clicar no "Botão Isso", a "Imagem Isso" deverá ficar maior, e a "Imagem Aquilo" deverá desaparecer.

Não precisamos começar do zero. Basta duplicar a primeira estrutura, clicando em Command + D (Mac) ou Control + D (Windows). Renomeie a nova estrutura como "Isso".

Remova a "Imagem Isso" selecionando os objetos e pressionando delete.

Em seguida, expanda o tamanho da "Imagem Isso" para que ela ocupe a maior parte da estrutura.

Adicionar prototipagem

Terminamos de criar um wireframe para duas páginas do nosso novo aplicativo móvel sensacional.

Agora, queremos fornecer algumas orientações mais claras sobre como essas duas páginas funcionam juntas. Como um usuário passa da estrutura "Isso ou Aquilo" para a estrutura "Isso"? Que tipos de interações e animações podemos esperar ao navegar entre as duas páginas?

Podemos responder às perguntas acima com a prototipagem.

Quando os usuários clicam no "Botão Isso" na estrutura "Isso ou Aquilo", queremos que eles sejam direcionados para a estrutura "Isso".

Vamos criar um protótipo de conexão para criar a interação:

1. Clique na aba Protótipo na barra lateral direita.
2. Passe o mouse sobre a camada "Botão Isso" na estrutura "Isso ou Aquilo".
3. Clique no sinal de mais azul na borda do botão e arraste a conexão até a estrutura "Isso". O modal de detalhes da interação será aberto.
4. No menu suspenso, defina o gatilho como Ao tocar.
5. Defina a ação como Navegar para. No menu suspenso, defina o destino como a estrutura "Isso".
6. No menu suspenso Animações, selecione animação inteligente.

Depois de criar uma interação, saia do modal Detalhes da interação. Pressione o botão Apresentar na barra de ferramentas para testar.

Parabéns, está tudo pronto!