Design Research

NO WEBSITE LAYOUT WITHOUT TEMPLATE RESEARCH FIRST

BEFORE designing any website layout:

1. CLASSIFY: What industry or niche does this serve? (fitness, legal, SaaS, etc.)
2. SURVEY: Search template marketplaces in that niche across multiple sources
3. ANALYZE: Study the top 3-5 templates - their sections, layout, colors, typography
4. EXTRACT: Identify the common patterns (what do ALL strong templates in this niche share?)
5. PRESENT: Show the user your references and recommended blueprint
6. ADAPT: Build using those patterns, tailored to the user's brand
7. ONLY THEN: Write the code

Omit any step = generic AI website indistinguishable from every other AI website

Template: [name]
Source: [marketplace]
URL: [demo link]
Popularity: [stars/sales/rating]
Price: [cost]

Section Sequence (top to bottom):
1. [Hero type] -- e.g., "Full-bleed image with text overlay + call-to-action"
2. [Section 2] -- e.g., "Service grid (3 columns with icons)"
3. [Section 3] -- e.g., "About block with side-by-side image and text"
4. [Section N]...

Color Palette:
- Primary: [hex]
- Secondary: [hex]
- Background: [hex]
- Body text: [hex]

Typography:
- Headings: [font family, weight]
- Body: [font family, weight]

Layout Approach: [full-width / boxed / asymmetric]
Navigation: [fixed top / sidebar / hamburger]
Footer: [multi-column / minimal / mega-footer]

SHARED PATTERNS (what ALL strong templates in this niche include):

Sections every [niche] website features:
1. [section] -- [why it is effective]
2. [section] -- [why it is effective]
...

Color tendencies: [dark/light, warm/cool, industry norms]
Typography: [serif/sans-serif, bold/light, industry norms]
Layout: [common structural approaches in this niche]
Distinctive elements: [what differentiates this niche from generic sites]

I surveyed [niche] website templates across [N] marketplaces. Here are the strongest candidates:

**A)** [Template Name] — [rating], [sales/downloads]
   Demo: [clickable URL]
   Strengths: [what makes it excellent]
   Palette: [primary color approach] · Typography: [font approach]

**B)** [Template Name] — [rating], [sales/downloads]
   Demo: [clickable URL]
   Strengths: [what makes it excellent]
   Palette: [primary color approach] · Typography: [font approach]

**C)** [Template Name] — [rating], [sales/downloads]
   Demo: [clickable URL]
   Strengths: [what makes it excellent]
   Palette: [primary color approach] · Typography: [font approach]

**D) Hybrid blueprint** — Cherry-picked from all three ⭐ Recommended
   Sections: [synthesized section sequence from the strongest elements of A, B, C]
   Palette: [synthesized]
   Typography: [synthesized]
   Why: Combines [specific strength from A], [specific strength from B], [specific strength from C]

**Recurring patterns across all [niche] templates:**
- Every site includes: [section list]
- Color convention: [pattern]
- Typography: [pattern]

Check out the demos and pick A, B, C, or D.

Example: Building a Yoga Studio website

Template 1 (ThemeForest "ZenFlow", rating 4.8):
  -> Extract: Hero with serene background video + class booking CTA
  -> Extract: Class timetable with category filtering

Template 2 (Qode Interactive "AsanaStudio", rating 4.9):
  -> Extract: Instructor profile cards with hover credential display
  -> Extract: Wellness blog section with category navigation

Template 3 (Webflow "MindBody"):
  -> Extract: Membership tier comparison with highlighted recommendation
  -> Extract: Student testimonials carousel with portrait photos

Result: A yoga studio site that fuses the strongest elements from 3 premium templates,
each designed by professional UX teams with domain expertise.