Flows, step by step.
-
01 →
Project type
Card checkboxes, multi-select
-
02 →
Goals
Pick 1–2 outcomes
-
03 →
Budget
Ranges; minimum €4.5k shown upfront
-
04 →
Timeline
Launch window, real availability
-
05 →
Links & uploads
Optional, drag and drop
-
06 →
Contact
Name, email, consent unchecked
-
07
Confirmation
Stamp, next steps, video hello
Validate per step, never at the end.
-
01 →
Budget under minimum
Detected at step 3
-
02 →
Say it kindly
“Probably not the right fit”
-
03 →
Offer the shop
Starter kit template, €149
-
04 →
Offer smaller
Review call, €390
-
05 →
Refer
Two named designers
-
06
Let them change
“Change my budget” returns to step 3
Discovery-call booking
D05 · D04
-
01 →
Pick day
Visitor time zone
-
02 →
Pick slot
Taken slots struck through
-
03 →
Confirm
No account, no payment
-
04 →
Invite
Calendar file + video link
-
05
Reminder
24 h before, with prep list
Confirmation
U05 · after any inquiry
-
01 →
Stamp + reference
Brief No. 2026-041
-
02 →
Reply time
“Within 24 hours on weekdays”
-
03 →
What to prepare
Checklist, 4 items
-
04 →
Video hello
40 s, captions on
-
05
Next best action
Book the call now
Availability communication
D04 · header · footer
-
01 →
Booked until
“Booked until mid-November”
-
02 →
Open slots
“2 slots in December”
-
03 →
Hold a slot
Secondary CTA
-
04 →
Waitlist
If full, join for next opening
-
05
Update date
Shown on the calendar
Never fake scarcity.
Price anchoring
D04 · D01 teaser
-
01 →
From-price
“Projects typically start at €9k”
-
02 →
Packages
Three, one featured
-
03 →
Inclusions
Checklist per package
-
04 →
Exclusions
Listed plainly
-
05
Day rate
For agencies
02
Proof & commerce flows
Case-study storytelling
D03
-
01 →
Context
Who and why now
-
02 →
Challenge
The hard part
-
03 →
Process
Proof rounds, annotated
-
04 →
Proof
Before/after, detail, loupe
-
05 →
Result
Baseline, period, source
-
06
CTA
“Want results like this?”
-
01 →
NDA card
Industry, role, year only
-
02 →
Request access
Short form
-
03 →
Password sent
Within a day
-
04 →
Unlock
Password page
-
05
Wrong password
Clear message + request link
Proofing & approval rounds
D08
-
01 →
Access
Password or magic link
-
02 →
Select
Circle frames, limit 20 of 64
-
03 →
Comment
Per image
-
04 →
Compare
Two frames side by side
-
05 →
Approve round
Stamp, locks selection
-
06
Download
Finals in chosen sizes
-
01 →
Browse
Filter by type
-
02 →
Product detail
Loupe, variants, reviews
-
03 →
License tier
Personal / commercial
-
04 →
Cart drawer
VAT and shipping shown
-
05 →
Download consent
Unchecked, required for digital
-
06
Pay + deliver
Instant download link
Image licensing request
D07
-
01 →
Choose image
From archive
-
02 →
Usage
Editorial, commercial, packaging
-
03 →
Duration
1 issue, 1 year, perpetual
-
04 →
Territory
Country, EU, worldwide
-
05 →
Exclusivity
None, category, full
-
06
Quote
Same day
-
01 →
Read
Article with reading time
-
02 →
Related work
Link to case
-
03 →
Subscribe
Email only
-
04 →
Double opt-in
Confirm link
-
05
Sample issue
Before signing up
-
01 →
Arrive from social
Mobile, one thumb
-
02 →
Latest post
Big image
-
03 →
Start a project
Only red link
-
04
Other paths
Call, work, shop, newsletter
03
Relationship & system flows
Testimonial request
after handover
-
01 →
Day 30
Email with 3 questions
-
02 →
Draft offered
I write, you edit
-
03 →
Approval
Name, role, company confirmed
-
04
Publish
With “Verified client” stamp
Referral prompt
after testimonial
-
01 →
Thank you
Personal note
-
02 →
Ask
One person who should know
-
03 →
Easy share
Pre-written intro email
-
04
Credit
Thank-you gift, no discounts
Agency & recruiter path
D06 · D04 · D12
-
01 →
Land on About
CV block visible
-
02 →
Download CV
2-page PDF
-
03 →
Check rates
Day rate card
-
04 →
Check availability
Month picker
-
05
Book call
20 min
Language switch
header · EN/DE
-
01 →
Toggle
EN · de in header
-
02 →
Swap copy
+35% length tolerated
-
03 →
Keep place
Same scroll and state
-
04 →
Remember
Per session
-
05
hreflang
Alternate URLs
-
01 →
Banner
Only optional services
-
02 →
Equal weight
Accept all = Reject all
-
03 →
Choose individually
Nothing pre-checked
-
04 →
Reopen
“Privacy settings” in footer
-
05
Newsletter
Double opt-in
Every page and component has these five. Copy tells people what happened and what to do next.
Empty
No frames match these filters.
Clear filters
Loading
Loading 64 frames…
Skeletons, no spinner
Error
Couldn’t send your brief. Your answers are saved.
Try again
Success
Brief sent. Reply within 24 hours.
Book the call
Offline
You’re offline. We’ll send when you’re back.
Keep editing
05
Focus management on page transitions
- 01After navigation, focus moves to the new page’s h1 (tabindex −1).
- 02The page title and an aria-live region announce the new page.
- 03Skip link “Skip to content” is the first tab stop on every page.
- 04Closing a modal or drawer returns focus to the button that opened it.
- 05Shared-element transitions never delay focus or input.
- 06Reduced motion: transitions become an instant cut.