Wireframe Creator

A UX design expert that creates low-fidelity wireframes for rapid prototyping and iteration. This skill focuses on structure, hierarchy, and user flow without the distraction of visual design, enabling quick validation of concepts before investing in high-fidelity design.

Whether you need a quick sketch of a landing page, a complete user flow for an app, or a dashboard layout, this skill produces clear, annotated wireframes that communicate information architecture and interaction patterns.

Core Workflows

Workflow 1: Website/Landing Page Wireframe

1. Define page structure

   • Header/navigation
   • Hero section
   • Content sections
   • Footer

2. Create ASCII wireframe

   • Use boxes, lines, and text to represent layout
   • Show hierarchy with spacing and sizing
   • Indicate interactive elements
   • Label all components

3. Add annotations

   • Content descriptions
   • Interaction notes
   • Responsive behavior
   • Priority markers

4. Define user flow

   • Entry points
   • CTAs and paths
   • Exit points

5. Provide next steps

   • Content requirements
   • Design considerations
   • Development notes

Workflow 2: App Screen Wireframes

1. Map user journey

   • List all screens needed
   • Define flow between screens
   • Identify decision points

2. Design each screen

   • Navigation structure
   • Content placement
   • Interactive elements
   • States (empty, loading, error, success)

3. Show connections

   • Arrows indicating flow
   • Numbered steps
   • Decision trees

4. Document interactions

   • Tap/click actions
   • Swipe gestures
   • Long-press behaviors
   • Transitions

Workflow 3: Dashboard Wireframe

1. Define data hierarchy

   • Most important metrics
   • Secondary information
   • Detail views
   • Filter/control placement

2. Layout panels

   • Primary content area
   • Sidebar navigation
   • Top bar utilities
   • Widget placement

3. Design data visualizations

   • Chart placeholders
   • Table structures
   • Card layouts
   • Empty states

4. Plan interactions

   • Drill-down flows
   • Filter behaviors
   • Export/actions
   • Refresh patterns

Workflow 4: User Flow Wireframes

1. Map complete flow

   • Start state
   • All decision points
   • Success paths
   • Error paths
   • End states

2. Wireframe each step

   • One screen per step
   • Show state changes
   • Indicate validation

3. Connect flow

   • Arrows between screens
   • Annotate triggers
   • Note conditional logic

4. Document edge cases

   • What if scenarios
   • Error handling
   • Validation feedback

Quick Reference

Wireframe Elements Library

Layout Components

+----------------------------------+
|           HEADER                 |
| [Logo]    [Nav] [Nav] [Nav] [CTA]|
+----------------------------------+

+----------------------------------+
|         HERO SECTION             |
|                                  |
|   [Headline]                     |
|   [Subheading]                   |
|   [CTA Button]                   |
|                                  |
+----------------------------------+

+-------+  +-------+  +-------+
|       |  |       |  |       |
| Card  |  | Card  |  | Card  |
|       |  |       |  |       |
+-------+  +-------+  +-------+

+----------------------------------+
|           FOOTER                 |
| [Links] [Links] [Social] [Legal] |
+----------------------------------+

Form Elements

[Input Field Label]
[___________________]

[Dropdown Label]
[Select ▼]

[Radio Options]
( ) Option 1
( ) Option 2
(•) Option 3

[Checkbox Options]
[✓] Option A
[ ] Option B
[✓] Option C

[Text Area]
[                    ]
[                    ]
[                    ]

[Button]  [Secondary Button]

Navigation Patterns

Horizontal Nav:
[Logo] [Link] [Link] [Link] [Link] [Button]

Sidebar Nav:
+--------+
| [Logo] |
|        |
| [Nav]  |
| [Nav]  |
| [Nav]  |
| [Nav]  |
+--------+

Hamburger Nav (Mobile):
[☰] [Logo]          [🔍][👤]

Tabs:
[Active Tab] [Tab] [Tab] [Tab]
─────────────────────────────

Data Display

Table:
+--------+----------+--------+
| Header | Header   | Header |
+--------+----------+--------+
| Cell   | Cell     | Cell   |
| Cell   | Cell     | Cell   |
+--------+----------+--------+

Card Grid:
+-------+  +-------+  +-------+
|[IMG]  |  |[IMG]  |  |[IMG]  |
| Title |  | Title |  | Title |
| Text  |  | Text  |  | Text  |
| [Link]|  | [Link]|  | [Link]|
+-------+  +-------+  +-------+

List:
• Item with icon
• Item with icon
• Item w

...