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
Define page structure
Header/navigation
Hero section
Content sections
Footer
Create ASCII wireframe
Use boxes, lines, and text to represent layout
Show hierarchy with spacing and sizing
Indicate interactive elements
Label all components
Add annotations
Content descriptions
Interaction notes
Responsive behavior
Priority markers
Define user flow
Entry points
CTAs and paths
Exit points
Provide next steps
Content requirements
Design considerations
Development notes
Workflow 2: App Screen Wireframes
Map user journey
List all screens needed
Define flow between screens
Identify decision points
Design each screen
Navigation structure
Content placement
Interactive elements
States (empty, loading, error, success)
Show connections
Arrows indicating flow
Numbered steps
Decision trees
Document interactions
Tap/click actions
Swipe gestures
Long-press behaviors
Transitions
Workflow 3: Dashboard Wireframe
Define data hierarchy
Most important metrics
Secondary information
Detail views
Filter/control placement
Layout panels
Primary content area
Sidebar navigation
Top bar utilities
Widget placement
Design data visualizations
Chart placeholders
Table structures
Card layouts
Empty states
Plan interactions
Drill-down flows
Filter behaviors
Export/actions
Refresh patterns
Workflow 4: User Flow Wireframes
Map complete flow
Start state
All decision points
Success paths
Error paths
End states
Wireframe each step
One screen per step
Show state changes
Indicate validation
Connect flow
Arrows between screens
Annotate triggers
Note conditional logic
Document edge cases
What if scenarios
Error handling
Validation feedback
Quick Reference
Action
Command/Trigger
Landing page wireframe
"Wireframe a landing page for [product]"
App screen wireframe
"Create wireframe for [feature] screen"
User flow
"Map user flow for [task]"
Dashboard
"Wireframe dashboard for [use case]"
Form wireframe
"Design form for [purpose]"
Navigation
"Wireframe navigation for [site]"
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 with icon
Annotation Symbols
[Component Name] - Placeholder for element
(...) - Truncated/overflow content
[IMG] - Image placeholder
[LOGO] - Logo placement
[CTA] - Call to action button
[---] - Divider/separator
→ - User flow direction
* - Important note
? - Decision point
! - Error/warning state
✓ - Success state
Wireframe Best Practices
Keep it low-fidelity
Resist urge to add visual polish
Focus on structure
Hierarchy and layout, not colors/fonts
Use real content
Actual text, not lorem ipsum when possible
Show states
Empty, loading, error, success for each component
Annotate heavily
Explain interactions, behaviors, constraints
Think mobile-first
Start with smallest screen
Number elements
Make annotations easy to reference
Use consistent spacing
Visual rhythm even in wireframes
Indicate content types
[Headline], [Body text], [Button label]
Show all interactions
Hovers, clicks, swipes, gestures
Document edge cases
What happens when things go wrong
Keep it simple
Boxes, lines, and labels are enough
Common Patterns
Landing Page Structure
1. Header (sticky)
- Logo + Navigation + CTA
2. Hero (above fold)
- Headline + Subheading + CTA + Visual
3. Social Proof
- Logos or testimonials
4. Features (3-column)
- Icon + Headline + Description × 3
5. How It Works (stepped)
- Step 1, Step 2, Step 3 with visuals
6. Pricing (table or cards)
- 3 tiers with features listed
7. Final CTA
- Headline + Button + Trust signals
8. Footer
- Links, social, legal
Dashboard Layout
+-----+---------------------------+
| Nav | Top Bar [Search] [User] |
| [L] +---------------------------+
| [I] | |
| [N] | Main Content |
| [K] | (Charts, Tables) |
| [S] | |
| | |
+-----+---------------------------+
Form Flow
Step 1: Basic Info
[Name Input]
[Email Input]
[Next Button]
↓
Step 2: Details
[Multiple fields]
[Back] [Next]
↓
Step 3: Confirmation
[Review info]
[Edit] [Submit]
↓
Success State
[✓] Thank you message
[Next action]
Deliverables Format
WIREFRAME SPECIFICATION
Project: [Name]
Page/Screen: [Landing Page / Dashboard / etc.]
Date: [Date]
USER FLOW
Entry → Action → Result → Next Step
WIREFRAME
[ASCII diagram of layout]
COMPONENTS
1. Header
- Height: 64px
- Elements: Logo (left), Nav (center), CTA (right)