Prefer to listen to this lesson? Click below.

Workshop Scenario:

Please think of yourself in the following scenario as you complete this workshop:

You are a student who is interested in pursuing a career in technology. You have always been fascinated by the way technology impacts our daily lives and want to learn more about how software and apps are designed to make our interactions with technology more seamless and intuitive.

In the last lesson, you thought about how to create a visually appealing app that keeps things like typography, color palettes, and alignment in mind. Next, you’ll be creating a prototype (rough draft) of your app to make sure all elements of your design are effective.

By the end of this lesson you will understand what prototyping is in UX/UI design, why we use it, and even how to implement it.

As you work your way through this workshop, you’ll be applying the skills you learn to present your ideas for a hypothetical app that incorporates elements of UX/UI design. Please take notes throughout this lesson; you will need to refer to them for your final project.

Lesson Objectives

Your objectives for today are to be able to explain the following:

• The importance of prototyping in the UX/UI design process

• Different types of prototypes and their purposes

• How to create prototypes using appropriate tools and techniques.

As you read, please consider the following questions:

1. What is the purpose of prototyping in UX/UI design

2. How does it benefit the design process?

Lesson 6: Prototyping

Prototyping is an essential part of the design process in UX/UI, as it allows designers to create interactive and functional versions of their designs before they are built. Prototyping involves creating a preliminary model of the final design, allowing designers to test and refine the design to ensure that it meets user needs and expectations.

There are several different types of prototypes, ranging from low-fidelity paper sketches to high-fidelity digital models. Low-fidelity prototypes are often used early in the design process to explore different design ideas quickly and cheaply, while high-fidelity prototypes are used later in the process to test the functionality and usability of the final design.

We will talk more about these types of prototypes in the following section. First, let’s build a stronger understanding of what prototyping is and why it is so vital to the design process.

6.1 Introduction to Prototyping in UX/UI Design

Prototyping is an important step in the design process of any product, especially in UX/UI design. A prototype is a preliminary model of the product that allows designers to test and evaluate ideas, designs, and concepts before they are fully developed.

In UX/UI design, a prototype is typically created to test the functionality, usability, and overall user experience of a product. A prototype can be as simple as a hand-drawn sketch or as complex as a fully functional interactive model.

The purpose of prototyping is to identify design flaws and potential improvements early on in the design process. By testing and refining prototypes, designers can create a product that is both aesthetically pleasing and easy to use for the end user.

Prototyping allows designers to:

1. Visualize and test ideas: Prototyping enables designers to visualize their design concepts and test them in a simulated environment. It helps designers identify flaws and potential areas for improvement early in the design process.

2. Communicate and collaborate: Prototyping helps designers communicate their design concepts to stakeholders, team members, and users. It facilitates collaboration and feedback that can be used to refine the design.

3. Reduce development time and cost: Prototyping can help reduce the time and cost of development by identifying design flaws and issues early in the process, before development begins.

6.2 Types of Prototypes

Low-Fidelity Prototypes

Low-fidelity prototypes are quick and easy to create, and typically involve hand-drawn sketches or basic wireframes. These types of prototypes are useful in the early stages of the design process when designers are exploring different ideas and concepts.

Low-fidelity prototypes are typically used to test the layout and structure of a design, rather than the visual appearance or user interaction. They are useful for getting feedback from users and stakeholders, and for identifying potential design flaws and improvements.

High-Fidelity Prototypes

High-fidelity prototypes are more detailed and polished and typically involve interactive designs created using design software. These types of prototypes are useful in the later stages of the design process when designers are refining the design and preparing for development.

High-fidelity prototypes are typically used to test the visual appearance and user interaction of a design, as well as to get feedback from users and stakeholders. They are useful for identifying potential design flaws and improvements, and for ensuring that the final product meets the needs of the user.

Choosing the Right Prototype for your Design

The type of prototype you choose depends on the stage of the design process and the goals of your design.

When choosing the right prototype for your design, consider the following factors:

