All playbooks / UX & UI
UX & UI
Playbook
The interface principles and conversion psychology behind websites people trust at first sight and finish what they came to do. 25 practical chapters, each with the science behind it and what to change on your landing page tomorrow.
Start here01 First impressions02 Anatomy of a hero07 Trust16 Calls to action
25 chapters
First screen
What decides whether the rest of the page gets read
- 01
First impressions
Visitors judge a page in 50 milliseconds. What they are judging, and how to pass.
15 min read - 02
Anatomy of a hero
The one screen that decides if the rest is read: headline, proof, button and image.
15 min read - 03
Copy that converts
Say one specific thing, in the visitor's words. Headlines, buttons and microcopy.
16 min read - 04
Typography that reads as quality
Type size, spacing and pairing: the cheapest upgrade a page can get.
15 min read - 05
Color and emotion
What a palette signals before a word is read, and how to pick one on purpose.
15 min read - 06
Photos that do not look like stock
Real and specific beats polished and generic. How to source and treat images.
15 min read
Trust
Why a stranger believes you
- 07
Trust
Trust is mostly the absence of doubt. Where doubt comes from, and how to remove it.
15 min read - 08
Social proof patterns
Logos, numbers, quotes and reviews: which kind works where, and why.
15 min read - 09
Trust signals for small businesses
Company details, terms, privacy, a real phone number: what people look for before they enquire.
16 min read - 10
Showing your work
Case studies and before and after: proof that adjectives cannot fake.
15 min read
Structure and attention
How the page is laid out and where the eye goes
- 11
Section order of a landing page
What comes after the hero and why: problem, offer, proof, process, price, ask.
15 min read - 12
Attention and whitespace
One thing should look different. Hierarchy and space that guide the eye.
15 min read - 13
Navigation: one page or many
Menu items, anchors and sticky headers. When a landing page needs no menu at all.
15 min read - 14
Mobile and thumbs
Where thumbs reach, how big targets must be, and what to do about the keyboard.
15 min read - 15
Motion with purpose
Easing, timing and restraint. Animation that explains instead of decorating.
15 min read - 25
Landing page or website?
How to decide, what the research really says, and a growth path from one page to a full site.
20 min read
Decisions
What makes people say yes, or leave
- 16
Calls to action
Wording, placement and weight of the one button that matters.
15 min read - 17
Lead forms and enquiries
Every field costs enquiries. What to ask, what to cut, how to word the error.
15 min read - 18
Pricing and anchoring
How a number is judged against the numbers around it, and how to lay out plans.
15 min read - 19
Defaults, nudges and honest urgency
Preselected options and real deadlines work. Fake ones cost trust.
16 min read - 20
Thank-you pages and next steps
The moment after the click is the best one to set expectations and earn a second action.
15 min read
Speed and checks
Fast, usable by everyone, and verified
- 21
Speed and feedback
The 400 millisecond rule and instant acknowledgement.
15 min read - 22
Core Web Vitals in plain words
LCP, INP and CLS: what they measure and the quick fixes for each.
15 min read - 23
Accessibility as conversion
Contrast, focus and clear structure help everyone, and they are measurable wins.
16 min read - 24
The ten-minute page audit
A checklist to score your own page before anyone else does.
15 min read
No chapter matches that yet.
Want this applied to your landing page?
Vantle designs and codes custom landing pages for a fixed price of $490, built on these exact UX and conversion rules. Hand-coded in TypeScript, five working days, two rounds of changes, zero meetings.