A Beginner’s Guide to Prototyping

Table of Contents

• Meet Our Expert: Jon Haines
• What is Prototyping?
• The 3-Step Prototyping Process
• What do prototypes help designers and developers understand?
• Low-Fidelity vs. High-Fidelity Prototypes
• 3 Prototyping Tools Used By Today’s UX Designers
• Figma
• Adobe XD
• Webflow
• How To Learn Prototyping
• Prototyping Tools in 2021

In design, a prototype acts as a blueprint, helping transform ideas into a complete product. Jon Haines, a UX Designer and a UX/UI Webinar Instructor at Thinkful gives us a full rundown on prototyping: the two types of prototypes, how they fit into the design process, and the three most popular UX design tools used by designers in the field today. Learn about the pros and cons of three prototyping tools: Figma, Adobe XD, and Webflow. Plus, Jon shares his insights on how Thinkful’s webinars are supporting new UX designers, and what may be on the horizon for the UX field in 2021. 

Meet Our Expert: Jon Haines

• Jon originally attended Thinkful’s Software Engineering Immersion course, but as an extrovert, he quickly realized UX Design was the right career fit for him. As a UX Designer, Jon works with designers and developers to turn prototypes into actual products! 
• Jon joined the Thinkful team to share his industry knowledge and build community for career-changers through free UX/UI webinars.

What is Prototyping?

A prototype is a visual representation of how a completed product is going to look. Prototyping can be thought of as a house: you need architects to create a blueprint so the construction team (or developers) can build it. That blueprint is the prototype!

When in the design process should you start prototyping?

There are many interpretations of how design thinking works, but they all tend to follow a similar path. It begins with research. During the research process, the design team figures out what problem needs solving. Once they discover the problem, the prototyping starts. Designers take out their notebooks and begin drawing simple sketches. Eventually, they turn to tools like Figma, Sketch, or Adobe XD to transform the idea into something that makes sense to a potential customer. 

The 3-Step Prototyping Process

• Designers find the objective of the prototype. From the design thinking process, designers know there is a problem to be solved. The prototype must solve this objective.

• Designers define the scope that the prototype will cover. The prototype shouldn’t be too simple or too complex. It needs to fit into a proposed scope.

• Designers decide on the functionality of the prototype. Once the design team decides on these factors, they can create the prototype, test it for errors, and improve upon it. 

What do prototypes help designers and developers understand?

A prototype gets all stakeholders on the same page. A prototype helps the product owner, development team, sales team, or any other team involved understand what to expect and gives the opportunity to hash out details. Prototyping tools like Figma, Sketch, and Adobe XD, make it easy for a team to get questions answered and to revise the design on the spot. Research has shown that the ROIs exponentially increases with companies who invest in UX early in their project!

Low-Fidelity vs. High-Fidelity Prototypes

• Low-fidelity prototypes are ideas captured quickly on paper. Low-fidelity prototypes will often be a rough, ugly sketch, likely in pen or pencil because this is the fastest way to produce an idea into a visual form. The low-fidelity prototype happens in the early stages of the product, when everyone is trying to gain a firm understanding of the problem that needs a solution. No one is concerned over its appearance yet. Designers may also use them during a Crazy 8 design sprint or an ideation stage project. 

• High-fidelity prototypes look similar to the expected end product. High-fidelity prototypes may resemble what the development team will make but without the extensive level of functionality. Designers turn to high-fidelity prototypes when a project requires a conceptual visual representation, such as what a product may look like on a site or in the app store. 

Should today’s designers have a good understanding of both low- and high-fidelity prototypes?

It depends on what type of designer you want to be! There are some designers who stick with research while others create complicated visual designs. No matter what direction in design you choose, it still makes sense for all designers to understand the difference between the two types of prototypes and the value of each. 

3 Prototyping Tools Used By Today’s UX Designers

History of Prototyping Tools

Designers were once making prototypes through Adobe Photoshop, but using that software for a prototype is like cutting a piece of bread with a chainsaw. It can be done, but it’s more complicated than it should be. Sketch was then introduced as the tool for UX design even though the term “UX design” was still very new in the tech world. Since Sketch was created, many other prototyping tools like it have followed, including Figma, Adobe XD, and Webflow.

Do designers use prototyping tools interchangeably?

A design team will choose either Figma or Adobe XD, but not use both. Keep in mind that if you know how to use one prototyping tool, it’s easy to adjust to another one. 

Figma

Figma is the most popular prototyping tool on the market right now. Many companies are adapting to Figma because Figma allows you to easily work and collaborate in a browser, much like a Google Doc. Figma is exceptionally intuitive. It only has seven buttons, but with this small selection of actions, designers can do amazing things. One of its most popular features is Auto Layout which allows you to inspect code. When developers go into the Figma document, they can quickly grasp the CSS and know how to build out the design.

What are the pros and cons of using Figma for prototyping?

Pros:

• Designers do not need an understanding of HTML or CSS to use Figma. 
• Designers don’t have to work from a program installed on your computer (although there is an option to download a desktop tool). 
• Figma can be accessed from a browser and uses cloud storage, which means more space saved on my computer. 
• Figma allows users to inspect code.

Cons:

