Arraste para explorar. Role ou use a pinça para aproximar. Abra a Ajuda para ver os atalhos de teclado.

Yan
ABERTO A
PROJETOS
Vamos conversar
Yan Fontão Boring view
Todos os trabalhos

Case 021Design de app mobile

Ageu

Um app mobile em tema escuro para pedir orçamentos de materiais de construção: liste o que precisa, envie um único pedido e compare o que voltar. O design gira em torno de uma lista de orçamentos que reúne preço, itens atendidos e prazo de entrega no mesmo lugar.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma e do Dribbble
Mockup do Ageu montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

01

Minha contribuição

O Ageu é um app em português para pedir orçamentos de materiais de construção. Você monta um único pedido, com itens como cimento, areia e fio elétrico, e os depósitos respondem com orçamentos.

O escopo em que trabalhei é pequeno: um fluxo de pedido, uma lista de pedidos e uma comparação de orçamentos, em um tema escuro no estilo Material com destaque em lilás.

Pedido número um com a aba Respostas aberta e três cards de orçamento, cada um com preço parcelado em verde, preço à vista, itens atendidos, frete, dias para entrega e um link Comprar.
Tela de pedidos com uma saudação a Thomas, abas de filtro, três cards de pedido que mostram quantos orçamentos cada um recebeu e o status, e um botão Novo pedido.
Um passeio pelas telas do design, não uma gravação: de uma lista de pedidos vazia a um pedido e seus orçamentos. Orçamentos: preço, itens atendidos, frete e prazo de entrega em um só card. Pedidos: número de orçamentos e status em uma olhada, com filtro por etapa.

02

Comparar o que voltou

O resto do fluxo leva à lista de orçamentos. Todo card segue a mesma ordem: o preço parcelado em verde, o preço à vista logo abaixo e dois chips, um para os itens atendidos e outro para frete e prazo de entrega, com Comprar à direita.

Essa repetição mostra os prós e contras de cada opção sem abrir nada. Nos dados de exemplo, o menor preço atende 20 de 23 itens, enquanto outro orçamento atende os 23 com frete grátis e 28 dias de espera.

Tela de pedidos vazia, com uma pequena ilustração escura de lista, uma mensagem curta em português e um botão Novo pedido.
Estado vazio: onde os pedidos vão aparecer e a única ação disponível.

03

Pedidos que dá para acompanhar

A lista mostra quantos orçamentos cada pedido tem e em que pé ele está, com abas para cada etapa: Todos, Aguardando respostas, Respondidos e Concluídos. Quando ainda não há pedidos, o estado vazio diz onde eles vão aparecer e deixa Novo pedido como única ação.

Um novo pedido é um fluxo de três etapas, com Voltar, pontos de progresso e Próximo em uma só barra. Na etapa de itens, cada linha mantém a quantidade e a unidade à vista, com editar e excluir ao lado.

Duas telas escuras sobre fundo preto: a etapa de itens de um novo pedido, com materiais e quantidades, e a lista de orçamentos do pedido número um.
Apresentação do Dribbble: a etapa de itens ao lado da lista de orçamentos.
000

Instruções

Yan Fontão
Toque
Abre uma tela
Clique
Abre uma tela
Arrastar
Move pelo mural
Rolagem
Mouse aproxima, trackpad move, pinça aproxima
− +
Afasta até ver o mural inteiro, ou aproxima
Setas
No case: ↑↓ trocam de case, ←→ trocam de mídia. No mural: movem
Espaço
Abre ou volta
Enter
Abre
Esc Backspace
Volta
Home
Volta ao centro, depois à abertura
PgUp PgDn
Canal anterior ou próximo
Tab
Percorre projetos e links
R
Projeto aleatório
0–9
Digite um canal, 1–61
?
Esta página
Atalhos

Música do mural

Arquivos comprimidos e nivelados para a web.

ABERTO A
PROJETOS
Vamos conversar

