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 054Design de landing page

Succession Now

Um site de marketing para um produto de planejamento sucessório, desenhado para desktop e celular em torno de uma ação: agendar uma demo.

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

01

Minha contribuição

O Succession Now é um site de marketing para um produto de planejamento sucessório. O arquivo do Figma tem a landing page, um modal de demo com as mensagens de sucesso, a oferta de um guia e as versões para celular do menu e dos modais.

Uma rolagem pelo design: a landing page, do produto aos recursos.

02

Manter o próximo passo à vista

No desktop, o hero mantém a mensagem curta e coloca duas ações lado a lado: agendar a demo em um botão sólido e assistir à demo em um botão mais discreto. O mesmo verde aparece na barra superior, com a oferta do guia, então a cor indica o que há para fazer.

O menu no celular segue essa ordem. Primeiro vêm seis links simples, depois Login em um bloco claro e Schedule My Demo em verde sólido, o que deixa as duas ações fáceis de diferenciar.

Modal em tela cheia no celular, com uma foto verde-clara e o logo do Succession Now, uma mensagem curta, campos de nome e e-mail e um botão verde Schedule my demo.
Menu no celular com o logo do Succession Now, um ícone de fechar, seis links de texto, um bloco claro de Login e um botão verde sólido Schedule My Demo.
O modal de demo pede nome e e-mail, com um único botão para continuar. O menu no celular termina com Login em um bloco claro e a demo em verde sólido.

03

Um modal que pede muito pouco

O modal de demo ocupa a tela inteira do celular. Uma foto clara traz o logo, uma mensagem curta apresenta o passo e o formulário para em dois campos: nome e e-mail. O botão de fechar fica no canto superior, então sair é tão claro quanto continuar.

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