Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 055Diseño de landing page

Straight Up Marine Group

Un diseño de landing page con el nombre Straight Up Marine Group, para servicios náuticos y estabilizadores giroscópicos Dometic de Jupiter a Key West, mostrado en dos layouts.

Mi papel
Diseño de landing page
Estado del proyecto
Landing page · archivo de Figma
Un yate en 3D meciéndose sobre un disco de mar.
Un objeto 3D hecho para este mural.

01

Mi contribución

El diseño lleva el nombre Straight Up Marine Group y un logo triangular dorado. Su título ofrece “Professional Marine Services & Dometic Gyro Stabilizers”, con precios informados de antemano y servicio experto de Jupiter a Key West, y dos salidas desde el hero: Get Your Quote y Learn About Gyro Stabilizers.

Un desplazamiento por el diseño: la landing page, del hero a los casos de estudio.

02

El mismo hero, armado de dos maneras

El primer layout divide el hero: texto y botones sobre azul marino sólido a la izquierda y, a la derecha, la foto aérea de un barco y su estela, lo que deja el título sobre un fondo tranquilo. El segundo centra el logo y el título sobre la misma foto a ancho completo, con el barco pasando detrás de las palabras. Gana dramatismo y pierde algo de legibilidad, y al ver los dos lado a lado se nota lo que se gana y lo que se pierde.

El logo triangular dorado de Straight Up Marine Group sobre azul marino, encima de un panel redondeado que muestra el hero: navegación, el título Professional Marine Services & Dometic Gyro Stabilizers, un botón amarillo Get Your Quote y una foto aérea de un barco con su estela blanca.
La portada de presentación, con el logo encima del primer hero.

03

Bajando por la página hacia una cotización

Debajo del hero, la página recorre cuatro tarjetas de servicios principales, una sección de producto de Dometic, otras cuatro soluciones, tres tarjetas de casos de estudio y una fila de logos de fabricantes. Termina en un formulario de cotización que pide nombre, número de teléfono, marca, modelo y año del barco, y la situación actual con el giroscopio. El segundo layout agrega tres testimonios cortos.

Los casos de estudio, los testimonios y las cifras de producto son texto de la página, no resultados de este proyecto.

Landing page completa, primer layout: un hero azul marino dividido con la foto del barco, cuatro tarjetas de Core Features, una sección Dometic Gyro Stabilizers, cuatro tarjetas de Other Solutions, tres tarjetas de Case Studies, una fila Trusted Partners con logos de fabricantes, un formulario de cotización y un pie de página azul marino.
Landing page completa, segundo layout: logo y título centrados sobre una foto del océano a ancho completo, luego las mismas secciones que el primer layout, con tres testimonios cortos agregados debajo de los casos de estudio.
La página completa, primer layout, del hero al formulario de cotización. Un segundo layout, con un hero centrado y testimonios.
000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos