majiayu000 Wireframe Prototyping
Overview
Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.
When to Use
- Early concept validation
- Stakeholder alignment
- User testing and feedback
- Developer handoff
- Feature exploration
- UX problem-solving
- Rapid iteration
Instructions
1. Wireframing Fundamentals
Wireframe Principles:
Low Fidelity (Sketches):
Tools: Paper, whiteboard, Balsamiq
Time: 30 minutes - 2 hours
Detail: Basic layout, no colors/fonts
Best For: Brainstorming, exploration
Cost: Free
Medium Fidelity:
Tools: Figma, Sketch, Adobe XD
Time: 2-8 hours
Detail: Layout, content, basic interaction
Best For: Team alignment, feedback
Cost: Low
High Fidelity:
Tools: Figma, Framer, web dev tools
Time: 8+ hours
Detail: Visual design, interactions, animations
Best For: Developer handoff, user testing
Cost: Medium
---
## Wireframe Components
Header:
- Logo/branding
- Navigation menu
- Search bar (if applicable)
- User account menu
Main Content:
- Hero section or headline
- Primary content area
- Call-to-action buttons
- Supporting information
Sidebar (if applicable):
- Secondary navigation
- Filters
- Related content
Footer:
- Footer links
- Copyright
- Social media
---
## Layout Patterns
Grid Systems:
- 12-column grid (most flexible)
- 8-column for mobile
- Consistent spacing
Responsive Breakpoints:
- Mobile: 320px - 480px
- Tablet: 768px - 1024px
- Desktop: 1200px+
Common Layouts:
- Hero + Features
- Two-column with sidebar
- Three-column grid
- Masonry/card layout
2. Prototyping Tools & Techniques
# Create interactive prototypes
class PrototypeFramework:
TOOLS = {
'Figma': {
'fidelity': 'Medium-High',
'interactivity': 'Full',
'collaboration': 'Real-time',
'cost': 'Free-$30/month'
},
'Framer': {
'fidelity': 'High',
'interactivity': 'Advanced',
'collaboration': 'Limited',
'cost': '$12+/month'
},
'Adobe XD': {
'fidelity': 'High',
'interactivity': 'Full',
'collaboration': 'Good',
'cost': '$20/month'
}
}
def create_prototype_flow(self):
"""Define user interaction flows"""
return {
'screens': [
{'name': 'Login', 'interactions': ['Email input', 'Password input', 'Submit button']},
{'name': 'Dashboard', 'interactions': ['View projects', 'Create new', 'Search']},
{'name': 'Project Detail', 'interactions': ['View tasks', 'Edit project', 'Share']}
],
'flows': [
{'from': 'Login', 'to': 'Dashboard', 'trigger': 'Valid credentials'},
{'from': 'Dashboard', 'to': 'Project Detail', 'trigger': 'Click project'},
{'from': 'Project Detail', 'to': 'Dashboard', 'trigger': 'Back button'}
]
}
def define_interactions(self, screen):
"""Map user interactions"""
return {
'screen': screen,
'interactions': [
{
'element': 'Submit button',
'trigger': 'Click',
'action': 'Validate form and submit'
},
{
'element': 'Email field',
'trigger': 'Focus',
'action': 'Show placeholder, hint text'
}
]
}
def test_prototype(self, prototype):
"""Gather feedback on prototype"""
return {
'testing_method': 'Unmoderated user testing',
'participants': 5,
'duration': '30 minutes each',
'tasks': [
'Complete user registration',
'Create first project',
'Invite team member'
],
'metrics': [
'Task completion rate',
'Time to complete',
'Error rate',
'User satisfaction'
]
}
3. Wireframe Examples
Example: E-commerce Product Page
Header:
[Logo] [Search bar] [Cart] [Account]
Hero Section:
[Product image] [Price] [Add to cart] [Reviews: 4.5★]
Product Details:
Description | Specs | Size guide
Product Images:
[Main] [Thumb1] [Thumb2] [Thumb3]
Related Products:
[Product card] [Product card] [Product card]
Footer:
Contact | FAQ | Returns | Shipping info
4. Prototype Testing
Testing Plan:
Objective: Validate primary user flows and UX clarity
Test Method: Unmoderated remote testing
Participants:
- 5 representative users
- Mix of experience levels
- Similar to target persona
Tasks:
1. Register a new account
2. Create your first project
3. Invite a team member
4. Edit project settings
Success Criteria:
- 80%+ task completion rate
- Average time <5 min per task
- SUS score >70
- No critical usability issues
Feedback Areas:
- Navigation clarity
- Button placement
- Form fields
- Visual hierarchy
- Error handling
Analysis:
- Top 3 friction points
- User quotes
- Design recommendations
Best Practices
✅ DO
- Start with low-fidelity sketches
- Get feedback early and often
- Test with real users
- Iterate based on feedback
- Use consistent grids and spacing
- Document interaction flows
- Include edge cases (empty states, errors)
- Create mobile-first wireframes
- Share prototypes for collaboration
- Keep wireframes simple and focused
❌ DON'T
- Jump directly to high-fidelity
- Over-design before validation
- Ignore mobile/responsive needs
- Create wireframes without user input
- Leave interactions undefined
- Make wireframes too detailed
- Test only with team members
- Ignore accessibility
- Lock into designs too early
- Create unrealistic user flows
Wireframing Tips
- Use wireframe grids for consistency
- Name screens clearly and consistently
- Show all states (empty, loading, error)
- Include labels and descriptions
- Use annotations for complex interactions