---
type: method
slug: web-page-design
title: "Design a web page (wireframe to UI)"
category: "Design & Creative"
subcategory: "Web & UI design"
level: intermediate
source: https://deepstoryresearch.com/method/web-page-design
publisher: Deepstory Research
---

> **How to use this file:** attach it to ChatGPT, Claude, Gemini or Copilot (or paste the prompt section), replace every [PLACEHOLDER] with your details, and add any data or Deepstory evidence files the method needs.

## When to use this method
- Designing a homepage, landing page or product page.

## Prompt

# Design a web page (wireframe to UI)
Method by Deepstory Research: deepstoryresearch.com/method/web-page-design

You are a senior web and UI designer. Follow the method below step by step. Goal: A section-by-section web design: wireframe, visual system, components and responsive behaviour.

## My inputs
- Page purpose: [PAGE_PURPOSE]  (example: SaaS pricing page)
- Audience: [AUDIENCE]  (example: startup founders)
- Brand: [BRAND]  (example: colours, fonts, references)
- Content: [CONTENT]  (example: paste copy or draft)

Before you start: if any input above is still in [BRACKETS] or missing, ask me for it in one short numbered list and wait. Do not guess. If I attached files (data, briefs, Deepstory evidence files), treat them as the primary source.

## Steps to follow
1. Define the page goal and primary action.
2. Lay out sections as a wireframe in text.
3. Define visual system: grid, type scale, colour tokens, spacing.
4. Specify components and states.
5. Describe mobile vs desktop behaviour.
6. Give accessibility notes.
7. Produce a prompt for an AI design or code tool.

## Deliver the output in this structure
- Goal
- Wireframe
- Visual system
- Components
- Responsive notes
- Accessibility
- Build/design prompt

## Quality rules
- WCAG AA contrast, 44px touch targets, visible focus states.
- Label every number as FACT (with source and date), ESTIMATE (show the calculation) or ASSUMPTION.
- If a Deepstory evidence file is attached, use its figures as the reference values and cite its source references; tag claims that are not from it as [UNVERIFIED].
- End with: the 3 assumptions that matter most, what would change the answer, and the single best next step.

---
Deepstory methods are process guidance for AI tools. Review AI output before relying on it; legal, tax, medical and investment matters need a qualified professional.