2
respostas

Protótipo QuickBite - Check Point 1

Olá, bom dia!
Tudo bem?

Segue abaixo a minha apresentação do protótipo QuickBite para finalização do Check Point 1.
Gostaria do feedback de vocês sobre o meu projeto, vou anexar uma foto e o link.
E também gostaria da ajuda de vocês com uma questão, eu não consegui de jeito nenhum colocar a função de "voltar" no flow, tentei várias vezes, queria saber onde posso estar errando e não estou vendo.
Obrigada!

https://www.figma.com/proto/kye9JdNhm3ADtQ830W22DN/ESBO%C3%87OS-ALURA?node-id=2296-3&p=f&viewport=278%2C244%2C0.5&t=1lXRGLNwJbYjehMT-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=2296%3A3&show-proto-sidebar=1&page-id=2296%3A2

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Fundamentos do Design (O "Porquê" Visual)

Cores: A paleta foi escolhida para equilibrar confiança e apetite. O azul profundo traz a sobriedade necessária para um serviço que lida com pagamentos e dados, enquanto o laranja (cor de acento) é usado psicologicamente para estimular o apetite e destacar as chamadas para ação (CTAs).

Tipografia: Optei por uma fonte sem serifa moderna para garantir legibilidade em telas pequenas. Trabalhei com uma hierarquia clara, onde o peso bold nos títulos guia o olhar do usuário imediatamente para a função da tela.

Grid e Espaçamento: Utilizei um grid de coluna única centralizado para dispositivos móveis, garantindo que o formulário seja o foco principal. O espaçamento generoso (respiro) evita a fadiga visual e reduz erros de digitação nos campos de entrada.

Sistema de Design (Componentização)

Consistência: Trabalhei com componentes mestre para botões e inputs. Isso garante que a interface seja previsível: se o usuário aprende o que um botão azul faz na primeira tela, ele carregará esse conhecimento por todo o fluxo, o que reduz a carga cognitiva.

Escalabilidade: Essa estrutura permite que o projeto cresça de forma organizada. Qualquer alteração estética em um componente é replicada globalmente, mantendo a integridade visual do sistema.

O Protótipo como Ferramenta de Negócio

Validação com Desenvolvedores: O protótipo de alta fidelidade serve como uma especificação técnica viva. Ele demonstra as transições e o comportamento dos elementos, o que minimiza erros na hora do handoff para o desenvolvimento.

Validação de UX: Com o fluxo interativo, conseguimos testar a jornada do usuário antes da implementação. Identificamos, por exemplo, se a transição da 'Conta Criada' para o 'Início dos Pedidos' está fluida e se os botões de login social estão bem posicionados para facilitar o acesso rápido.

2 respostas

Ei! Tudo bem, Isabelle?

Antes de tudo, eu queria dizer que não consegui acessar seu projeto no figma, está com restrição de visualização.

Mas, pela imagem ficou excelente! É nítido como você aplicou bem os fundamentos de UI Design, na escolha da paleta de cores para estimular o apetite e no uso de componentes para manter a consistência visual. O uso do grid de coluna única foi uma decisão muito acertada para a usabilidade em dispositivos móveis.

Sobre a sua dúvida técnica no fluxo de navegação: o erro comum ao configurar a função de "voltar" acontece quando tentamos ligar o protótipo a uma tela específica, em vez de usar a ação nativa.

Quais foram os passos que tentou fazer com o botão de voltar? Caso não tenha feito, teste ir na configuração e interação (Interaction Details), em vez de escolher "Navigate to" e selecionar uma tela, mude para a opção "Back" (ou "Voltar"). E confere se o botão de voltar está dentro do mesmo contexto de fluxo para que o histórico de navegação funcione.

Espero que dê certinho por ai e continue praticando. Qualquer dúvida, compartilhe com a gente por aqui.

ABraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Ei! Tudo bem, Isabelle?

Antes de tudo, eu queria dizer que não consegui acessar seu projeto no figma, está com restrição de visualização.

Mas, pela imagem ficou excelente! É nítido como você aplicou bem os fundamentos de UI Design, na escolha da paleta de cores para estimular o apetite e no uso de componentes para manter a consistência visual. O uso do grid de coluna única foi uma decisão muito acertada para a usabilidade em dispositivos móveis.

Sobre a sua dúvida técnica no fluxo de navegação: o erro comum ao configurar a função de "voltar" acontece quando tentamos ligar o protótipo a uma tela específica, em vez de usar a ação nativa.

Quais foram os passos que tentou fazer com o botão de voltar? Caso não tenha feito, teste ir na configuração e interação (Interaction Details), em vez de escolher "Navigate to" e selecionar uma tela, mude para a opção "Back" (ou "Voltar"). E confere se o botão de voltar está dentro do mesmo contexto de fluxo para que o histórico de navegação funcione.

Espero que dê certinho por ai e continue praticando. Qualquer dúvida, compartilhe com a gente por aqui.

ABraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado