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 053Landing page design

Trackland

A landing page for a platform that customizes Salesforce interfaces, in two blue theme variants with a mobile menu.

Contribution
Interface design
Project status
Interface design · Figma archive
Trackland presentation cover from the original design file.
Presentation cover from the original file.

01

My contribution

Trackland is a landing page for a platform that customizes Salesforce interfaces. The Figma file keeps two theme variants of the page, New blue and Previous blue, along with a mobile menu.

A scroll through the design: the landing page, from the hero to the industries it serves.

02

Explain the connection with a diagram

The page works in white, slate and one strong blue. Its dark section places Trackland at the centre of a ring of Salesforce database cards, with dotted arrows pointing inward, so the idea of connecting those sources reads before any paragraph does.

White phone menu with the Trackland logo, a close icon, four links with Resources expanded into four sub-links, a blue Try for Free! button and a Sign in link.
Resources opens in place, and the menu ends with the two account actions.

03

A menu that opens in place

On a phone, Resources expands where it sits, with its four links indented beneath it. The menu ends with Try for Free! as a solid button and Sign in as a text link, which keeps the two account actions at different weights.

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