Drag to explore. Scroll or pinch to zoom. Open Help for keyboard controls.

Yan
OPEN
TO WORK
Let’s talk
Yan Fontão Boring view
All work

Case 055Landing page design

Straight Up Marine Group

A landing page design under the Straight Up Marine Group name, for marine services and Dometic gyro stabilizers from Jupiter to Key West, shown in two layouts.

Contribution
Landing page design
Project status
Landing page · Figma archive
A 3D yacht rocking on a disc of sea.
A 3D object made for this board.

01

My contribution

The design carries the Straight Up Marine Group name and a gold triangular logo. Its headline offers “Professional Marine Services & Dometic Gyro Stabilizers”, with upfront pricing and expert service from Jupiter to Key West, and two ways out of the hero: Get Your Quote and Learn About Gyro Stabilizers.

A scroll through the design: the landing page, from the hero to the case studies.

02

The same hero, set two ways

The first layout splits the hero: text and buttons on solid navy at left, the aerial photo of a boat and its wake at right, which keeps the headline on a calm surface. The second centers the logo and headline over the same photo at full width, with the boat running behind the words. It gains drama and loses some legibility, and seeing the two side by side shows that trade.

The gold triangular Straight Up Marine Group logo on navy above a rounded panel showing the hero: navigation, the headline Professional Marine Services & Dometic Gyro Stabilizers, a yellow Get Your Quote button and an aerial photo of a boat and its white wake.
The presentation cover, with the logo above the first hero.

03

Down the page toward a quote

Below the hero, the page moves through four core service cards, a Dometic product section, four other solutions, three case-study cards and a row of manufacturer logos. It ends on a quote form that asks for name, phone number, boat make, model and year, and the current gyro situation. The second layout adds three short testimonials.

Case studies, testimonials and product figures are page copy, not results of this project.

Full landing page, first layout: a split navy hero with the boat photo, four Core Features cards, a Dometic Gyro Stabilizers section, four Other Solutions cards, three Case Studies cards, a Trusted Partners row of manufacturer logos, a quote form and a navy footer.
Full landing page, second layout: logo and headline centered over a full-width ocean photo, then the same sections as the first layout, with three short testimonials added under the case studies.
The full page, first layout, from the hero to the quote form. A second layout, with a centered hero and testimonials.
000

Instructions

Yan Fontão
Tap
Open a screen
Click
Open a screen
Drag
Look around the board
Wheel
Mouse zooms, trackpad moves, pinch zooms
− +
Pull back to see the whole board, or come closer
Arrows
In a case: ↑↓ change case, ←→ change media. On the board: move
Space
Open, or go back
Enter
Open
Esc Backspace
Back
Home
Back to the center, then the introduction
PgUp PgDn
Previous or next channel
Tab
Walk projects and links
R
Random project
0–9
Type a channel, 1–61
?
This page
Shortcuts

Music on the board

Files compressed and levelled for the web.

OPEN
TO WORK
Let’s talk

New message to Yan

Tell me who you are and I’ll get back to you.

000

About Yan

Hello, I’m Yan

Product Designer/ Design Engineer

Most products lose something between design and code. Mine don’t: I research the problem, design the product and ship the interface myself, so what you approve is exactly what your users get.

  • 2018started in software
  • UI + codedesign and implementation

Worked with Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brazil · Remote, hybrid or on-site

Portrait of Yan Fontão seated, in a green sweater and glasses, holding a microphone.
OPEN
TO WORK
Let’s talk
OPEN
TO WORK
Let’s talk
000

locked channel

Under NDA

Enter the code

Ask Yan for the code ↗
OPEN
TO WORK
Let’s talk
YAN FONTÃO Case studies