• There is no true version control within Figma. If there are multiple people working on the project simultaneously, if someone makes undesired changes, there isn’t a way to view the history of changes and load a previous version. 
• ​​​​​​​Since Figma operates within the browser, you need access to the internet to use it. If you have downloaded the desktop tool and have the file saved to your computer, you can continue working on the project.

Adobe XD

Adobe products have existed for decades, and designers rely on Adobe products because they are high-quality with many great features. Adobe XD is similar to Figma with a left-sidebar containing layers (frames) and the right-sidebar displaying the menu of different actions for building and changing a prototype. The repeat grid is one of the best features of Adobe XD because it works by taking one functionality and allowing the user to extend it as many times as needed. 

What are the pros and cons of using Adobe XD for prototyping?

Pros:

• Designers do not need an understanding of HTML or CSS to use Adobe XD. 
• Adobe XD is lightweight software that can be installed quickly and used on computers with less storage in comparison with Photoshop or Illustrator, whose file size is hefty.  
• There are many UI kits that you can install to help you to design and view your prototype from many device interfaces. 
• The repeat grid feature saves on time when creating a prototype. 
• Adobe added a 3D Transforms feature, which allows designers to layer in depth, rotate across planes, and present prototypes in perspective. 

Cons:

• You must install Adobe XD on your computer to use it.  

Webflow

Webflow is used to create a website that lives on a tablet or mobile device. It’s a great way for a designer to work for themselves, so if you are a freelance designer, you can use Webflow to create prototypes and full websites for your clients. 

Like Figma, Webflow can be used within your browser. Designers can choose a blank canvas in Webflow, but the program also offers an assortment of templates to choose from. Webflow allows users to utilize drag-and-drop functionality, and also permits them to create prototypes through CSS and HTML.

What are the pros and cons of using Webflow for prototyping?

Pros:

• Webflow is a powerful, full-featured tool that allows designers to create a prototype and website all in one place. Webflow transforms the user into a one-man website design team!
• ​​​​​​​You can make real-time visual changes in Webflow.
• Webflow is a great tool for people who are learning CSS and HTML. 

Cons:

• Webflow only builds websites, not applications. 
• You should have a basic knowledge of CSS and HTML to make the most of this tool. You don’t need to know code to use Webflow effectively, only to use it to its maximum potential.
• Webflow’s performance response can be slower compared to other UX tools. 
• If you are only looking to build prototypes, Webflow might be too complex.

What can designers learn from failed prototypes?

You learn more from your failures than your successes. Failures cause you to contemplate what you did wrong and what you can do better next time to make improvements. A failed prototype is a chance to strengthen your skills. If it happens early enough in the design process, changes can be made before production even happens. The point of a prototype is to work through potential issues before considerate progress is made in the project. Finding faults or mistakes in the prototype reinforces the reason we create prototypes in the first place.

How To Learn Prototyping

How many tools does a designer need to know? Become familiar with one tool first – it isn’t much of a learning curve from one to another!

Is there a Thinkful webinar meant to help people who are getting started in the design field? 

Thinkful’s webinars are intended as a stepping stone for individuals who think UX is too difficult. I have 90 minutes to convince people it’s not as hard as they believe. I find that people need that confidence boost in order to get motivated and begin learning, whether that means they sign up for a Thinkful course or try to teach themselves. Technically, all the information you need is online or in a book, but the amount of information out there can be overwhelming. People have difficulty finding their footing and figuring out what they need to know, and the Thinkful webinars offer a chance for them to talk with someone who is involved in the UX design community. In my UX/UI webinars, I’m happy to answer any UX questions whether they are from a beginner in the field or an expert.

What can Thinkful’s webinars offer experienced designers? 

I believe you can learn something from everyone because everyone has their own unique perspective. An expert can even learn from a beginner because a beginner looks at UX with fresh eyes! The Thinkful webinars are also a great place to network. I share my LinkedIn information in every webinar so I can continue collaborating and creating an inclusive community with a wide range of experience.

Jon’s recommendations for UX designer newbies:

• Thinkful’s UX/UI webinars (they’re free!)
• New Layer podcast with Tanner Christensen and Jasmine Friedl
• Wireframe podcast with Khoi Vinh of Adobe
• Chris Do’s YouTube channel
• ​​​​​​​Design Life podcast with Charli Marie

Prototyping Tools in 2021

Jon’s predictions for design trends in 2021

Voice UI, rotating animations, and dark mode will take off in 2021. When new technology comes out, the people who do it first will have a lot of success. It’s good to try out new tech and decide for yourself or with your team if it's going to stick.

With a background in web development and journalism, you’ve taken a nontraditional path to UX design. What qualities does someone need to have to get into the UX/UI field? 

UX is a great field to be a part of because it accepts people from many backgrounds. My journalism background gives me experience when I interview stakeholders. My coding background makes it easier for me to speak with developers. One of the major reasons I have my current job is that I had coding experience. I spend my mornings talking to the development team, even though I don’t touch code. Between UX design and development, I see a lot of repeat disciplines. 

For those wondering if the UX/UI field is for them, I say be open-minded. Know that you will not be good at first, it takes practice. People who study psychology or hospitality often find their way into UX design because people who work in those career fields are compassionate towards people and work to solve problems. If you can leverage your past skills to solve problems, you will be great at UX.

Find out more and read Thinkful reviews on Course Report. This article was produced by the Course Report team in partnership with Thinkful.