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

Lex by Alexandria

Uma landing page em português e um logo para uma oferta ligada à conta de luz, com três versões de hero para celular em torno da mesma pergunta de abertura.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Logo da Lex by Alexandria sobre um disco branco.
O logo.

01

Minha contribuição

Lex by Alexandria é uma landing page em português para uma oferta ligada à conta de luz, voltada a residências e empresas. O arquivo traz versões da página para desktop e celular, além de variações do logo.

O título e as tags nestas telas são textos de marketing da própria página, não resultados que eu possa comprovar. Aqui o foco é a construção da página.

Uma rolagem pelo design: a landing page, da oferta à explicação de como funciona.
Logo da Lex by Alexandria em degradê sobre branco, ao lado de dois celulares inclinados com a landing page, sobre uma forma diagonal do roxo ao amarelo.
O logo ao lado de duas versões mobile da landing page.

02

Três jeitos de abrir no celular

Os frames mobile exploram três versões da mesma primeira tela. Duas abrem com uma foto, de uma família ao lado de painéis solares ou de um técnico caminhando por um campo solar, e colocam a pergunta em um painel laranja. A terceira tira a foto, coloca o logo em degradê sobre branco e traz o botão Simular Desconto para a primeira dobra.

Essa versão também fecha a primeira dobra com seis tags curtas em uma faixa escura, um pequeno resumo antes de a página continuar.

Tela de celular com barra laranja no topo, o logo em degradê sobre branco, uma pergunta sobre a conta de luz, um botão Simular Desconto em degradê e seis tags em uma faixa escura.
Tela de celular com uma faixa preta no topo, uma barra laranja com o logo branco, a foto de uma família em frente a painéis solares e um título em um painel laranja.
O mesmo layout com a foto de um técnico de jaqueta refletiva caminhando pelo mato alto entre painéis solares ao pôr do sol.
Esta versão traz o logo, a pergunta e o botão para a primeira dobra. Uma versão com foto coloca a pergunta em um painel laranja. O mesmo layout com uma segunda foto.

03

Um degradê que amarra a página

O logo vai do roxo ao amarelo, passando pelo laranja, e o mesmo degradê preenche o botão principal e as formas diagonais dos frames de apresentação. Na barra laranja das versões com foto, a marca passa para branco e continua legível sem mudar de forma.

Close de um notebook em ângulo com o hero para desktop, uma navegação pequena, o logo em degradê, um título grande e um botão Simular Desconto, ao lado do logo e de formas em degradê.
O hero para desktop centraliza o logo, a pergunta e um botã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 52 Design de landing page

Lex by Alexandria

Uma landing page em português e um logo para uma oferta ligada à conta de luz, com três versões de hero para celular em torno da mesma pergunta de abertura.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Logo da Lex by Alexandria sobre um disco branco.
O logo.

Uma landing page que abre com uma pergunta

Telas do arquivo de design original no Figma. Os títulos são textos de marketing da própria página.

Minha contribuição

Lex by Alexandria é uma landing page em português para uma oferta ligada à conta de luz, voltada a residências e empresas. O arquivo traz versões da página para desktop e celular, além de variações do logo.

O título e as tags nestas telas são textos de marketing da própria página, não resultados que eu possa comprovar. Aqui o foco é a construção da página.

Uma rolagem pelo design: a landing page, da oferta à explicação de como funciona.
Logo da Lex by Alexandria em degradê sobre branco, ao lado de dois celulares inclinados com a landing page, sobre uma forma diagonal do roxo ao amarelo.
O logo ao lado de duas versões mobile da landing page.

Três jeitos de abrir no celular

Os frames mobile exploram três versões da mesma primeira tela. Duas abrem com uma foto, de uma família ao lado de painéis solares ou de um técnico caminhando por um campo solar, e colocam a pergunta em um painel laranja. A terceira tira a foto, coloca o logo em degradê sobre branco e traz o botão Simular Desconto para a primeira dobra.

Essa versão também fecha a primeira dobra com seis tags curtas em uma faixa escura, um pequeno resumo antes de a página continuar.

Tela de celular com barra laranja no topo, o logo em degradê sobre branco, uma pergunta sobre a conta de luz, um botão Simular Desconto em degradê e seis tags em uma faixa escura.
Esta versão traz o logo, a pergunta e o botão para a primeira dobra.
Tela de celular com uma faixa preta no topo, uma barra laranja com o logo branco, a foto de uma família em frente a painéis solares e um título em um painel laranja.
Uma versão com foto coloca a pergunta em um painel laranja.

Um degradê que amarra a página

O logo vai do roxo ao amarelo, passando pelo laranja, e o mesmo degradê preenche o botão principal e as formas diagonais dos frames de apresentação. Na barra laranja das versões com foto, a marca passa para branco e continua legível sem mudar de forma.

O mesmo layout com a foto de um técnico de jaqueta refletiva caminhando pelo mato alto entre painéis solares ao pôr do sol.
O mesmo layout com uma segunda foto.
Close de um notebook em ângulo com o hero para desktop, uma navegação pequena, o logo em degradê, um título grande e um botão Simular Desconto, ao lado do logo e de formas em degradê.
O hero para desktop centraliza o logo, a pergunta e um botão.