Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

Projeto QuickBite

Olá!

Realizei o projeto QuickBite e gostaria de um feedback de vocês!!

Link: https://www.figma.com/design/7kysrJyhAF3ujv5qCIJv6x/QuickBite?node-id=3-6&t=bi0ifIeir18AWj8S-1

Aqui estão minhas decisões de design:

Cores:

Utilizei laranja como cor principal, associada à alimentação, energia e dinamismo, como por exemplo é utilizado na Fanta ou Burguer King. A cor é aplicada principalmente em botões e elementos de ação, criando destaque para os pontos mais importantes da interface.

Para elementos secundários, foram utilizadas tonalidades mais claras, criando hierarquia visual sem competir com as ações principais.

Tipografia:

A tipografia foi escolhida priorizando legibilidade e simplicidade, especialmente considerando que o aplicativo possui diferentes informações de categorias e ações.

Foram utilizadas diferenças de peso e tamanho para estabelecer hierarquia entre títulos, informações secundárias e textos de apoio.

Componentes:

Os principais elementos da interface foram estruturados como componentes reutilizáveis, como:

  • Botões;
  • Cards de produtos;
  • Campos de entrada;
  • Elementos de navegação;
  • Ícones;
  • Estados de interação.

Também foram considerados diferentes estados dos componentes, como default e hover, permitindo que a interface responda às ações do usuário.

Espaçamento e grid:

O layout utiliza espaçamentos consistentes entre os elementos para evitar uma interface visualmente carregada.

1 resposta

Oi, estudante. Tudo bem com você?

A escolha da cor laranja como tom principal cumpriu bem a função de destacar botões primários e chamadas de ação, enquanto os tons secundários em pêssego(?) ajudaram a direcionar o olhar sem poluir a interface.

A hierarquia tipográfica ficou bem aplicada, mantendo clareza entre os títulos, labels dos campos de texto e descrições das telas. A organização dos componentes, o uso de ícones no menu inferior e a aplicação dos espaçamentos deixaram as telas fluidas e com boa navegabilidade para o usuário.

Pensando no contexto de usabilidade mobile, é possível explorar no futuro a acessibilidade do contraste das fontes escuras sobre o fundo secundário dos botões, garantindo uma leitura ainda mais fluida em diferentes telas.

Qual foi o maior desafio que você encontrou na hora de definir o fluxo entre as telas de login e de confirmação de cadastro?

Parabéns pela qualidade da solução apresentada na atividade e muito obrigado por compartilhar seu projeto aqui com a gente. O fórum continua à disposição para o que você precisar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!