The atlas
59 parts, from a single button to a whole page.
- Header with links: Say whose site this is and where you can go
- Shop header: Search, range and basket always at hand
- Bare header: Keep people on the one thing this page is for
- Announcement strip: One short message above everything
- Breadcrumb bar: Where you are in a deep site
- Full footer: The whole site’s map, contact and legal
- Slim footer: Just what must be there
- Sticky action bar: Keep the main action in reach on phones
- Split hero: What this is, who it is for, and the first action, next to a picture
- Centred hero: One big sentence and one action
- Image hero: Sell the feeling with one picture across the screen
- Search hero: Let people state what they want right away
- Video hero: Show it working, in motion
- Rotating hero: Show several messages in the same spot
- Booking hero: Start the reservation in the first screen
- Type-only hero: The sentence is the design
- Page title: Name this page and go straight to the content
- Gallery and buy box: See the product and buy it, both in the first screen
- Shop by category: Doors into the range
- Featured products: Show products worth a click right away
- Filtered list: Narrow a long list and compare what is left
- Goes well with: Offer the next thing at the right moment
- Offer with a reason: A deal, with a reason to act now
- Basket: What you are buying and what it costs in all
- Checkout: Take the order with as few fields as possible
- Comparison table: Set options beside one another so choosing gets easier
- Price levels: Show the options side by side, with one recommended
- Finder: Help people who do not know what they need
- Benefit grid: Three to six reasons, quick to scan
- Alternating rows: Take several benefits one at a time, each with its picture
- How it works: Take away the fear of the unknown in three steps
- Benefit with picture: Show what it does for you, not just what it is
- Numbers band: Three or four figures that prove the size or the result
- Explainer video: Let someone show how it works
- Specifications: The hard facts for those who want them
- Text with picture: A plain block of story and an image
- Timeline: Show how something grew, or what happens when
- Client logos: Well-known names that already chose this
- Testimonials: Named people who say it worked
- Customer reviews: Many verdicts, good and bad, with a summary to start from
- Proof by the buy button: Real people using it, right at the decision
- Case studies: What you did, for whom, and what came of it
- Evidence for claims: Back the big claim with data or a source
- Team: Show who you will be dealing with
- Promises and marks: Guarantees and memberships in one strip
- Questions and answers: Remove what is still holding someone back
- Article: Comfortable long reading
- Article with contents: Long pages you can jump around in
- Article overview: Let people pick something to read
- Gallery: Show the place or the work, big
- Portfolio grid: Let the work do the talking
- Menu: What can I eat or drink, and what does it cost
- Booking: Reserve without phoning
- Contact and map: How to reach us and how to get here
- Locations: Find the branch nearest you
- Agenda: What is on, and how to get in
- Final call to action: One last, clear ask
- Enquiry form: Let someone ask with as little effort as possible
- Newsletter: Keep in touch with people not ready yet