DRINKHUB.
Design de aplicativo
para descobrir e salvar drinks.
Projeto de curso com conceito visual, wireframes e componentes para um aplicativo de receitas de drinks. Organizei a experiência em descoberta, busca por ingredientes e favoritos.
EXPLORE O CASE ↓
novas ideias.
Da inspiração no verão a uma experiência para descobrir drinks.
Do briefing de receitas
ao escopo do aplicativo.
O DrinkHub nasceu como entrega final do curso Figma Aplicado da EBAC. A proposta original era criar as telas de um aplicativo de receitas de comida.
A liberdade do briefing abriu espaço para levar o projeto a um tema mais pessoal: a coquetelaria. Desenvolvi uma proposta voltada a entusiastas, amadores e bartenders, com a intenção de reunir descoberta, coleção e compartilhamento de receitas.
Meu trabalho passou pela definição do conceito, referências visuais, wireframes, componentes e apresentação das interfaces no Figma.
- CONTEXTO
- Projeto autoral
Curso Figma Aplicado / EBAC - MEU PAPEL
- Conceito visual, wireframes
e design de interface - FERRAMENTAS
- Figma, Photoshop
e ChatGPT - ENTREGA
- Interface mobile
e componentes no Figma
Transformei um briefing aberto em uma proposta de aplicativo, definindo a navegação, a organização das receitas e os componentes que dão consistência às interfaces.
Referências de verão
para definir cores e imagens.
Frutas cítricas, natureza e a sensação de frescor deram origem à direção visual do DrinkHub.
Usei o conceito de “Refreshing” para aproximar leveza e elegância. Limão, laranja e abacaxi aparecem como referências de cor e atmosfera, enquanto as imagens de drinks trazem a variedade de receitas para o primeiro plano.
O moodboard reuniu essas referências antes da construção das telas: água, gelo, vegetação, frutas e momentos de lazer.
Wireframes para organizar
receitas, categorias e ingredientes.
Os wireframes exploraram formas diferentes de apresentar receitas, categorias e ingredientes na tela do celular.
Na Home, os blocos de alturas variadas abrem espaço para a descoberta visual. No Cardápio e nos Favoritos, a organização em coleções ajuda a separar grupos de conteúdo. Na Pesquisa, os ingredientes ganham categorias próprias.
Esses estudos definiram a base de navegação para avançar às interfaces finais.
Tipografia e componentes
consistentes entre as telas.
O verde conecta o aplicativo ao conceito de frescor. A tipografia e os componentes dão continuidade à experiência entre as telas.
Escolhi a Jost para combinar leitura e uma presença contemporânea. A hierarquia original trabalha títulos em 24 e 16 px, textos em 14 px e legendas em 10 px.
Bordas arredondadas aparecem em cards, busca e filtros. Ícones, botões e estados de seleção foram organizados em componentes para manter a linguagem do aplicativo.
Um novo sabor.
Uma nova receita.
Uma ideia para experimentar.
Do verde claro ao profundo.
A paleta documentada nas pranchas explora variações de verde. Nas telas, o verde vivo destaca ações e seleções sobre uma base branca com cinzas.
Home, pesquisa, favoritos
e perfil em quatro telas.
A fotografia é o convite para explorar. A navegação inferior mantém as áreas do aplicativo à mão.
As telas finais mostram quatro momentos da proposta: encontrar inspiração na Home, explorar ingredientes, revisitar favoritos e acessar o perfil.
Toque nas imagens para ver os detalhes das interfaces originais.
01 / Inspiração
Uma composição de receitas e imagens abre a exploração. O convite “Sem Ideia?” apresenta a opção de sortear uma receita.
02 / Ingredientes
Frutas, temperos e lácteos organizam a descoberta. Filtros de tipos de drink complementam a busca.
03 / Coleções
Os favoritos aparecem em grupos visuais para retomar as receitas que despertaram interesse.
04 / Repertório
O perfil reúne receitas em destaque e ingredientes favoritos, com espaço para a dimensão social da proposta.
Resultado: interfaces e componentes no Figma.
A entrega reúne wireframes, componentes reutilizáveis e interfaces mobile. A Home prioriza descoberta visual; a Pesquisa organiza ingredientes por categoria; os Favoritos permitem retomar coleções. Essas diferenças de tarefa orientaram a organização de cada tela.
O projeto de curso demonstra estruturação de conteúdo e consistência de UI. O próximo passo seria testar a busca por ingredientes e a recuperação de favoritos. Os números dos mockups são ilustrativos.
Explore o material original.
As pranchas no Figma mostram o desenvolvimento visual do DrinkHub, do conceito aos mockups.
ABRIR PRANCHAS NO FIGMA ↗Jorge Yasuo / Product Designer
Todos os projetos ↗