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

Boater

Um app em português para aluguel de barcos e passeios, que conecta quem quer alugar a anunciantes. As reservas, pessoas e valores nas telas são conteúdo de exemplo.

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

01

Minha contribuição

Boater é uma plataforma em português que, no próprio texto de boas-vindas, conecta pessoas interessadas em alugar embarcações a anunciantes. O arquivo do Figma tem 52 frames de celular, além de variantes, divididos entre o fluxo de quem aluga, da busca e da reserva até o check-in e o chat, e uma área do anunciante com perfil e reservas próprios. Aqui acompanho quem aluga.

Um passeio pelas telas do design, não uma gravação: da home à reserva confirmada.

02

O próximo passeio ocupa o topo da tela

Quando uma reserva está perto, um card escuro fica no topo da home com o que a pessoa reservou, a data, o tempo que falta e um botão, Fazer check-in. A descoberta começa abaixo dele, com as abas Para você e Explorar e cards grandes com fotos dos lugares mais procurados. A mesma tela serve para quem está prestes a embarcar e para quem ainda está escolhendo.

Logo branco do Boater em fundo escuro ao lado de dois celulares: uma tela de onboarding com um barco em um lago de montanha e o título Passeios de A a Z, e uma home com lugares e passeios populares.
O onboarding e uma versão da home com lugares e passeios populares.

03

Quem vai estar no comando

A tela de informações dá ao capitão uma aba própria, separada das comodidades do barco. Ali ficam o nome e uma bio curta, três números de experiência, passeios e avaliação, a data em que uma credencial foi verificada e uma lista de certificações. A pessoa e os números são conteúdo de exemplo. A estrutura mostra a intenção: dá para conferir quem conduz o barco, além do que ele oferece.

Home com um card escuro da próxima reserva, contagem regressiva de 30 minutos e botão Fazer check-in, acima de cards com fotos dos lugares mais procurados em Angra dos Reis.
Foto em tela cheia do mar e de uma ilha com o logo branco do Boater, a mensagem Sua reserva foi criada! e um botão Ver Reservas.
Tela de informações na aba Capitão da Embarcação, com cards escuros da bio e das estatísticas do capitão de exemplo, seguidos de uma lista de certificações.
A próxima reserva e o check-in ficam acima da descoberta. A reserva criada leva para a aba Reservas. O capitão tem um perfil com experiência e certificações.

04

No fim, a interface dá lugar ao mar

A maior parte do app é branca, com cards escuros. Quando a pessoa cria uma reserva, a tela muda para uma foto do mar em tela cheia, com o logo, uma confirmação curta e um botão, Ver Reservas, que leva para onde fica o status da reserva. Outra tela reaproveita a foto com um card de dicas para o passeio e um único botão, Fechar.

Foto escurecida do mar com o logo do Boater, o título Aproveite seu passeio!, um card branco de dicas e recomendações e um botão Fechar.
Dicas e recomendações para o passeio.
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 19 Design de app mobile

Boater

Um app em português para aluguel de barcos e passeios, que conecta quem quer alugar a anunciantes. As reservas, pessoas e valores nas telas são conteúdo de exemplo.

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

Da escolha do barco ao embarque

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

Minha contribuição

Boater é uma plataforma em português que, no próprio texto de boas-vindas, conecta pessoas interessadas em alugar embarcações a anunciantes. O arquivo do Figma tem 52 frames de celular, além de variantes, divididos entre o fluxo de quem aluga, da busca e da reserva até o check-in e o chat, e uma área do anunciante com perfil e reservas próprios. Aqui acompanho quem aluga.

Um passeio pelas telas do design, não uma gravação: da home à reserva confirmada.
Logo branco do Boater em fundo escuro ao lado de dois celulares: uma tela de onboarding com um barco em um lago de montanha e o título Passeios de A a Z, e uma home com lugares e passeios populares.
O onboarding e uma versão da home com lugares e passeios populares.

O próximo passeio ocupa o topo da tela

Quando uma reserva está perto, um card escuro fica no topo da home com o que a pessoa reservou, a data, o tempo que falta e um botão, Fazer check-in. A descoberta começa abaixo dele, com as abas Para você e Explorar e cards grandes com fotos dos lugares mais procurados. A mesma tela serve para quem está prestes a embarcar e para quem ainda está escolhendo.

Home com um card escuro da próxima reserva, contagem regressiva de 30 minutos e botão Fazer check-in, acima de cards com fotos dos lugares mais procurados em Angra dos Reis.
A próxima reserva e o check-in ficam acima da descoberta.

Quem vai estar no comando

A tela de informações dá ao capitão uma aba própria, separada das comodidades do barco. Ali ficam o nome e uma bio curta, três números de experiência, passeios e avaliação, a data em que uma credencial foi verificada e uma lista de certificações. A pessoa e os números são conteúdo de exemplo. A estrutura mostra a intenção: dá para conferir quem conduz o barco, além do que ele oferece.

Foto em tela cheia do mar e de uma ilha com o logo branco do Boater, a mensagem Sua reserva foi criada! e um botão Ver Reservas.
A reserva criada leva para a aba Reservas.
Tela de informações na aba Capitão da Embarcação, com cards escuros da bio e das estatísticas do capitão de exemplo, seguidos de uma lista de certificações.
O capitão tem um perfil com experiência e certificações.

No fim, a interface dá lugar ao mar

A maior parte do app é branca, com cards escuros. Quando a pessoa cria uma reserva, a tela muda para uma foto do mar em tela cheia, com o logo, uma confirmação curta e um botão, Ver Reservas, que leva para onde fica o status da reserva. Outra tela reaproveita a foto com um card de dicas para o passeio e um único botão, Fechar.

Foto escurecida do mar com o logo do Boater, o título Aproveite seu passeio!, um card branco de dicas e recomendações e um botão Fechar.
Dicas e recomendações para o passeio.