UX/UI Bootcamp
  • COURSE INFORMATION
    • UXUI Bootcamp
  • Self-Onboarding
    • Welcome
    • Your Bootcamp
    • Participation & Conduct Protocols
    • Tools
      • Google Classroom
      • Slack
      • Google Calendar
      • Zoom
      • Figma
      • Github
    • Learning Strategies
    • Complete your Self-Onboarding
  • Prepare for the Course
  • Foundations
    • What is the Foundations section?
    • Introduction to UX Design
    • User-Centered Design
    • Human-Centered Design
    • Design Thinking
      • Example of Design Thinking in a UX Project
    • Introduction to Project Management Methodologies
    • Figma
    • How to use AI
  • 1. Project
    • Milestone 1 - Research Planning
      • Introduction to User Research
      • Research Methods
        • Behavioral Research Methods
        • Attitudinal Research
        • Exploratory, Confirmatory, Evaluative Research
      • Research Planning
    • Milestone 2 - User Research
      • User Interviews
      • Qualitative Data Analysis
      • Practical Application of User Interviews
    • Milestone 3 - User Personas, User Journey Map
      • 👥User Personas
      • 🛤️User Journey Map
    • Recap
  • 2. Project - Mobile Application
    • Milestone 1 - UX Mapping, Empathy Map, Task Analysis, User flows
      • 🗺️UX Mapping Methods
      • 🐾Empathy Map
      • 🔰Task Analysis and User Flows
    • Milestone 2 - Information Architecture and Mid-Wireframes
      • 🏢Information Architecture
      • 💻Sitemap
      • 🏞️Mobile Navigation Patterns
      • 🌠Mobile Design Patterns
      • ✏️Wireframes
    • Milestone 3 - Prototyping, Testing and Refining
      • 🏗️Prototyping
        • Type of Prototypes
        • Prototyping with Figma
      • 🧪Usability Testing
    • Recap
  • 3. Project - Dashboard
    • Milestone 1 - Planning, Competitor Analysis, Design Proposal
      • Project Planning
      • Competitor Analysis
      • Desk Research
      • Design Proposal
    • Milestone 2 - Design & Prototyping
      • Mood Board
      • Style Guide
      • Component Library & UI Kits
      • Prototyping with Figma
    • Milestone 3 - Usability Test & Documentation
      • 🧪Usability Testing
      • Design documentation and Case Study
    • Recap
  • 👏Credits
Powered by GitBook
On this page
  • Wireframes and Prototypes
  • Wireframes
  • Types of Wireframes
  • More Resources

Was this helpful?

  1. 2. Project - Mobile Application
  2. Milestone 2 - Information Architecture and Mid-Wireframes

Wireframes

PreviousMobile Design PatternsNextMilestone 3 - Prototyping, Testing and Refining

Last updated 6 months ago

Was this helpful?

Wireframes and Prototypes

Wireframes are prototypes. However, not all prototypes are wireframes. Let's have a look at this YouTube video to understand the difference:

Wireframes

Wireframes are skeletal blueprints that outline the structure and layout of a user interface without focusing on visual design elements such as colors, images, or typography. They are like the blueprint designed by an architect for a construction project, like the one below:

Three reasons why they are important:

  • Clarity and communication - Wireframes provide a clear visualisation of the interface layout, allowing designers to communicate design concepts and ideas effectively to team members and stakeholders. They serve as a common reference point for discussing and refining design decisions.

  • User focus - By stripping away visual distractions, wireframes shift the focus to the core elements of the user experience, such as navigation, content organisation, and interaction flow. This helps ensure that the final design meets the needs and expectations of the target audience.

  • Iteration and flexibility - Wireframes are inherently flexible and easy to iterate upon, enabling designers to explore multiple design variations and refine the interface iteratively. Rapid prototyping with wireframes allows for quick experimentation and validation of design hypotheses before investing time and resources into detailed mockups.

Before seeing some example, let’s see some best practices:

  • Collaboration - Encourage collaboration among team members by sharing wireframes early and often. Solicit feedback from designers, developers, and stakeholders to ensure alignment with project goals and requirements.

  • Use annotations - Supplement wireframes with annotations or notes to provide context and clarify design decisions. Annotations can explain functionality, indicate user interactions, or highlight areas for further discussion. You can do this using arrows pointing to your notes or numbering the different areas of the wireframe and creating a legend that explains each number.

  • Test early and often - In a working setting, wireframes are not created by guesswork but through the research results and are changed according to users' feedback during the usability tests.

Types of Wireframes

There are generally three types of wireframes: low-fidelity, mid-fidelity, and high-fidelity. Each type serves a different purpose and has distinct characteristics:

Low-Fidelity Wireframes

  • Low-fidelity wireframes are rough sketches or basic representations of the user interface. They can be on paper or in digital format.

  • They focus on layout, content organization, and functionality without detailing visual design elements.

  • Typically created quickly using pen and paper or digital tools like wireframing software.

  • Used primarily for ideation, brainstorming, and concept validation in the early stages of the design process.

  • Low-fidelity wireframes are simple and easy to iterate upon, allowing for rapid exploration of design ideas.

  • You have here a sketch example (credit Winnie Nguyen)

Mid-Fidelity Wireframes

  • Mid-fidelity wireframes are more detailed than low-fidelity wireframes but still lack the visual polish of high-fidelity wireframes.

  • They include additional elements such as placeholder text, icons, and basic styling to provide a clearer representation of the final design.

  • Used for refining the layout, interaction flow, and content hierarchy of the user interface.

  • Mid-fidelity wireframes strike a balance between speed and detail, making them suitable for collaborative design reviews and usability testing.

  • You have here a mid-fidelity example (credit Ismael Lima)

High-Fidelity Wireframes

  • High-fidelity wireframes closely resemble the final design regarding visual appearance and functionality.

  • They include detailed visual elements such as colors, typography, images, and interactive components.

  • Used for presenting the final design concept to stakeholders, developers, and clients for approval.

  • High-fidelity wireframes are also used for user testing to gather feedback on specific design details and interactions.

  • Here below, you can see the different passages from low to high fidelity:

More Resources


Created using wireframing software allowing for greater precision and customization. You will use Figma as it’s free, but you can create them with Sketch, Adobe xD or like once upon a time with graphic softwares as CorelDraw and Photoshop. You can create them out of the blue, or you can download some template like this one on Figma:

Low to High Fidelity

(Youtube Video, 3 Minutes)

(Youtube, 5 Minutes)

(Article)

(Article) and

Help us to further improve the content

You can leave comments .

✏️
https://www.figma.com/community/file/968075681196720832/mid-fidelity-wireframe
Low Fidelity vs. High Fidelity
How I create Wireframes in Figma
Low Fidelity, High Fidelity Prototypes
Web Content Accessibility Guidelines
Typography Guidelines
Type Scale
🤩
here