Purpose
To provide a modular layout model for wireframes that balances hierarchy, readability, and clarity across web, app, and dashboard designs.
Core Layout Modules
| Module | Definition | Best Practices | Example Use |
| Hero Zone | The entry/top section of a screen or page | – Keep simple and impactful – 1 key message + primary action – Avoid clutter | Landing page hero with value prop + CTA |
| CTA Zone | Primary/secondary action areas | – Always visible above the fold – Limit to 1–2 CTAs per zone – Ensure visual contrast | “Book Demo” button in SaaS homepage |
| Info Block(s) | Supporting content areas explaining value | – Use modular cards/blocks – 3–5 key points max – Icons or visuals for quick scanning | Features overview section |
| Action Zone | Task or workflow-specific interaction | – Place near related content – Keep consistent patterns (forms, buttons) – Ensure accessible tap/click sizes | “Create New Project” form in dashboard |
| Navigation Zone | Persistent menu/breadcrumbs for movement | – Limit top-level items <7 – Use breadcrumb for depth >2 – Maintain consistent placement | Left sidebar in dashboard |
| Feedback Zone | States and user feedback messaging | – Show errors inline near field – Success confirmations at top/center – Use microcopy, not just colors | Form errors, success messages |
Structural Guidelines
- Hierarchy First
- Always map: Hero → Info → CTA → Action → Feedback.
- Users should see what matters within 5 seconds.
- Grid Alignment
- Use Grid & Spacing Rulesheet (Doc 3.5) to define breakpoints and container widths.
- Scannability
- Break text-heavy sections into cards/lists.
- Place CTAs where decisions are natural (after context).
- Consistency
- Repeatable modules across screens reduce cognitive load.
- Example: same “card style” for product vs. pricing vs. dashboard modules.
- Edge Cases
- Each module must account for empty, loading, success, error states.
Example (Simplified Wireframe Flow for SaaS Landing Page)
- Hero Zone → Headline: “Cut PRD time by 40%” + CTA: “Book Demo”
- Info Blocks → 3 cards: Speed, Accuracy, Collaboration
- CTA Zone → Mid-page “See Pricing” button
- Action Zone → Demo booking form at bottom
- Feedback Zone → “Thanks! Check your email for confirmation.”
Usage Notes
- Apply this model at wireframe drafting stage (Doc 3.1 SOP).
- Adapt blocks per platform (mobile = stacked, web = horizontal).
- If a screen/module doesn’t fit model, justify exception in notes.
Outcome: Wireframes become modular, consistent, and scalable, making UI design faster and reducing review cycles.