Speed
The fastest way to get your ideas out - simple drawing by hand is much quicker than building wireframes in digital tools
Paper Wireframes
Create Paper Wireframes
Section titled “Create Paper Wireframes”Why Paper Wireframes?
Section titled “Why Paper Wireframes?”Paper wireframes offer unique advantages that make them an essential part of the design process, especially in the early stages when you’re exploring multiple ideas.
Key Benefits
Section titled “Key Benefits”Low Cost
Only need a pen and paper - no fancy tools or software required
Exploration
Because they’re fast and inexpensive, you can explore lots of ideas without major investment
Collaboration
Great for team brainstorming where different members can quickly sketch their own ideas
Paper vs. Digital: Different Purposes
Section titled “Paper vs. Digital: Different Purposes”Paper Wireframes Are For:
Section titled “Paper Wireframes Are For:”- Existing Products: Great way to practice by recreating known interfaces
- New Products: Exploring multiple approaches to structure and functionality
- Brainstorming: Getting lots of ideas down quickly during ideation sessions
The Difference with New Products
Section titled “The Difference with New Products”When wireframing for new products, you’re creating multiple wireframes for the same screen to explore different ways that one screen could work. For example, you might create 5 different versions of a homepage, each with different approaches to organizing information.
Step-by-Step Process
Section titled “Step-by-Step Process”Step 1: List Required Elements
Section titled “Step 1: List Required Elements”Before you start drawing, write a quick list of information that needs to go on the page you’re wireframing. This ensures you remember to include all necessary elements in each wireframe version.
Example for Dog Walking App Homepage:
- Navigation icon
- Search bar
- Images and text descriptions
- User profile/avatar
- Call-to-action buttons
Step 2: Start Drawing Multiple Versions
Section titled “Step 2: Start Drawing Multiple Versions”Create at least 5 different versions of how you want to structure information on the page. This is your exploration phase - be creative and try new ideas.
Example Exploration Process:
Option A: Dog walker profile cards (like grocery store flyers)
- Each dog walker has their own card layout
- Search bar at the top
- Card-based visual organization
Option B: Mixed content approach
- Dog walker profiles as horizontal rectangles
- Training tips/articles at top of page
- More comprehensive homepage content
Option C: User activity focus
- Recent activity section for returning users
- Horizontal dog walker profiles with dividers
- “Dog walkers near you” header for clarity
Option D: Feature-focused approach
- Three large sections highlighting main features
- Schedule a dog walker
- Recent activities
- Latest training tips
Option E: Visual engagement
- Placeholder images for visual appeal
- Avatar in top right for profile access
- More imagery-focused approach
Step 3: Review and Star Your Favorites
Section titled “Step 3: Review and Star Your Favorites”After creating multiple versions, review them and add stars next to elements you like most. This helps identify patterns and preferred approaches.
Look For:
- Elements that appear in multiple versions (likely important)
- Layouts that feel most intuitive
- Organization methods that serve user needs best
- Navigation approaches that make sense
Step 4: Narrow Down for Digital Development
Section titled “Step 4: Narrow Down for Digital Development”With stars marking your favorite ideas, narrow down to 2-3 concepts to develop further in digital wireframes. Focus on the starred elements that represent the best solutions.
Creative Wireframing Methods
Section titled “Creative Wireframing Methods”Traditional Paper
Section titled “Traditional Paper”- Plain 8.5” x 11” paper
- Pen or pencil
- Simple hand-drawn rectangles for phone frames
Preprinted Templates
Section titled “Preprinted Templates”- Download templates with device outlines pre-drawn
- Multiple screens per page for easy comparison
- Professional appearance for stakeholder presentations
Index Cards
Section titled “Index Cards”- Each card represents one mobile screen
- Easy to rearrange and reorder
- Great for collaborative brainstorming
- Simple to remove ideas you don’t like
Sticky Notes
Section titled “Sticky Notes”- Different colors for different types of content
- Easy to move elements around
- Great for exploring information hierarchy
- Collaborative team exercises
Demo Devices
Section titled “Demo Devices”- Cut-out phone shapes to hold wireframes
- Simulate realistic user experience
- Help visualize designs at actual scale
- Available for different device types
Using Your Sitemap
Section titled “Using Your Sitemap”Reference your sitemap to stay organized during paper wireframing:
- Track Progress: See which pages you’ve wireframed vs. which still need work
- Break Down Work: Tackle the project in manageable pieces
- Maintain Structure: Ensure your wireframes align with your planned information architecture
Example Approach:
- Start with homepage wireframes
- Move to main section pages
- Complete sub-pages within each section
- Address any special functionality screens
Portfolio Documentation
Section titled “Portfolio Documentation”Because wireframing is such an important part of the design process, save your paper wireframes to include in your portfolio. Take clear photos of your wireframes each time you create them.
What to Photograph:
- Individual wireframe versions (all 5+ explorations)
- The refined/starred final version
- Process shots showing your iteration
- Team collaboration moments if applicable
Photography Tips:
- Use good lighting to avoid shadows
- Ensure handwriting is legible
- Capture the full page/wireframe
- Take photos from directly above to avoid distortion
Your portfolio should show the complete design process, and paper wireframes demonstrate your ability to explore multiple solutions quickly and systematically - a valuable skill that employers look for in UX designers.