Wireframing and Prototyping

Wireframing Tools and Techniques

Popular Wireframing Tools

• Figma: Collaborative design tool with wireframing and prototyping
• Sketch: Mac-based design tool with wireframing capabilities
• Adobe XD: Design and prototyping tool from Adobe
• Balsamiq: Low-fidelity wireframing tool with hand-drawn style
• Axure RP: Advanced prototyping tool for complex interactions
• Framer: Design and code tool for high-fidelity prototypes

Wireframing Techniques

• Low-Fidelity: Quick sketches focusing on structure and layout
• Mid-Fidelity: More detailed with basic styling
• High-Fidelity: Near-final designs with full styling
• Grayboxing: Using grayscale to focus on layout
• Paper Prototyping: Hand-drawn sketches for quick ideation
• Digital Wireframes: Created in design tools for precision