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

MAT APP

Um app de diário em português, com calendário, uma página para notas e sentimentos e um canvas de desenho para arteterapia. Todos os registros nas telas são conteúdo de exemplo.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Um diário 3D aberto em um calendário, com uma página virando.
Um objeto 3D feito para este mural.

01

Minha contribuição

MAT APP é um app de diário em português. O onboarding apresenta o app como um espaço pessoal para registrar emoções, escrever livremente e praticar arteterapia, então a interface precisa guardar palavras, sentimentos e desenhos no mesmo lugar.

Tela de calendário de março com pequenas artes coloridas atrás de algumas datas, um banner do plano premium e, abaixo, o registro de exemplo Um Dia Perfeito.
Página do diário com a nota Um Dia Perfeito, tags que juntam áreas da vida e sentimentos, uma grade de reações em emoji e uma fileira de miniaturas da galeria.
Um passeio pelas telas do design, não uma gravação: onboarding, home, diário e canvas. Alguns dias têm uma arte, e o registro do dia selecionado fica abaixo. Uma página do diário guarda a nota, as tags de sentimentos, as reações e uma galeria.

03

Palavras, sentimentos e imagens em uma só página

Uma página do diário empilha três cards: a nota escrita, as reações e a galeria do dia. Abaixo da nota, pequenas tags juntam uma área da vida e um sentimento, como Trabalho: Felicidade ou Saúde: Neutro. Em Reações, os emojis escolhidos continuam coloridos e os outros ficam cinza, então dá para ver a seleção de relance.

O canvas de arteterapia começa como um único círculo, datado como um registro do diário, com desfazer, refazer e camadas no topo e símbolos e formatos embaixo.

Cinco celulares inclinados sob o rótulo Completo, cada um com uma etapa ilustrada do onboarding.
Completo: o onboarding em cinco etapas.

04

Dois tamanhos de onboarding

A página Assets guarda duas versões de onboarding. Simples é uma única tela de boas-vindas com o botão Vamos começar. Completo passa por cinco etapas ilustradas, cada uma com uma ideia, e o botão principal e Pular ficam sempre no mesmo lugar. As duas contam com as mesmas ilustrações acolhedoras, que fazem boa parte da explicação.

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

MAT APP

Um app de diário em português, com calendário, uma página para notas e sentimentos e um canvas de desenho para arteterapia. Todos os registros nas telas são conteúdo de exemplo.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Um diário 3D aberto em um calendário, com uma página virando.
Um objeto 3D feito para este mural.

Um diário com espaço para desenhos

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

Minha contribuição

MAT APP é um app de diário em português. O onboarding apresenta o app como um espaço pessoal para registrar emoções, escrever livremente e praticar arteterapia, então a interface precisa guardar palavras, sentimentos e desenhos no mesmo lugar.

Um passeio pelas telas do design, não uma gravação: onboarding, home, diário e canvas.
Tela de calendário de março com pequenas artes coloridas atrás de algumas datas, um banner do plano premium e, abaixo, o registro de exemplo Um Dia Perfeito.
Alguns dias têm uma arte, e o registro do dia selecionado fica abaixo.

O mês como uma pequena galeria

A tela de calendário faz mais do que marcar datas. Alguns dias têm uma pequena arte atrás do número, e o mês começa a parecer uma galeria, enquanto os outros dias ficam limpos. O registro do dia selecionado fica logo abaixo da grade, sob a frase Seu diário para o dia selecionado.

Página do diário com a nota Um Dia Perfeito, tags que juntam áreas da vida e sentimentos, uma grade de reações em emoji e uma fileira de miniaturas da galeria.
Uma página do diário guarda a nota, as tags de sentimentos, as reações e uma galeria.

Palavras, sentimentos e imagens em uma só página

Uma página do diário empilha três cards: a nota escrita, as reações e a galeria do dia. Abaixo da nota, pequenas tags juntam uma área da vida e um sentimento, como Trabalho: Felicidade ou Saúde: Neutro. Em Reações, os emojis escolhidos continuam coloridos e os outros ficam cinza, então dá para ver a seleção de relance.

O canvas de arteterapia começa como um único círculo, datado como um registro do diário, com desfazer, refazer e camadas no topo e símbolos e formatos embaixo.

Tela de onboarding com a ilustração de um diário vermelho com cadeado e um lápis, o título Cuide da sua mente, um dia de cada vez, e os botões Próximo e Pular.
A primeira das cinco etapas do onboarding.
Tela de desenho com um canvas circular transparente, controles de desfazer, refazer e camadas, um botão Salvar e as ferramentas Símbolos e Formatos.
O canvas de arteterapia, pronto para símbolos e formatos.

Dois tamanhos de onboarding

A página Assets guarda duas versões de onboarding. Simples é uma única tela de boas-vindas com o botão Vamos começar. Completo passa por cinco etapas ilustradas, cada uma com uma ideia, e o botão principal e Pular ficam sempre no mesmo lugar. As duas contam com as mesmas ilustrações acolhedoras, que fazem boa parte da explicação.

Cinco celulares inclinados sob o rótulo Completo, cada um com uma etapa ilustrada do onboarding.
Completo: o onboarding em cinco etapas.