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

Straight Up Marine Group

Um design de landing page com o nome Straight Up Marine Group, para serviços náuticos e estabilizadores giroscópicos Dometic de Jupiter a Key West, mostrado em dois layouts.

Meu papel
Design de landing page
Status do projeto
Landing page · Acervo do Figma
Um iate em 3D balançando sobre um disco de mar.
Um objeto 3D feito para este mural.

01

Minha contribuição

O design leva o nome Straight Up Marine Group e um logo triangular dourado. O título oferece “Professional Marine Services & Dometic Gyro Stabilizers”, com preço informado de antemão e serviço especializado de Jupiter a Key West, e duas saídas do hero: Get Your Quote e Learn About Gyro Stabilizers.

Uma rolagem pelo design: a landing page, do hero aos cases.

02

O mesmo hero, de dois jeitos

O primeiro layout divide o hero: texto e botões sobre azul-marinho liso à esquerda e, à direita, a foto aérea de um barco com sua esteira, o que deixa o título sobre um fundo calmo. O segundo centraliza o logo e o título sobre a mesma foto em largura total, com o barco passando atrás das palavras. Ganha em drama e perde um pouco de legibilidade, e ver os dois lado a lado mostra essa troca.

O logo triangular dourado da Straight Up Marine Group sobre azul-marinho, acima de um painel arredondado com o hero: navegação, o título Professional Marine Services & Dometic Gyro Stabilizers, um botão amarelo Get Your Quote e uma foto aérea de um barco com sua esteira branca.
A capa de apresentação, com o logo acima do primeiro hero.

03

Descendo a página até o orçamento

Abaixo do hero, a página passa por quatro cards de serviços principais, uma seção de produto da Dometic, outras quatro soluções, três cards de cases e uma fileira de logos de fabricantes. Ela termina em um formulário de orçamento que pede nome, telefone, marca, modelo e ano do barco e a situação atual do giroscópio. O segundo layout acrescenta três depoimentos curtos.

Os cases, depoimentos e números de produto são texto da página, não resultados deste projeto.

Landing page completa, primeiro layout: hero dividido em azul-marinho com a foto do barco, quatro cards de Core Features, uma seção Dometic Gyro Stabilizers, quatro cards de Other Solutions, três cards de Case Studies, uma fileira Trusted Partners com logos de fabricantes, um formulário de orçamento e um rodapé azul-marinho.
Landing page completa, segundo layout: logo e título centralizados sobre uma foto de oceano em largura total, depois as mesmas seções do primeiro layout, com três depoimentos curtos a mais abaixo dos cases.
A página completa, primeiro layout, do hero ao formulário de orçamento. Um segundo layout, com hero centralizado e depoimentos.
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