manutej/luxor-claude-marketplace/wireframing

Wireframing Skill

Table of Contents

1. When to Use This Skill
2. Core Concepts
3. Wireframe Types
4. Information Architecture
5. User Flows
6. Wireframe Elements
7. Annotation and Specification
8. Tools and Technologies
9. Iteration Process
10. Best Practices
11. Wireframing Examples

When to Use This Skill

Wireframing is essential during various phases of product development and design:

Early Product Discovery

• Requirements gathering: Visualize stakeholder ideas and requirements
• Concept exploration: Quickly test multiple design directions
• Feasibility assessment: Identify technical constraints early
• Scope definition: Define feature sets and functionality boundaries

Design Process

• Information architecture: Structure content and navigation hierarchies
• Layout exploration: Test different arrangements of UI elements
• User flow mapping: Visualize user journeys through the product
• Interaction design: Define how users interact with interface elements

Collaboration and Communication

• Stakeholder alignment: Get buy-in before detailed design work
• Developer handoff: Communicate functionality and structure
• User testing: Validate concepts without expensive high-fidelity work
• Design documentation: Create reference materials for the team

Iteration and Refinement

• Design critique sessions: Focus feedback on structure not aesthetics
• Rapid prototyping: Test ideas quickly with minimal investment
• A/B testing concepts: Compare different approaches efficiently
• Design system foundation: Establish patterns before visual design

Core Concepts

Low Fidelity vs High Fidelity

Low Fidelity Wireframes

Characteristics:

• Basic shapes and placeholders (boxes, lines, simple text)
• Grayscale or monochromatic color schemes
• Minimal detail and visual polish
• Focus on structure and layout
• Quick to create and modify
• Often hand-drawn or using basic digital tools

When to use:

• Early conceptual phases
• Rapid iteration and exploration
• Stakeholder workshops and brainstorming
• When you need quick feedback on structure
• Budget or time constraints

Advantages:

• Fast creation and iteration
• Low investment reduces attachment to ideas
• Encourages focus on functionality
• Accessible to non-designers
• Reduces cognitive load during review

High Fidelity Wireframes

Characteristics:

• Detailed UI elements and components
• Refined spacing and alignment
• Actual or representative content
• Interactive elements clearly defined
• May include real images and copy
• Closer to final design

When to use:

• After concept validation
• Developer handoff preparation
• Detailed user testing
• When precise specifications are needed
• Stakeholder presentations requiring polish

Advantages:

• Clear communication of intent
• Better for usability testing
• Serves as development reference
• Identifies edge cases and details
• Reduces ambiguity in implementation

The Wireframing Spectrum

Sketches → Low-Fi → Mid-Fi → High-Fi → Mockups → Prototypes
  ↓          ↓        ↓         ↓         ↓          ↓
Paper    Boxes &  Details   Refined   Visual    Interactive
notes    labels   added     content   design    behavior

Fidelity Dimensions

Wireframes can vary in fidelity across multiple dimensions:

1. Visual Fidelity: Level of visual detail and polish
2. Content Fidelity: Real vs placeholder content
3. Functional Fidelity: Interactive vs static
4. Layout Fidelity: Precise vs approximate spacing

Wireframe Types

1. Paper Sketches

Description: Hand-drawn wireframes on paper or whiteboards

Use Cases:

• Brainstorming sessions
• Quick ideation
• Early concept exploration
• Collaborative workshops
• Personal thinking process

Tools:

• Pen and paper
• Whiteboards
• Sticky notes
• Dot grid notebooks
• Stencils and templates

Techniques:

• Quick sketching with basic shapes
• Crazy 8's method (8 ideas in 8 minutes)
• Thumbnail sketches for multiple concepts
• Annotation with arrows and notes
• Photograph for digital archiving

Advantages:

• Zero learning curve
• No tool barriers
• Encourages creativity
• Natural for collaboration
• Portable and accessible

Limitations:

• Not easily shared remotely
• Difficult to iterate digitally
• Lacks precision
• Hard to maintain version control
• Not suitable for developer handoff

2. Low-Fidelity Digital Wireframes

Description: Simple digital wireframes using basic shapes and minimal styling

Visual Characteristics:

• Boxes, lines, and simple geometric shapes
• Grayscale color palette
• Placeholder text (Lorem ipsum or FPO)
• Generic icons (squares with X's for images)
• Minimal hierarchy through size and weight

Content:

• "Hero Image" or gray boxes for visuals
• Lorem ipsum or repeated text
• Generic labels and headings
• Simplified navigation structures

Common Elements:

• Header placeholders
• Navigation bars (simple lines/boxes)
• Content blocks (rectangles)
• Button placeholders (outlined boxes)
• Form fields (lines or simple inputs)
• Footer areas

Best For:

• Exploring multiple layout options
• Testing information hierarchy
• Getting quick stakeholder feedback
• Validating user flows
• Design team discussions

3. Mid-Fidelity Wireframes

Description: More refined wireframes with moderate detail

Visual Characteristics:

• Actual UI component representations
• Refined spacing and alignment
• Typography hierarchy (different weights/sizes)
• Some real content mixed with placeholders
• Basic iconography
• Grid-based layouts

Content:

• Mix of real and placeholder text
• Actual headings and key copy
• Representative content length
• Realistic form labels
• Actual navigation items

Interactive Elements:

• Clear button states
• Form field types defined
• Dropdown indicators
• Link styling
• Active states indicated

Best For:

• User testing structure and flow
• Detailed stakeholder reviews
• Information architecture validation
• Content strategy alignment
• Pre-development planning

4. High-Fidelity Wireframes

Description: Detailed, polished wireframes that closely represent final design

Visual Characteristics:

• Precise spacing and measurements
• Refined typography system
• Real or high-quality placeholder content
• Detailed component states
• Accessibility considerations
• Responsive breakpoints shown

Content:

• Actual copy or near-final content
• Real images or high-quality stock photos
• Accurate data representations
• Proper content hierarchy
• Character count considerations

Annotations:

• Interaction specifications
• State descriptions
• Conditional logic
• Error handling
• Loading states
• Edge cases documented

Best For:

• Developer handoff
• Detailed usability testing
• Stakeholder sign-off
• Design system documentation
• Accessibility review

5. Interactive Prototypes

Description: Clickable wireframes that simulate user interactions

Capabilities:

• Page navigation
• Form interactions
• Modal and overlay behaviors
• Animations and transitions
• Conditional logic
• User input handling

Fidelity Levels:

• Low-fi interactive: Basic click-through
• Mid-fi interactive: Some conditional flows
• High-fi interactive: Complex behaviors and micro-interactions

Use Cases:

• Usability testing
• Stakeholder demonstrations
• User flow validation
• Interaction pattern testing
• Presentation to executives

Tools:

• Figma prototyping
• Axure RP
• Proto.io
• InVision
• Adobe XD

Information Architecture

Sitemaps

Purpose: Visual representation of website/app structure and hierarchy

Components:

• Pages/screens represented as nodes
• Hierarchical relationships
• Navigation pathways
• Content groupings
• User access levels

Types of Sitemaps:

1. Hierarchical Sitemap:

Home
├── Products
│   ├── Category A
│   │   ├── Product 1
│   │   └── Product 2
│   └── Category B
│       ├── Product 3
│       └── Product 4
├── About
│   ├── Team
│   └── History
└── Contact

1. Sequential Sitemap: Linear flows (e.g., onboarding, checkout)
2. Matrix Sitemap: Multiple paths to the same destination
3. Organic Sitemap: User-generated or dynamic content structures

Best Practices:

• Use consistent notation and symbols
• Indicate page templates vs unique pages
• Show navigation types (global, utility, contextual)
• Document user permissions and access
• Include off-site links and integrations
• Version and date your sitemaps

Content Hierarchy

Definition: Organization of content by importance and relationships

Principles:

1. Visual Hierarchy:

• Size: Larger elements draw more attention
• Weight: Bold text creates emphasis
• Color: Contrast highlights importance
• Position: Top and left get noticed first
• White space: Breathing room adds prominence

1. Information Hierarchy:

• Primary information: Main user goal
• Secondary information: Supporting details
• Tertiary information: Optional or contextual
• Metadata: System-level information

F-Pattern and Z-Pattern:

• F-Pattern: Common reading pattern for text-heavy content
• Users scan horizontally across top
• Second horizontal scan lower down
• Vertical scan down left side

• Z-Pattern: For less text-heavy, more visual content
• Top left to top right
• Diagonal to bottom left
• Bottom left to bottom right

Creating Clear Hierarchy:

• Establish clear content types (H1, H2, H3, body, captions)
• Use consistent spacing scales
• Group related information
• Apply the principle of proximity
• Limit hierarchy levels (typically 3-4 max)
• Test hierarchy by squinting (blur test)

Card Sorting

Purpose: Understand user mental models for content organization

Types:

1. Open Card Sorting:

• Participants create their own categories
• Useful for discovering natural groupings
• Best for new products or redesigns

1. Closed Card Sorting:

• Participants sort into predefined categories
• Validates existing structure
• Tests category labels

1. Hybrid Card Sorting:

• Predefined categories with option to create new ones
• Balances structure with discovery

Process:

1. Identify content items to be sorted
2. Create cards (physical or digital)
3. Recruit representative users
4. Conduct sorting sessions
5. Analyze results for patterns
6. Iterate on information architecture

Tools:

• OptimalSort
• UserZoom
• Miro (virtual card sorting)
• Physical index cards

User Flows

Task Flows

Definition: Step-by-step paths users take to complete specific tasks

Components:

• Entry point
• Decision points
• Actions/steps
• System responses
• Success criteria
• Error states

Flow Diagram Elements:

• Rectangles: Screens or pages
• Diamonds: Decision points
• Ovals: Entry/exit points
• Arrows: Flow direction
• Annotations: Additional context

Example Task Flow Structure:

[Start] → [Login Page] → {Valid Credentials?}
                              ↓ Yes          ↓ No
                         [Dashboard]    [Error Message]
                              ↓               ↓
                         [Success]      [Retry Login]

Creating Effective Task Flows:

1. Define the user goal clearly
2. Map all possible paths (happy path and edge cases)
3. Identify decision points
4. Document system responses
5. Include error handling
6. Note any assumptions
7. Test with actual user scenarios

User Journeys

Definition: Holistic view of user experience across touchpoints over time