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 022Design de app mobile

AglomeraNão

Uma interface de app mobile em português para agendar a ida às compras longe de aglomerações, com mapa de calor de Manaus, lojas marcadas conforme o movimento e um horário para agendar.

Meu papel
Design de interface
Status do projeto
App mobile · Acervo do Figma
Mockup do AglomeraNão montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

01

Minha contribuição

A tela inicial faz uma pergunta direta: já imaginou fazer suas compras sem aquele amontoado de gente e sem correr risco de se infectar com corona? O AglomeraNão responde com três opções, Check-in, Agenda e Mapa, e três tipos de lugar: mercados, farmácias e petshops.

Tela do mapa de calor com o cabeçalho Aglomeranão! e um campo de busca acima de um mapa de Manaus, com círculos violeta, laranja e azuis de tamanhos diferentes sobre bairros como Novo Aleixo e Petrópolis e um botão redondo de gráfico no canto inferior direito.
Página da loja com foto da fachada e a tag fluxo tranquilo, distância, tempo e nota, um mapa de ruas e uma barra inferior com o horário 14:15 ao lado de um botão violeta Agendar!
Gravação do protótipo no Figma. A contagem regressiva do check-out, o mapa de aglomeração de Manaus e o painel de estatísticas. O mapa de calor, com círculos sobre bairros de Manaus. A página da loja, que termina com um horário e o botão Agendar!

02

O movimento em uma olhada

O mapa de calor coloca círculos de tamanhos e cores diferentes sobre os bairros de Manaus, abaixo de um campo de busca. A página da loja leva a mesma ideia para uma pequena tag na foto, como fluxo tranquilo, ao lado da distância, do tempo e da nota. Os nomes das lojas são conteúdo de exemplo.

Tela inicial com uma saudação ao visitante sobre uma foto de compras, um texto curto sobre comprar sem aglomeração e, depois, as opções Check-in, Agenda e Mapa e cards de Mercados, Farmácias e Petshops.
A tela inicial, com as opções e três tipos de lugar.

03

Uma página de loja que termina em um horário

A página da loja repete a tag e os três números, acrescenta um mapa de ruas e fecha com uma barra embaixo: um horário, 14:15, ao lado do botão Agendar! Tudo o que vem acima leva a essa única ação.

Prancha com variações do logotipo: não! sozinho e Aglomera com não! empilhado e em uma linha, em preto, branco e violeta, sobre fundos branco e preto.
Variações do logotipo, com o peso no não!

04

Todo o peso no não

O logotipo escreve Aglomera em uma fonte condensada leve e não! em uma pesada, em violeta, e o próprio nome dá o recado em voz alta. O mesmo violeta aparece nos ícones e no botão principal em todas as telas.

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 22 Design de app mobile

AglomeraNão

Uma interface de app mobile em português para agendar a ida às compras longe de aglomerações, com mapa de calor de Manaus, lojas marcadas conforme o movimento e um horário para agendar.

Meu papel
Design de interface
Status do projeto
App mobile · Acervo do Figma
Mockup do AglomeraNão montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

Veja o movimento do lugar antes de sair

Telas do arquivo original do Figma. Os nomes das lojas e os números são conteúdo de exemplo.

Minha contribuição

A tela inicial faz uma pergunta direta: já imaginou fazer suas compras sem aquele amontoado de gente e sem correr risco de se infectar com corona? O AglomeraNão responde com três opções, Check-in, Agenda e Mapa, e três tipos de lugar: mercados, farmácias e petshops.

Gravação do protótipo no Figma. A contagem regressiva do check-out, o mapa de aglomeração de Manaus e o painel de estatísticas.
Tela do mapa de calor com o cabeçalho Aglomeranão! e um campo de busca acima de um mapa de Manaus, com círculos violeta, laranja e azuis de tamanhos diferentes sobre bairros como Novo Aleixo e Petrópolis e um botão redondo de gráfico no canto inferior direito.
O mapa de calor, com círculos sobre bairros de Manaus.

O movimento em uma olhada

O mapa de calor coloca círculos de tamanhos e cores diferentes sobre os bairros de Manaus, abaixo de um campo de busca. A página da loja leva a mesma ideia para uma pequena tag na foto, como fluxo tranquilo, ao lado da distância, do tempo e da nota. Os nomes das lojas são conteúdo de exemplo.

Página da loja com foto da fachada e a tag fluxo tranquilo, distância, tempo e nota, um mapa de ruas e uma barra inferior com o horário 14:15 ao lado de um botão violeta Agendar!
A página da loja, que termina com um horário e o botão Agendar!

Uma página de loja que termina em um horário

A página da loja repete a tag e os três números, acrescenta um mapa de ruas e fecha com uma barra embaixo: um horário, 14:15, ao lado do botão Agendar! Tudo o que vem acima leva a essa única ação.

Tela inicial com uma saudação ao visitante sobre uma foto de compras, um texto curto sobre comprar sem aglomeração e, depois, as opções Check-in, Agenda e Mapa e cards de Mercados, Farmácias e Petshops.
A tela inicial, com as opções e três tipos de lugar.

Todo o peso no não

O logotipo escreve Aglomera em uma fonte condensada leve e não! em uma pesada, em violeta, e o próprio nome dá o recado em voz alta. O mesmo violeta aparece nos ícones e no botão principal em todas as telas.

Prancha com variações do logotipo: não! sozinho e Aglomera com não! empilhado e em uma linha, em preto, branco e violeta, sobre fundos branco e preto.
Variações do logotipo, com o peso no não!