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

Rollê

Um app em português para encontrar lugares, curadores e atividades, mostrado aqui com exemplos de Curitiba. As páginas de lugar misturam informações práticas, histórias e dicas de amigos.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Mockup do Rollê montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

01

Minha contribuição

O Rollê é um app em português para encontrar lugares, curadores e atividades. Os exemplos do arquivo são de Curitiba, e aqui acompanho um deles, o teatro Ópera de Arame. O arquivo tem 17 telas de celular diferentes e guarda os rascunhos anteriores em uma página separada.

Foto em tela cheia do teatro Ópera de Arame com barras de progresso segmentadas, o nome do lugar, uma avaliação e um painel escuro com um texto curto e três destaques.
Página da Ópera de Arame com uma fileira de fotos, quatro atalhos redondos, dois cards ilustrados em Sobre o local e o início da lista Dica de amigo.
Um passeio pelas telas do design, não uma gravação: a abertura da marca, um lugar e seu story. Um lugar mostrado como story em tela cheia. A página do lugar, das informações práticas às dicas de amigos.

02

Uma ficha que soa como recomendação

A página do lugar começa pelo essencial: nome, avaliação, uma fileira de fotos com a próxima aparecendo um pouco na borda e quatro atalhos redondos para Conheça, Horários, Info e Avaliações. Abaixo disso, o tom muda. A seção Sobre o local usa frases simples, como “Rola show, peças e eventos”, em cards com pequenos desenhos a nanquim, e Dica de amigo reúne dicas curtas, como chegar perto do pôr do sol.

03

O mesmo lugar como story em tela cheia

A tela de story deixa o celular inteiro para uma foto, com barras segmentadas que mostram que ainda tem mais pela frente. A leitura fica embaixo, em um painel escuro: um parágrafo curto sobre o lugar e três destaques. A foto apresenta o lugar, e o texto é curto o bastante para ler antes de seguir.

04

Contornos pretos com um eco colorido

Fotos, cards e botões de ícone têm o mesmo tratamento: um contorno preto com uma forma fina deslocada em uma segunda cor, como azul, laranja ou rosa. Os títulos usam uma serifada, e o arquivo guarda versões tipográficas com o nome Serif. Juntos, esses elementos deixam o app mais perto de um guia impresso do que de um app de listagens.

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