Nova mensagem para o Yan

Conte quem você é e eu respondo.

000

Sobre o Yan

Oi, eu sou o Yan

Product Designer/ Design Engineer

A maioria dos produtos perde algo entre o design e o código. Os meus não: eu pesquiso o problema, desenho o produto e coloco a interface no ar, então o que você aprova é exatamente o que seus usuários recebem.

  • 2018início em software
  • UI + codedesign e implementação

Trabalhei com Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido ou presencial

Retrato de Yan Fontão sentado, de suéter verde e óculos, segurando um microfone.
ABERTO A
PROJETOS
Vamos conversar
ABERTO A
PROJETOS
Vamos conversar
000

canal bloqueado

Sob NDA

Digite o código

Peça o código ao Yan ↗
ABERTO A
PROJETOS
Vamos conversar
YAN FONTÃO Cases completos

Canal 21 Design de app mobile

Ageu

Um app mobile em tema escuro para pedir orçamentos de materiais de construção: liste o que precisa, envie um único pedido e compare o que voltar. O design gira em torno de uma lista de orçamentos que reúne preço, itens atendidos e prazo de entrega no mesmo lugar.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma e do Dribbble

Ver no Dribbble

Mockup do Ageu montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

Um só pedido de materiais de construção, todos os orçamentos lado a lado

Telas do arquivo de design original no Figma e do Dribbble, com dados de exemplo.

Minha contribuição

O Ageu é um app em português para pedir orçamentos de materiais de construção. Você monta um único pedido, com itens como cimento, areia e fio elétrico, e os depósitos respondem com orçamentos.

O escopo em que trabalhei é pequeno: um fluxo de pedido, uma lista de pedidos e uma comparação de orçamentos, em um tema escuro no estilo Material com destaque em lilás.

Um passeio pelas telas do design, não uma gravação: de uma lista de pedidos vazia a um pedido e seus orçamentos.
Pedido número um com a aba Respostas aberta e três cards de orçamento, cada um com preço parcelado em verde, preço à vista, itens atendidos, frete, dias para entrega e um link Comprar.
Orçamentos: preço, itens atendidos, frete e prazo de entrega em um só card.

Comparar o que voltou

O resto do fluxo leva à lista de orçamentos. Todo card segue a mesma ordem: o preço parcelado em verde, o preço à vista logo abaixo e dois chips, um para os itens atendidos e outro para frete e prazo de entrega, com Comprar à direita.

Essa repetição mostra os prós e contras de cada opção sem abrir nada. Nos dados de exemplo, o menor preço atende 20 de 23 itens, enquanto outro orçamento atende os 23 com frete grátis e 28 dias de espera.

Tela de pedidos com uma saudação a Thomas, abas de filtro, três cards de pedido que mostram quantos orçamentos cada um recebeu e o status, e um botão Novo pedido.
Pedidos: número de orçamentos e status em uma olhada, com filtro por etapa.
Tela de pedidos vazia, com uma pequena ilustração escura de lista, uma mensagem curta em português e um botão Novo pedido.
Estado vazio: onde os pedidos vão aparecer e a única ação disponível.

Pedidos que dá para acompanhar

A lista mostra quantos orçamentos cada pedido tem e em que pé ele está, com abas para cada etapa: Todos, Aguardando respostas, Respondidos e Concluídos. Quando ainda não há pedidos, o estado vazio diz onde eles vão aparecer e deixa Novo pedido como única ação.

Um novo pedido é um fluxo de três etapas, com Voltar, pontos de progresso e Próximo em uma só barra. Na etapa de itens, cada linha mantém a quantidade e a unidade à vista, com editar e excluir ao lado.

Duas telas escuras sobre fundo preto: a etapa de itens de um novo pedido, com materiais e quantidades, e a lista de orçamentos do pedido número um.
Apresentação do Dribbble: a etapa de itens ao lado da lista de orçamentos.