Wireflows
Wireflows are visual representations that combine wireframes and user flows to showcase the interaction and navigation patterns of a digital product or website. They provide a detailed and step-by-step view of how users move through different screens or pages, illustrating the sequence of interactions and the connections between various elements.
Recommended resources
Courses
Wireframing
UX Design Foundations
Design Terminology
Common Design Patterns
Accessibility Foundations
UI Components II
Design Composition
Mobile Design
UX Design Patterns with Checklist Design
Introduction to Figma
User Psychology
3D Design Foundations
Psychology Behind Gamified Experiences
Product Discovery
Reducing User Churn
Apple Human Interface Guidelines
Introduction to Product Management
Introduction to Design Audits
Building Agile Teams
Government Design Foundations
Introduction to Customer Journey Mapping
Human-Centered AI
Lessons
UX Design Deliverables
Intro to Wireframing
Design Processes
Wireframe Fidelity
What are Wireflows?
Exercises
Projects
Couchbuddy: Conceptual Streaming App
Wireframing for Video Streaming Service
Wireframing for Video Streaming Service
Wireframing for Video Streaming TV mobile app
Unichef: Wireframing for Better Recipe Learning
FAQs
A wireflow is a design document that combines wireframing and flowcharting methods to provide a clear visual representation of the user journey through a product. Wireflows are typically used for designing complex interactions rather than individual screens.
Wireflows illustrate both the layout of individual screens (like wireframes) and the path users might take through a website or application (like flowcharts). They show not just how a product looks but also how users will interact with it. Wireflows help designers and stakeholders understand and agree upon the product's functionality and user experience.
Practice your skills in balancing the business goals, brand voice, and user interests, and design a wireflow requesting notification permissions in the Permission Request Wireflow challenge.
A wireframe is a visual guide representing the structure of a website or app, focusing on the arrangement of elements on individual pages. A flowchart is a diagram that represents a process, showing the steps as boxes of various kinds, and their order by connecting lines. A wireflow combines both methods. It provides a view of the interface layout like a wireframe, but it also includes user interactions and the navigation flow like a flowchart.
Wireflows are particularly useful when designing products with complex or multiple interaction flows. They can be used early in the design process to map out the user journey, identify potential issues, and explore solutions. Wireflows can also be used to communicate design decisions to stakeholders or team members, providing a clear visualization of the user experience.
A wireflow includes representations of user interfaces (similar to wireframes), arrows to represent the flow of interaction, and often annotations or descriptions to explain the process. Each screen is typically simplified to focus on the key elements involved in the interaction. The arrows indicate how users move between screens based on their actions, and the annotations provide additional context or explanation about what is happening at each step.