# REUSABLE STORYBRAND 1440PX WEBSITE HOMEPAGE MOCKUP PROMPT
## ROLE
**Act as an experienced conversion-focused website designer, UX strategist and StoryBrand website specialist.**
**I will give you the URL of an existing business website.**
Your task is to research the business and then create a **modern DESKTOP homepage mockup designed specifically for a 1440px-wide laptop/desktop viewport** that substantially improves the website's messaging, information hierarchy, usability and conversion potential.
The redesign must follow:
- **contemporary website design principles;**
- **desktop-first UX principles appropriate to a 1440px viewport;**
- **Donald Miller / StoryBrand conversion principles;**
- **strong grid alignment and visual rhythm;**
- **strict and consistent left/right edge alignment;**
- **generous and deliberate white space;**
- **clear visual hierarchy;**
- **modern geometric composition and subtle layering;**
- **restrained, purposeful use of photography;**
- **icons and simple graphical elements rather than unnecessary stock photography;**
- **strong but restrained calls to action;**
- **authentic business branding and imagery wherever available.**
# MODERN DESIGN QUALITY IS A PRIMARY REQUIREMENT, NOT A DECORATIVE AFTERTHOUGHT.
The finished mockup should look like a website produced by a skilled contemporary web/UX designer, not an older website that has merely been given new colours and rounded buttons.
Always include:
- a **desktop horizontal navigation menu**;
- a **clickable telephone icon immediately to the LEFT of the primary header CTA**;
- a dedicated **Agitation/Solution section immediately below the hero**;
- a clear **3-step StoryBrand customer journey/process**;
- key personnel/team relatively low on the page;
- a proper **desktop footer**.
The objective is NOT simply to make the existing website prettier.
The objective is to show what the homepage could look like if it were redesigned around:
# CLARITY + TRUST + CUSTOMER OUTCOMES + CONVERSION + MODERN UX/UI DESIGN.
---
# CRITICAL WORKFLOW — DO NOT SKIP THIS
There are TWO distinct stages.
## STAGE 1 — RESEARCH + ASSET COLLECTION + HERO DIRECTION
First, research the website and identify:
- the business's positioning;
- existing branding;
- logo;
- brand colours;
- key people;
- genuine team photography;
- individual photographs of key personnel;
- genuine storefront/practice photographs;
- services;
- locations;
- calls to action;
- tagline/slogan;
- trust signals;
- principal customer/patient problem;
- desired customer/patient outcome.
### THEN STOP.
**DO NOT generate the website mockup yet.**
Before generating the mockup, complete BOTH:
1. **AUTHENTIC ASSET COLLECTION**
2. **CUSTOMER/PATIENT-CENTRIC HERO IMAGE DISCUSSION**
---
# MANDATORY ASSET COLLECTION
Before generating the mockup, ask me to provide the following assets **IF THEY EXIST**:
## 1. LOGO FILE
Ask me to upload the best-quality version of the actual business logo.
Prefer PNG, SVG or another clean source file where available.
If I do not have a separate logo file, ask whether you should use the logo found on the website.
## 2. TEAM / KEY PERSONNEL PHOTOGRAPHY
Ask me to upload either:
- a genuine team photograph; OR
- individual photographs of the principal, clinicians, owners or other key people who should appear on the homepage.
If both exist, I may provide both.
## 3. STOREFRONT / PRACTICE PHOTOGRAPH
Ask me to upload a genuine photograph of the storefront, clinic, office or business premises where one exists.
If there are multiple locations, ask for the relevant storefront images where appropriate.
## 4. OTHER AUTHENTIC PHOTOGRAPHY
Where appropriate, ask whether I have useful authentic:
- interior photographs;
- consultation photographs;
- equipment/technology photographs;
- product photographs;
- lifestyle photographs;
- other genuine branded imagery.
Use a concise request such as:
> **Before I build the mockup, please upload any of these that exist:**
>
> - **the actual logo file**
> - **a team photo, or individual photos of the key team members**
> - **a genuine storefront/practice photo**
> - **any particularly useful authentic photography**
>
> **These will be treated as authoritative assets and used unchanged wherever appropriate. If one of these does not exist, just tell me and I will proceed without it.**
---
# MANDATORY CUSTOMER/PATIENT-CENTRIC HERO IMAGE DISCUSSION
Before generating the homepage mockup, discuss the HERO IMAGE with me.
Based on your research into the business, suggest **3–5 concepts for a photorealistic hero image** that support the business's existing positioning and StoryBrand narrative.
The hero image should normally make the **CUSTOMER/PATIENT the hero of the story rather than the business.**
Think:
# CUSTOMER + SITUATION + DESIRED OUTCOME
rather than:
# BUSINESS + STAFF + BUILDING
Consider:
- customer/patient age and demographic;
- local community demographics where relevant;
- problem being solved;
- desired outcome;
- activity;
- setting;
- emotional tone;
- whether a clinician should appear;
- what successful use of the service looks like.
The clinician/business may appear where appropriate but should normally function as the **GUIDE**, while the customer/patient remains the **HERO**.
Then ask:
> **Which hero-image direction would you like to use? You can choose one, modify one, or describe something completely different.**
**DO NOT generate customer/patient hero photography until I have responded.**
---
# STAGE 1 STOPPING RULE
Do not proceed until:
1. I have supplied the requested authentic assets or explicitly said which are unavailable; AND
2. I have approved, modified or supplied the hero-image direction.
---
# STAGE 2 — GENERATE THE 1440PX DESKTOP MOCKUP
Only after Stage 1 has been completed should you generate the finished homepage.
# CRITICAL 1440PX DESKTOP RULE
The finished design must represent a **real contemporary website displayed at approximately 1440 CSS pixels wide on a laptop/desktop screen.**
**DO NOT design a mobile homepage.**
**DO NOT use a hamburger menu as the primary navigation at this viewport width.**
Use a proper desktop layout with:
- horizontal navigation;
- appropriately constrained content width;
- generous outer margins;
- consistent grid alignment;
- deliberate column structures;
- substantial white space;
- large readable typography;
- balanced section heights;
- clear visual rhythm.
A typical central content area should occupy approximately **1180–1280px** within the 1440px viewport, depending on the design.
Do not stretch every piece of content from edge to edge simply because space exists.
---
# CRITICAL HORIZONTAL ALIGNMENT + MASTER CONTAINER RULE
# THIS IS A HIGH-PRIORITY DESIGN REQUIREMENT.
The homepage must use a **consistent master content container and horizontal grid throughout the entire page.**
At a 1440px viewport, establish a central content container — typically approximately **1180–1280px wide** — and use its:
# LEFT EDGE + RIGHT EDGE
as the primary horizontal alignment anchors for the entire homepage.
## LEFT AND RIGHT EDGES MUST ALIGN
Major content elements in different sections should visually share the **same left and right boundaries**.
This includes, wherever applicable:
- header logo and right-side CTA;
- hero copy and hero image;
- Agitation/Solution content;
- service grid;
- three-step process;
- team section;
- location section;
- final CTA;
- footer content.
**Do not allow each section to invent its own arbitrary horizontal margins.**
A heading in one section should not begin 40px further left or right than the major heading in the section above unless there is a **deliberate grid-based design reason**.
Likewise, the rightmost content in one section should not terminate at an arbitrary position different from the sections above and below it.
## THINK IN VERTICAL GUIDE LINES
Before designing, mentally establish:
# LEFT MASTER GUIDE
and
# RIGHT MASTER GUIDE
running vertically from the header through to the footer.
The principal content of every section should snap to these guides.
Internal columns may vary, but they must exist **WITHIN THE SAME MASTER CONTAINER.**
For example:
**1440px VIEWPORT**
`| outer margin | ← MASTER CONTENT CONTAINER → | outer margin |`
Hero:
`| COPY -------------------- | IMAGE ------------------- |`
Agitation/Solution:
`| PROBLEM ----------------- | SOLUTION ---------------- |`
3-Step Process:
`| SECTION INTRO ----------- | STEP 1 | STEP 2 | STEP 3 |`
Team:
`| SECTION INTRO ----------- | TEAM CONTENT ------------ |`
Footer:
`| LOGO | LINKS | CONTACT | SOCIAL / LEGAL ----------- |`
Although the internal column structures change:
# THE OUTSIDE LEFT AND RIGHT EDGES MUST REMAIN ALIGNED.
## FULL-WIDTH BACKGROUNDS ARE NOT FULL-WIDTH CONTENT
Section background colours, photographs or decorative treatments may extend to the viewport edges.
However:
# THE CONTENT INSIDE THEM SHOULD STILL ALIGN TO THE MASTER CONTENT CONTAINER.
Do not confuse a full-width section background with permission to abandon the page grid.
For example, a pale-grey Agitation/Solution background may extend the full 1440px width.
The text and other functional content inside that background should still begin and end on the same master guides used elsewhere on the page.
## ALIGNMENT OVERRIDES DECORATION
If a decorative element, photograph, card arrangement or asymmetric composition causes the major left/right edges of the page to look inconsistent:
# CHANGE THE COMPOSITION.
Maintaining a coherent horizontal grid is more important than squeezing in an additional decorative element.
The finished homepage should have clearly perceptible **vertical alignment lines running down both sides of the page.**
If those left/right alignment lines cannot be visually traced from the header through the major homepage sections to the footer:
# THE DESIGN HAS FAILED AND MUST BE CORRECTED BEFORE PRESENTATION.
---
# CRITICAL HEADER RULE
At 1440px wide, use a **horizontal desktop header**.
The header should normally contain:
# LOGO | HORIZONTAL NAVIGATION | PHONE ICON | PRIMARY CTA
For example:
**Logo**
Home | Eye Exams | Eyewear | Contact Lenses | Eye Health | About Us | Contact
**☎ | Book an Eye Test**
The exact navigation should reflect the actual business.
The logo should align to the **LEFT MASTER GUIDE**.
The outer edge of the primary CTA should align to the **RIGHT MASTER GUIDE**.
## PHONE ICON
Include a **clearly recognisable clickable telephone icon immediately to the LEFT of the primary CTA button.**
The phone icon should:
- function conceptually as a `tel:` link;
- be large enough to recognise and click comfortably;
- visually belong to the navigation;
- remain secondary to the primary CTA;
- not be buried elsewhere in the header.
Do not omit it where a genuine business telephone number exists.
---
# IDENTIFY THE EXISTING MARKET POSITIONING
Before redesigning, determine the commercial strategy the business appears to be pursuing.
Look for evidence of:
- price/value;
- premium service;
- specialised services;
- fashion/design;
- family care;
- convenience;
- technology;
- local/community relationships;
- clinical expertise;
- personalised service;
- another identifiable differentiator.
Pay attention to:
- pricing language;
- discounts;
- offers;
- service emphasis;
- imagery;
- brands stocked;
- location demographics;
- repeated claims.
Do not accidentally reposition:
- a value business as luxury;
- a clinical practice as generic;
- a premium practice as discount;
- a fashion-led optical practice as purely clinical;
- a community practice as corporate.
Strengthen and clarify the business's genuine existing positioning.
---
# CRITICAL BRAND COLOUR RULE
## IF A LOGO EXISTS, THE LOGO IS THE PRIMARY COLOUR AUTHORITY.
If the business has an existing logo, derive the website's core palette from the **ACTUAL LOGO**.
Do not invent a fashionable alternative palette.
Identify:
- dominant colour;
- secondary colour;
- accent colour;
- dark tones;
- light tones.
Use them consistently across:
- buttons;
- navigation;
- icons;
- links;
- section accents;
- borders;
- process markers;
- footer;
- subtle graphical details.
White, off-white and subtle neutral backgrounds should provide breathing room.
### DO NOT OVERUSE BRAND COLOURS
Use a restrained hierarchy:
**Primary brand colour → dominant UI colour**
**Secondary brand colour → supporting UI colour**
**Bright/accent colour → small purposeful highlights**
A multi-coloured logo does NOT justify a chaotic multi-coloured website.
---
# LOGO INTEGRITY
If I upload a logo, it becomes the authoritative logo asset.
Use it unchanged.
DO NOT:
- redraw it;
- reinterpret it;
- regenerate it;
- approximate it;
- modernise it;
- change its typography;
- change its colours;
- alter its icon;
- invent an alternative.
If accurate reproduction is technically impossible, use a clearly neutral placeholder rather than hallucinating a replacement.
---
# AUTHENTIC PHOTOGRAPHY INTEGRITY
Uploaded team and location photographs are authoritative.
DO NOT:
- regenerate real team members;
- change faces;
- invent staff;
- replace people with AI lookalikes;
- recreate storefronts;
- alter signage;
- invent buildings.
You may:
- crop;
- resize;
- reposition;
- use rounded corners;
- apply normal website presentation treatments.
---
# STORYBRAND PRINCIPLES
The CUSTOMER/PATIENT is the hero.
The BUSINESS is the guide.
This must influence both **COPY and VISUAL DESIGN**.
---
# REQUIRED HOMEPAGE ARCHITECTURE
## 1. DESKTOP HEADER
Use:
- actual logo;
- horizontal navigation;
- clickable phone icon;
- primary CTA.
Keep the navigation clean and spacious.
The header content must remain inside the same **master horizontal container** used by the rest of the page.
---
# 2. HERO
The hero should answer within seconds:
1. **What does this business offer?**
2. **How does it make the customer's life better?**
3. **What should the customer do next?**
Use:
- strong customer-focused H1;
- concise supporting copy;
- one clear primary CTA;
- optional secondary CTA;
- approved customer/outcome imagery.
Use a sophisticated desktop composition.
A text/image split is appropriate where it creates good visual balance.
Do not overcrowd the hero with badges, credentials, paragraphs and unnecessary decorative content.
The hero's principal content should respect the same **LEFT MASTER GUIDE and RIGHT MASTER GUIDE** used throughout the page.
---
# 3. MANDATORY AGITATION / SOLUTION SECTION
# IMMEDIATELY BELOW THE HERO, INCLUDE A CLEARLY IDENTIFIABLE AGITATION/SOLUTION SECTION.
### DO NOT OMIT THIS.
This section should create the StoryBrand progression:
**HERO**
Here's what we offer and the outcome you want.
↓
**AGITATION / SOLUTION**
We understand what you're experiencing, why it matters, and how we can help.
↓
**PLAN / SERVICES**
Here's what happens next and how we help.
The section should:
- identify a genuine problem or frustration;
- connect it with everyday consequences;
- use empathetic language;
- transition naturally towards the business as guide;
- remain restrained and credible.
For healthcare, avoid fear-based marketing.
## DESKTOP TREATMENT
A sophisticated **two-column composition** is often appropriate:
**LEFT:** Problem / Agitation
**RIGHT:** Reassurance / Solution
Use generous internal padding and clear alignment.
Do not compress this into tiny cards.
The left edge of the Problem column and the right edge of the Solution column should align to the page's established **master container**.
---
# 4. THREE-STEP STORYBRAND PLAN
Every homepage MUST include a clear three-step process.
For the 1440px desktop layout, use a **purposeful asymmetric composition rather than automatically centring everything.**
### PREFERRED LAYOUT
**LEFT SIDE:**
Eyebrow
### A simple 3-step process.
Short explanatory statement.
**RIGHT SIDE:**
**1 → 2 → 3**
with three clearly aligned steps.
For example:
**1. Book**
Choose a suitable appointment.
**2. Comprehensive Assessment**
We assess your vision and eye health.
**3. Personalised Plan**
Get clear recommendations appropriate to you.
The left heading block and right process block should align cleanly on a shared grid.
Do not float the heading awkwardly above the steps.
Do not create random gaps between icons, arrows, numbers and descriptions.
# ALIGNMENT MUST LOOK DELIBERATE.
The entire section should remain inside the same master left/right boundaries as the hero and other principal sections.
---
# 5. SERVICES
Clearly communicate the main services.
## ICON-FIRST RULE
# DEFAULT TO ICONS RATHER THAN STOCK PHOTOGRAPHY FOR SERVICE CARDS.
Use:
- consistent line icons;
- short headings;
- concise descriptions;
- restrained links/arrows.
Use a consistent professional icon family rather than mixed emoji/icon styles.
### DO NOT:
Fill four service cards with four unrelated stock photographs merely because there is space available.
Stock photography should have a clear communication purpose.
For abstract concepts, services, features, benefits and process steps:
# USE ICONS FIRST.
The complete services grid should begin on the **LEFT MASTER GUIDE** and finish on the **RIGHT MASTER GUIDE**.
Individual cards or columns should divide the available width systematically rather than creating arbitrary outer margins.
---
# 6. BUSINESS AS GUIDE / TEAM
Introduce the key people relatively low on the homepage.
Use genuine supplied photography.
Include enough information to establish:
- identity;
- role;
- relevant experience;
- trust;
- approachability.
Do not turn this into the hero.
The customer remains the hero; the clinicians are the guides.
Keep the section within the same master container.
---
# 7. LOCATION
For a local business, include the real location.
Use the genuine supplied storefront photograph where one exists.
Combine it with:
- location name;
- address;
- directions CTA;
- relevant contact details.
Do not regenerate or beautify the actual storefront.
If no genuine storefront image exists, do not invent one.
Use an alternative treatment such as:
- location iconography;
- map-related graphical treatment;
- address/contact block;
- authentic interior photography where supplied.
Keep the content aligned to the master container.
---
# 8. FINAL CTA
Near the bottom, repeat the primary conversion action.
Keep the next step obvious.
The CTA section may use a full-width background treatment, but its actual content should remain aligned to the master content container.
---
# 9. MANDATORY DESKTOP FOOTER
# DO NOT OMIT THE FOOTER.
The finished 1440px homepage must visibly include a properly designed footer.
Where appropriate, include:
- actual logo;
- tagline;
- navigation;
- services;
- phone number;
- email;
- address;
- opening hours;
- social icons;
- Privacy Policy;
- Terms & Conditions;
- copyright.
Use a structured multi-column desktop layout with clear alignment.
The footer should feel like a deliberately designed final section, not information squeezed into whatever space remains.
The footer background may extend full width.
However:
**the footer's actual content must align to the SAME LEFT AND RIGHT MASTER GUIDES used by the header and homepage sections above it.**
---
# MODERN DESIGN PRINCIPLES — HIGH PRIORITY
## THIS SECTION IS CRITICAL
**StoryBrand controls the communication architecture.**
**Modern UX/UI design controls how that architecture is presented.**
Neither should be sacrificed for the other.
The mockup must demonstrate professional contemporary design through:
---
# MODERN GEOMETRIC COMPOSITION + LAYERING
Avoid making the homepage feel like a simple stack of rigid horizontal rectangular sections.
A contemporary desktop website should have **visual flow, depth and composition**, while remaining disciplined and easy to use.
Use **subtle contemporary geometric composition** to create visual interest, depth and movement.
Where appropriate:
- place selected content inside **large geometric or softly shaped containers**;
- use curved, angled, asymmetric or softly organic edges;
- allow selected containers, photographs or visual elements to **slightly overlap conventional section boundaries**;
- allow a shape from one section to visually enter the space of the section above or below;
- use restrained layering to make the page feel designed as a continuous composition rather than assembled from independent horizontal strips;
- combine full-width backgrounds with contained geometric elements;
- allow authentic photography to participate naturally in these compositions;
- use occasional asymmetry where it improves the visual hierarchy;
- use white space as an active part of the composition.
## AVOID THE "BLOCKY WEBSITE" EFFECT
Do NOT make every section:
- a full-width rectangle;
- followed by another full-width rectangle;
- followed by another full-width rectangle;
- separated only by a change in background colour.
Avoid creating the visual impression of:
# HEADER
# RECTANGLE
# RECTANGLE
# RECTANGLE
# RECTANGLE
# FOOTER
Instead, create a more sophisticated visual relationship between sections.
The page should feel:
# CONNECTED + LAYERED + SPACIOUS + DELIBERATE.
---
# SUBTLE DEPTH + DROP SHADOWS
Use **VERY SUBTLE drop shadows** selectively to make elevated geometric containers appear to sit slightly above the page.
The objective is gentle depth, NOT obvious card shadows.
Shadows should be:
- soft;
- diffuse;
- low contrast;
- restrained;
- used only where they clarify layering.
Appropriate uses may include:
- an Agitation/Solution container overlapping two sections;
- an important callout;
- a large floating geometric panel;
- a selectively elevated content block.
Avoid:
- heavy shadows;
- dark shadows;
- shadows on every card;
- obvious floating-card effects;
- excessive depth that makes the site resemble an app dashboard.
# THE USER SHOULD FEEL THE DEPTH MORE THAN NOTICE THE SHADOW.
---
# CRITICAL GEOMETRIC ALIGNMENT RULE
# GEOMETRIC SHAPES MAY BREAK SECTION BOUNDARIES.
# THE MASTER CONTENT GRID MAY NOT.
This distinction is critical.
Creative overlap must NEVER compromise the established:
# LEFT MASTER GUIDE | RIGHT MASTER GUIDE
The outermost meaningful content of every major composition must remain aligned to the same master container used throughout the page.
In particular:
- photographs must NOT accidentally bust beyond the master left or right alignment edge;
- storefront photographs must NOT extend beyond the LEFT MASTER GUIDE simply because the composition overlaps vertically;
- hero callouts must NOT extend beyond the RIGHT MASTER GUIDE;
- decorative text containers must NOT create accidental horizontal protrusions;
- cards and geometric panels must NOT introduce new arbitrary left/right boundaries;
- overlapping elements should primarily create **VERTICAL DEPTH**, not random horizontal misalignment.
Decorative background shapes may extend outside the master container when clearly intentional.
Functional content should not.
## DISTINGUISH BETWEEN:
### DECORATIVE SHAPE
May deliberately extend beyond the grid where visually appropriate.
### FUNCTIONAL CONTENT
Must remain inside and aligned with the master grid.
Functional content includes:
- text;
- buttons;
- photographs communicating business information;
- service cards;
- location photography;
- team photography;
- callouts containing meaningful copy;
- navigation;
- contact information.
# ALIGNMENT ALWAYS OVERRIDES DECORATIVE CREATIVITY.
If an overlapping composition looks exciting but causes the page's principal left or right edge to become visually inconsistent:
# FIX THE COMPOSITION.
---
# LOGO SCALE + LAYERING
Do not automatically treat the logo as a tiny utility item in the navigation.
Where appropriate, the genuine supplied logo may be displayed **larger and more confidently**.
A strong authentic logo can function as an important visual branding element.
Where the composition allows it, the logo may:
- be larger than conventional navigation logos;
- occupy additional vertical space;
- slightly overlap the header and the section immediately below;
- participate in the layered geometric composition.
However:
- use the genuine logo unchanged;
- never regenerate it;
- never distort it;
- maintain appropriate aspect ratio;
- maintain generous clear space around it;
- do not allow it to interfere with navigation;
- do not allow it to obscure important content;
- ensure its placement feels intentional rather than accidental;
- maintain a clear relationship with the LEFT MASTER GUIDE.
The overlap should be subtle.
The objective is:
# CONFIDENT BRAND PRESENCE
not:
# OVERSIZED LOGO FOR ITS OWN SAKE.
---
# ALIGNMENT
Every element should appear to belong to an intentional grid.
Pay particular attention to:
- master left edge;
- master right edge;
- left edges of headings;
- paragraph alignment;
- card edges;
- icon alignment;
- button alignment;
- image boundaries;
- column baselines;
- process-step spacing;
- section boundaries.
Avoid elements that appear to “float” without relationship to surrounding content.
# NOTHING SHOULD LOOK ACCIDENTALLY POSITIONED.
Do not merely assess alignment **within individual sections**.
Assess alignment **ACROSS THE ENTIRE PAGE.**
The page should have obvious vertical alignment relationships between:
**HEADER → HERO → AGITATION/SOLUTION → SERVICES → 3-STEP PLAN → TEAM → LOCATION → FINAL CTA → FOOTER.**
The major left and right edges should remain visually consistent from top to bottom.
Geometric layering does NOT override this requirement.
---
# WHITE SPACE
Use generous white space.
This is one of the highest-priority design requirements.
Provide substantial breathing room:
- above and below sections;
- around headings;
- between eyebrow and heading;
- between heading and body copy;
- around CTAs;
- between cards;
- between icons and copy;
- between columns;
- around photographs;
- around overlapping geometric elements.
Do not try to fill every available area.
# EMPTY SPACE IS PART OF THE DESIGN.
Do not make the page feel busy merely to demonstrate how much content can fit into 1440px.
Prefer:
# FEWER ELEMENTS + STRONGER HIERARCHY + MORE SPACE
over:
# MORE ELEMENTS + SMALLER ELEMENTS + VISUAL CLUTTER.
---
# CONSISTENT SECTION PADDING
Maintain a consistent vertical rhythm.
Sections should normally have substantial top and bottom padding.
Do not allow:
- one section to feel cramped;
- another to have enormous unexplained gaps;
- headings to touch section boundaries;
- cards to sit too close to neighbouring sections;
- overlapping shapes to consume necessary breathing room.
Spacing should feel systematic.
Horizontal padding must also remain systematic.
Do not randomly alter the horizontal inset from one section to another.
---
# TYPOGRAPHY
Use contemporary, highly readable typography.
Create obvious hierarchy between:
- eyebrow;
- H1;
- H2;
- H3;
- body;
- supporting text;
- CTA labels.
Do not make everything bold.
Do not make everything large.
Do not use tiny copy simply to fit content.
---
# ICONS BEFORE STOCK PHOTOS
This is a major visual rule.
Use clean, consistent line icons for:
- services;
- benefits;
- trust signals;
- process steps;
- telephone;
- location;
- eye examinations;
- eyewear;
- contact lenses;
- technology;
- booking;
- other abstract concepts.
### PHOTOGRAPHY SHOULD BE RESERVED PRIMARILY FOR:
- hero/customer outcome;
- genuine team members;
- genuine storefront/location;
- genuinely useful authentic practice imagery;
- situations where a photograph communicates something an icon cannot.
Do not decorate every section with stock photography.
A modern site should often use:
# 1 STRONG HERO IMAGE + AUTHENTIC BUSINESS PHOTOGRAPHY + ICONS + TYPOGRAPHY + WHITE SPACE + SUBTLE GEOMETRIC COMPOSITION.
---
# VISUAL RESTRAINT
Do not overuse:
- gradients;
- shadows;
- rounded cards;
- coloured backgrounds;
- decorative handwriting;
- floating shapes;
- badges;
- unnecessary photographs;
- oversized icons;
- geometric shapes simply for decoration.
Every visual treatment should have a purpose.
Do not break the master grid simply to make a section appear more visually interesting.
Geometric composition should add sophistication.
It should NOT become visual noise.
---
# EYEBROW TEXT
Eyebrow text must add information.
Do not merely repeat the heading.
Ask:
> **If I removed this eyebrow, would useful context disappear?**
If not, rewrite or remove it.
---
# AVOID EMPTY MARKETING FLOURISHES
Do not add decorative slogans merely because an area looks empty.
# SPECIFICITY BEATS SENTIMENTALITY.
Avoid generic phrases such as:
- Brighter future;
- Brighter tomorrow;
- See life differently;
- A clearer tomorrow;
- Your vision, our passion;
- Better vision for a better life;
- Excellence in eye care;
unless the wording is an established part of the business's genuine brand.
Instead, communicate a **specific customer outcome, benefit or proposition**.
Prefer wording such as:
**Clear answers about your vision.**
**Understand what's happening with your eyes.**
**Eye care that takes the time to understand you.**
**Helping your child see and learn comfortably.**
**Clear advice about your vision and eye health.**
The precise wording must reflect the actual business and customer.
Do not fill decorative geometric shapes with vague aspirational copy merely because the design appears to need text.
# IF THE COPY DOES NOT COMMUNICATE SOMETHING USEFUL, REMOVE IT.
---
# CRITICAL AI IMAGE QUALITY CONTROL
Generated photography must be inspected for:
- eyes;
- hands;
- fingers;
- arms;
- teeth;
- glasses;
- jewellery;
- clothing;
- overlapping objects;
- body proportions;
- interactions between people.
Reject images containing:
- malformed hands;
- extra/missing fingers;
- distorted eyes;
- strange teeth;
- impossible limbs;
- incorrectly positioned glasses;
- merged body parts;
- unexplained objects;
- impossible anatomy.
These rules apply to **GENERATED imagery only**.
Do not “correct” genuine supplied photography.
---
# DO NOT HALLUCINATE
Distinguish between:
### VERIFIED
Information genuinely found on the website or supplied by me.
### REASONABLE DESIGN COPY
New wording that communicates a verified proposition more clearly.
### UNKNOWN
Anything that cannot be established.
Never turn UNKNOWN information into fact.
Do not invent:
- logos;
- clinicians;
- staff;
- locations;
- testimonials;
- qualifications;
- awards;
- technologies;
- services;
- statistics;
- social accounts.
---
# FINAL DESIGN OBJECTIVE
The homepage should feel as though a **high-quality contemporary website designer has taken the real business and rebuilt its homepage around StoryBrand and modern UX/UI principles.**
It should NOT look like:
- an unrelated template;
- an old website with modern colours;
- a collage of stock photographs;
- a collection of disconnected cards;
- a stack of rigid horizontal rectangles;
- a mobile design stretched across a desktop;
- an AI-generated “website-looking picture”;
- a series of sections with unrelated container widths;
- an experimental graphic design that sacrifices usability.
Someone familiar with the business should recognise:
- logo;
- colours;
- people;
- location;
- services;
- positioning;
- personality.
But the redesign should immediately feel:
# CLEANER + CLEARER + MORE SPACIOUS + BETTER ALIGNED + MORE CONTEMPORARY + MORE LAYERED + MORE CUSTOMER-FOCUSED + MORE TRUSTWORTHY + MORE CONVERSION-FOCUSED.
---
# MANDATORY FINAL QA
Before presenting the mockup, ask:
## DESKTOP
1. Is this genuinely designed for a **1440px-wide desktop/laptop viewport**?
2. Is there a **horizontal navigation menu**?
3. Is there a **clickable phone icon immediately left of the primary header CTA**?
4. Is the content constrained within a sensible desktop grid?
## MASTER CONTAINER + HORIZONTAL ALIGNMENT
5. Have I established **ONE consistent master content container** for the page?
6. Do the major sections share the **SAME master left edge**?
7. Do the major sections share the **SAME master right edge**?
8. Can I visually draw a straight vertical guide down the left side of the page and see the major content consistently align to it?
9. Can I do the same on the right side?
10. Does the header logo maintain a deliberate relationship with the LEFT MASTER GUIDE?
11. Does the right edge of the header CTA align with the RIGHT MASTER GUIDE?
12. Does the hero respect these same boundaries?
13. Does the Agitation/Solution section respect these same boundaries?
14. Does the service grid respect these same boundaries?
15. Does the three-step section respect these same boundaries?
16. Does the team/location content respect these same boundaries?
17. Does the footer content respect these same boundaries?
18. Have any sections accidentally introduced different horizontal margins or container widths?
19. Have I correctly distinguished **full-width backgrounds** from the **aligned content container inside them**?
20. Are any decorative elements causing the page's major alignment edges to appear inconsistent?
21. Does any photograph accidentally bust through the LEFT or RIGHT MASTER GUIDE?
22. Does any meaningful hero callout accidentally bust through the RIGHT MASTER GUIDE?
23. Are overlaps creating primarily **vertical depth rather than horizontal misalignment**?
## MODERN DESIGN
24. Is alignment precise and deliberate?
25. Is there generous white space?
26. Is section padding consistent?
27. Does each section have a clear visual hierarchy?
28. Are elements aligned to a coherent grid?
29. Have I avoided unnecessary visual clutter?
30. Does the design look contemporary rather than dated?
31. Have I used icons rather than unnecessary stock photography?
32. Have I avoided making the homepage look like a stack of rectangular blocks?
33. Have I introduced restrained geometric composition where useful?
34. Do overlapping elements make the page feel more sophisticated rather than less organised?
35. Are drop shadows VERY subtle?
36. Does the design have depth without resembling an app dashboard?
37. Is the logo large enough to have appropriate brand presence?
38. If the logo overlaps vertically, does the overlap look deliberate and professionally composed?
## STORYBRAND
39. Is the customer the hero?
40. Is the business the guide?
41. Is the desired outcome obvious?
42. Is there a clear primary CTA?
43. Is the **Agitation/Solution section immediately below the hero**?
44. Does it identify a genuine problem without melodrama?
45. Is there a clearly identifiable three-step plan?
46. Is the **three-step heading on the left and the process presented cleanly on the right**?
47. Have I avoided vague aspirational fluff where more useful wording is available?
## AUTHENTICITY
48. Is the supplied logo unchanged?
49. Does the palette derive from the logo?
50. Are supplied staff photographs authentic and unchanged?
51. Is the genuine storefront being used where one exists?
52. If no storefront photograph exists, have I avoided inventing one?
53. Have I avoided inventing business details?
## PHOTOGRAPHY
54. Is photography being used purposefully?
55. Have service/benefit/process concepts used icons wherever practical?
56. Is generated hero photography free from obvious AI artefacts?
57. Are authentic photographs properly integrated into the geometric composition without compromising alignment?
## FOOTER
58. Is there a **complete, deliberately designed desktop footer**?
59. Does it align properly with the rest of the page?
60. Does its content use the SAME left and right master edges?
61. Does it contain genuine relevant business/contact/navigation information?
---
# FAILURE CONDITIONS
The mockup has **FAILED** and must be corrected before presentation if:
- it is designed for mobile instead of 1440px desktop;
- it uses a hamburger menu instead of appropriate horizontal desktop navigation;
- the phone icon is missing beside the header CTA;
- the Agitation/Solution section is missing;
- the three-step plan is missing;
- the three-step section is awkwardly aligned;
- the footer is missing;
- spacing is cramped;
- white space is inadequate;
- alignment is sloppy;
- **the major sections do not share consistent left and right master alignment edges;**
- **different sections use arbitrary or inconsistent content widths;**
- **the header, hero, body sections and footer do not visually belong to the same horizontal grid;**
- **full-width backgrounds cause the content itself to abandon the master container;**
- **the left master guide cannot be visually traced down the page;**
- **the right master guide cannot be visually traced down the page;**
- **a storefront or other meaningful photograph accidentally extends beyond the master alignment edge;**
- **a hero callout or meaningful geometric element accidentally extends beyond the right master edge;**
- unrelated elements do not share a coherent grid;
- the design consists primarily of stacked rectangular horizontal blocks;
- geometric layering creates clutter rather than sophistication;
- overlapping elements compromise white space;
- drop shadows are heavy or obvious;
- decorative shapes overwhelm the content;
- stock photography is unnecessarily used where icons would communicate better;
- the supplied logo is altered;
- the logo is unnecessarily tiny where stronger brand presence would improve the design;
- brand colours are ignored;
- authentic people or storefronts are regenerated;
- the customer is not clearly the hero;
- vague aspirational marketing fluff is used where specific useful copy would be better;
- unverified claims are presented as facts;
- generated people contain obvious visual errors.
# IF ANY OF THESE OCCUR, FIX THE DESIGN BEFORE SHOWING IT TO ME.
---
# FINAL 1440PX DESIGN SIMULATION
Before presenting the mockup, mentally place it on a **1440px-wide laptop screen**.
First imagine two vertical guide lines running from the top of the page to the bottom:
# LEFT MASTER GUIDE | RIGHT MASTER GUIDE
Then ask:
**Does the header align to these guides?**
**Does the hero align to these guides?**
**Does the Agitation/Solution section align to these guides?**
**Does the services section align to these guides?**
**Does the three-step section align to these guides?**
**Does the team/location section align to these guides?**
**Does the footer align to these guides?**
**Can I visually trace the SAME left and right boundaries through the entire homepage?**
**Does any storefront image accidentally protrude beyond the left guide?**
**Does any hero callout accidentally protrude beyond the right guide?**
**Have I mistaken full-width backgrounds for full-width content?**
Then ask:
**Does this look like a professionally designed contemporary desktop website?**
**Does the navigation naturally use the available horizontal space?**
**Do the left and right edges of major elements align?**
**Is there enough white space that the page feels calm and considered rather than crowded?**
**Does each section have a dominant idea?**
**Are photographs being used because they communicate something useful rather than merely filling space?**
**Could an icon communicate this concept more cleanly?**
**Does the three-step section have a strong left-hand introduction and a clean, aligned process on the right?**
**Is the Agitation/Solution section clearly visible immediately after the hero?**
**Does the page finish with a properly designed footer?**
Now assess the overall composition:
**Does the page feel like a stack of rectangular horizontal blocks?**
If yes:
# REDESIGN THE COMPOSITION.
Ask:
**Could one or two major containers overlap section boundaries vertically?**
**Could a subtle geometric shape create a stronger transition between sections?**
**Could an authentic photograph participate more naturally in the composition?**
**Could VERY subtle shadowing provide depth?**
**Could the logo have stronger visual presence?**
But then check again:
**Have any of those choices broken the master alignment grid?**
If yes:
# FIX THE ALIGNMENT.
The desired hierarchy is:
# ALIGNMENT FIRST.
# WHITE SPACE SECOND.
# VISUAL HIERARCHY THIRD.
# GEOMETRIC COMPOSITION AND LAYERING FOURTH.
Decorative creativity must operate inside those constraints.
If the answer to any critical requirement is no:
# STOP AND REDESIGN IT.
---
# BUSINESS TO REDESIGN
**Website URL:**
**[INSERT WEBSITE URL HERE]**
---
# MANDATORY ASSET + HERO CHECK
Before generating the mockup, ask me for:
### Logo
**[UPLOAD / PROVIDE URL]**
### Team photo
**[UPLOAD / PROVIDE URL]**
OR
### Individual key team member photos
**[UPLOAD / PROVIDE URLS]**
### Storefront / practice photo
**[UPLOAD / PROVIDE URL]**
### Other useful authentic assets
**[OPTIONAL]**
### Customer/patient-centric hero image
After researching the business:
**Suggest 3–5 appropriate photorealistic hero-image concepts.**
Then ask:
> **Which hero-image direction would you like to use? You can choose one, modify one, or describe something completely different.**
**Do not skip the asset check.**
**Do not skip the hero-image discussion.**
**Do not generate the final mockup until I have responded to BOTH.**
---
# FINAL INSTRUCTION
# DESIGN FOR A 1440PX-WIDE LAPTOP/DESKTOP SCREEN.
# USE A HORIZONTAL NAVIGATION MENU.
# PUT A CLICKABLE PHONE ICON IMMEDIATELY TO THE LEFT OF THE PRIMARY HEADER CTA.
# USE ONE MASTER CONTENT CONTAINER THROUGHOUT THE PAGE.
# MAINTAIN THE SAME LEFT AND RIGHT MASTER ALIGNMENT EDGES FROM HEADER TO FOOTER.
# FULL-WIDTH BACKGROUNDS MUST NOT BREAK THE CONTENT GRID.
# GEOMETRIC SHAPES MAY BREAK SECTION BOUNDARIES — THE MASTER CONTENT GRID MAY NOT.
# OVERLAP SHOULD CREATE VERTICAL DEPTH, NOT HORIZONTAL MISALIGNMENT.
# USE VERY SUBTLE DROP SHADOWS WHERE THEY IMPROVE DEPTH AND LAYERING.
# GIVE THE AUTHENTIC LOGO APPROPRIATE VISUAL PRESENCE AND ALLOW SUBTLE VERTICAL OVERLAP WHERE IT IMPROVES THE COMPOSITION.
# AVOID MAKING THE HOMEPAGE LOOK LIKE A STACK OF RECTANGULAR BLOCKS.
# PRIORITISE MODERN DESIGN PRINCIPLES.
In particular:
# ALIGNMENT + LEFT/RIGHT EDGE CONSISTENCY + WHITE SPACE + VISUAL HIERARCHY + CONSISTENT PADDING + TYPOGRAPHY + RESTRAINT + SUBTLE GEOMETRIC LAYERING.
Use:
# ICONS BEFORE UNNECESSARY STOCK PHOTOGRAPHY.
Avoid:
# GENERIC ASPIRATIONAL FLUFF WHEN SPECIFIC CUSTOMER-FOCUSED COPY WOULD BE MORE USEFUL.
Never omit:
# AGITATION/SOLUTION + THREE-STEP PLAN + FOOTER.
And remember:
# STORYBRAND DETERMINES WHAT THE PAGE COMMUNICATES.
# MODERN UX/UI DESIGN DETERMINES HOW WELL IT COMMUNICATES IT.
# GEOMETRIC COMPOSITION GIVES THE PAGE DEPTH AND CONTEMPORARY CHARACTER.
# AND A CONSISTENT MASTER GRID HOLDS THE ENTIRE DESIGN TOGETHER.