• Design Goals: Consider the goals of your design and the stage of the design process. If you are exploring different ideas and concepts, a low-fidelity prototype may be more appropriate. If you are refining the design and preparing for development, a high-fidelity prototype may be more appropriate.

• Audience: Consider the audience for your design and the level of detail required. If you are testing the layout and structure of a design, a low-fidelity prototype may be sufficient. If you are testing the visual appearance and user interaction of a design, a high-fidelity prototype may be necessary.

• Resources: Consider the resources available to create the prototype. Low-fidelity prototypes are quick and easy to create, while high-fidelity prototypes require more time and resources.

Again, low-fidelity prototypes are useful in the early stages of the design process when exploring ideas and concepts, while high-fidelity prototypes are useful in the later stages when refining the design and preparing for development. When choosing the right prototype for your design, consider the design goals, audience, and resources available.

6.3 Creating Low- and High-Fidelity Prototypes

Software and Tools Used for Low-Fidelity Prototypes

• Pen and Paper: Low-fidelity prototypes can be as simple as sketches on paper. Pen and paper are quick and easy to use, allowing designers to explore different ideas and concepts without getting bogged down in details.

• Whiteboard: Whiteboards are another low-tech option for creating low-fidelity prototypes. They allow designers to sketch out ideas and collaborate with others in real-time.

• Online Prototyping Tools: There are several online prototyping tools available for creating low-fidelity prototypes. These tools typically allow designers to create basic wireframes and layouts, and some even allow for collaboration and feedback from others.

• Microsoft PowerPoint: Microsoft PowerPoint can also be used for creating low-fidelity prototypes. Designers can create basic layouts and add simple interactions using hyperlinks and animations.

Software and Tools for High-Fidelity Prototypes

• Adobe XD: Adobe XD is a popular tool for creating high-fidelity prototypes. It allows designers to create interactive designs with advanced features such as animations, transitions, and micro-interactions. Adobe XD also has collaboration features, allowing multiple designers to work on the same project simultaneously.

• Figma: Figma is a web-based design tool that allows designers to create high-fidelity prototypes with collaborative features. It has a user-friendly interface and allows designers to create complex designs with ease. Figma also has advanced features such as design components, which allow designers to reuse elements across multiple designs.

• Sketch: Sketch is a popular design tool for creating high-fidelity prototypes. It has a user-friendly interface and allows designers to create complex designs with ease. Sketch also has advanced features such as symbols and shared styles, which allow designers to reuse elements across multiple designs.

• InVision: InVision is a cloud-based design tool that allows designers to create high-fidelity prototypes with advanced features such as animations, transitions, and micro-interactions. InVision also has collaboration features, allowing multiple designers to work on the same project simultaneously.

• Proto.io: Proto.io is a design tool that allows designers to create high-fidelity prototypes for web and mobile apps. It has advanced features such as animations, transitions, and micro-interactions, as well as collaboration features that allow multiple designers to work on the same project simultaneously.

In Conclusion

There are various software and tools available for creating both low- and high-fidelity prototypes in UX/UI design. Low-fidelity prototypes can be created using simple tools such as pen and paper, whiteboards, online prototyping tools, and even Microsoft PowerPoint. High-fidelity prototypes, on the other hand, require specialized software and tools such as Adobe XD, Figma, Sketch, InVision, and Proto.io. Remember, when choosing the right software and tools, designers should consider their design goals, project requirements, and collaboration needs. With the right tools, designers can create effective prototypes that help them test and refine their design ideas before finalizing the product.

Closing Assessment:

Now that you have reached the end of this lesson, you should be able to answer the following:

1. What is the purpose of prototyping in UX/UI design?

2. How does it benefit the design process?

Participate in the 24/7 Discussion Forum

Please answer the following questions in the comment section below and interact with learners from around the world:

You are thinking of creating a mobile app. You want to ensure that your app is designed with all of the pieces you’ve learned about in this workshop on UX/UI so far.

• Create a low-fidelity prototype for your app and share it below. Provide support for your choices in your comment.

Please read and reply to other learners’ answers in the forum.

Course created by: Sarah Moutaoukil & Samantha Nally