Crie um protótipo de baixa fidelidade (wireframe) contendo duas telas principais do aplicativo Hábito+,

Um wireframe é um esboço visual básico que representa a estrutura esquelética de uma página da web ou aplicativo. Ele é usado principalmente nas fases iniciais do desenvolvimento de produtos digitais para estabelecer a disposição básica dos elementos na interface, antes de adicionar detalhes de design gráfico como cores, imagens ou estilos de tipografia. Os wireframes são focados em funcionalidades, hierarquia de conteúdo e comportamento de elementos interativos, como menus e botões. Eles ajudam a definir a arquitetura da informação e a planejar a experiência do usuário. Além disso, servem para facilitar a comunicação entre membros da equipe de projeto, como designers, desenvolvedores, redatores e stakeholders. A partir do wireframe garante-se que todos tenham uma compreensão clara das funcionalidades essenciais e da estrutura da interface antes do desenvolvimento e design detalhado.

Fonte: https://www.adtail.ag/post/wireframe-o-que-tipos-ferramentas. Acesso em: 16 jul. 2025.

Agora, imagine que você está trabalhando em um projeto chamado “Hábito+”, um aplicativo que ajuda os usuários a criarem e manterem hábitos saudáveis. O aplicativo deve ter um design funcional e focado na experiência do usuário para facilitar o acompanhamento diário.

Crie um protótipo de baixa fidelidade (wireframe) contendo duas telas principais do aplicativo Hábito+, seguindo os requisitos:

1) Tela de Monitoramento Diário:
– Apresentar uma lista de hábitos cadastrados pelo usuário (ex: beber água, caminhar, estudar).
– Cada hábito deve ter um indicador visual de progresso diário (ex: checkbox, barra de progresso ou ícone).
– Incluir um botão ou ícone para marcar como feito.
– Oferecer um menu suspenso ou ícone de filtros com as opções: “Hoje”, “Últimos 7 dias” e “Todos”.
– Incluir botão para Adicionar Novo Hábito.

2) Tela de Cadastro de Hábito:
– Nome do hábito.
– Frequência desejada (diário, semanal, personalizado).
– Horário sugerido para notificação.
– Botões: Salvar Hábito e Voltar.

Entrega:

Você pode desenhar seu wireframe:
– Em papel e caneta (e enviar uma foto legível).
– Ou usar ferramentas digitais como Figma, Canva, Adobe XD, Miro, wireframe.cc etc.