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

NeverSoft

Um app de investimentos em português que começa mostrando como a carteira está dividida e desce até cada ativo. Todos os nomes e números nas telas são dados de exemplo.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Capa de apresentação do NeverSoft, do arquivo de design original.
Capa de apresentação do arquivo original.

01

Minha contribuição

NeverSoft é um app de gestão de investimentos em português. As duas abas respondem a perguntas diferentes: Resumo mostra como a carteira inteira está dividida e como ela está indo, e Ativos olha para uma posição por vez.

O mesmo arquivo do Figma tem uma landing page para empresas, investidores, assessores e contadores. Ela ainda usa uma marca provisória, então aqui fico só no app.

Tela de resumo da carteira com anel de composição em volta do total e rentabilidade diária, mensal e anual.
Uma rolagem pelo design: a lista de ativos e o desempenho de cada posição. Uma rolagem pelo design: o resumo da carteira, do anel de alocação aos relatórios. O resumo da carteira, com números de exemplo.
Tela de ativos com o ativo de melhor desempenho, sua variação e um gráfico de crescimento.
Detalhe do ativo, com nomes de empresas e números de exemplo.

02

O anel e os blocos mostram a mesma imagem

Resumo abre com um gráfico de donut que divide a carteira entre Ações, ETFs, Criptoativos, Renda Fixa e Fundos, com o total no centro e três números simples logo abaixo para a rentabilidade diária, mensal e anual. Ao rolar a tela, cada classe de ativo vira um bloco na cor da sua fatia, e o anel e os blocos funcionam como um só sistema.

O resto da página mostra o rumo ao longo do tempo: cards de metas com barras de progresso, um gráfico histórico de aportes e dividendos e uma lista de relatórios em PDF prontos para baixar.

Quatro telas do app inclinadas em fundo preto: o donut da carteira, blocos de categoria com metas, um ativo em destaque com linha de crescimento e a lista dos outros ativos.
As abas Resumo e Ativos, da carteira inteira até cada ativo.

03

Os mesmos três números em cada ativo

Em Ativos, todo card repete a mesma faixa de variação diária, mensal e anual, então comparar posições é ler a mesma linha no mesmo lugar. O ativo marcado como melhor desempenho ganha um card mais completo, com uma linha de crescimento. Os outros vêm em lista, cada um com uma pequena seta verde ou vermelha que indica a direção.

Um celular deitado sobre um fundo branco, entre placas de acrílico laranja, verde e vermelha, com o donut, a legenda e os números de rentabilidade na tela.
Cinco classes de ativo, cada uma com sua cor no anel e na legenda.
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 20 Design de app mobile

NeverSoft

Um app de investimentos em português que começa mostrando como a carteira está dividida e desce até cada ativo. Todos os nomes e números nas telas são dados de exemplo.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma

Ver no Dribbble

Capa de apresentação do NeverSoft, do arquivo de design original.
Capa de apresentação do arquivo original.

Uma carteira lida do todo até cada ativo

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

Minha contribuição

NeverSoft é um app de gestão de investimentos em português. As duas abas respondem a perguntas diferentes: Resumo mostra como a carteira inteira está dividida e como ela está indo, e Ativos olha para uma posição por vez.

O mesmo arquivo do Figma tem uma landing page para empresas, investidores, assessores e contadores. Ela ainda usa uma marca provisória, então aqui fico só no app.

Uma rolagem pelo design: a lista de ativos e o desempenho de cada posição.
Uma rolagem pelo design: o resumo da carteira, do anel de alocação aos relatórios.

O anel e os blocos mostram a mesma imagem

Resumo abre com um gráfico de donut que divide a carteira entre Ações, ETFs, Criptoativos, Renda Fixa e Fundos, com o total no centro e três números simples logo abaixo para a rentabilidade diária, mensal e anual. Ao rolar a tela, cada classe de ativo vira um bloco na cor da sua fatia, e o anel e os blocos funcionam como um só sistema.

O resto da página mostra o rumo ao longo do tempo: cards de metas com barras de progresso, um gráfico histórico de aportes e dividendos e uma lista de relatórios em PDF prontos para baixar.

Tela de resumo da carteira com anel de composição em volta do total e rentabilidade diária, mensal e anual.
O resumo da carteira, com números de exemplo.
Tela de ativos com o ativo de melhor desempenho, sua variação e um gráfico de crescimento.
Detalhe do ativo, com nomes de empresas e números de exemplo.

Os mesmos três números em cada ativo

Em Ativos, todo card repete a mesma faixa de variação diária, mensal e anual, então comparar posições é ler a mesma linha no mesmo lugar. O ativo marcado como melhor desempenho ganha um card mais completo, com uma linha de crescimento. Os outros vêm em lista, cada um com uma pequena seta verde ou vermelha que indica a direção.

Quatro telas do app inclinadas em fundo preto: o donut da carteira, blocos de categoria com metas, um ativo em destaque com linha de crescimento e a lista dos outros ativos.
As abas Resumo e Ativos, da carteira inteira até cada ativo.
Um celular deitado sobre um fundo branco, entre placas de acrílico laranja, verde e vermelha, com o donut, a legenda e os números de rentabilidade na tela.
Cinco classes de ativo, cada uma com sua cor no anel e na legenda.