Activity: Creating a Mid-Fidelity Prototype of Your Personal Portfolio

Objective: You will research and create content about mid-fidelity prototypes in Figma and publish it on Medium.com. This task will help you understand the concept of mid-fidelity design in Figma and its significance in the design process.


Summary:

What is Mid-Fidelity Design?

Explain what mid-fidelity design is and why it is important for designers and teams.

Mid-fidelity design is a step between low-fidelity wireframes and high-fidelity prototypes. It represents a more detailed design than low-fidelity, showing layout, hierarchy, and some functionality, but without the final look or visual polish.

Highlight its role in the design process, helping teams refine design concepts and start working on structure and interaction without getting bogged down in final visuals.


Purpose of Mid-Fidelity Prototypes

Discuss the main purposes of using mid-fidelity prototypes, such as:

  • Clearer design communication: Mid-fidelity prototypes offer more detail than low-fidelity, making it easier for teams and stakeholders to understand how the product will function.

  • Testing usability: While still simpler than a high-fidelity design, mid-fidelity prototypes allow for basic usability testing, ensuring that navigation and interactions make sense.

  • Refining user flow: With more detail than low-fidelity, mid-fidelity designs allow designers to improve user experience without focusing on visual design yet.


Features of Mid-Fidelity Prototypes in Figma

Describe how Figma supports mid-fidelity prototyping. Some key features include:

  • Frames and grids: Use Figma's frames and grid systems to structure layouts, ensuring consistent spacing and alignment.

  • Text and basic typography: Use simple fonts and text styles to define content hierarchy without worrying about final font choices.

  • Component-based design: Create reusable components for navigation bars, buttons, and input fields to make your prototype scalable and maintainable.

  • Basic interaction features: Figma supports adding basic interactions like click-throughs between screens or hover states, which can be useful at the mid-fidelity stage.

  • Wireframe kits and UI elements: Figma offers various mid-fidelity wireframe kits and UI components that can speed up the prototyping process.


Do Your Research:

Use reliable sources such as:

  • Figma’s official documentation or blog: This will help you understand how Figma's tools are specifically designed for mid-fidelity prototyping.

  • Figma tutorials on YouTube or popular design platforms: Look for courses or tutorials that focus on mid-fidelity design, such as DesignLab, Udemy, or Coursera.

  • Books on user experience (UX) and user interface (UI) design: Find resources that discuss the transition from low to mid-fidelity prototypes and their role in user testing and iteration.

Take detailed notes on important points, examples, and best practices for mid-fidelity design.

Keep a list of references for where you found the information (including documentation, blogs, videos, and articles).