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.
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.
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.
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 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.
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 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?
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?
You must install Adobe XD on your computer to use it.
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?
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 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:
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.
Jess is the Content Manager for Course Report as well as a writer and poet. As a lifelong learner, Jess is passionate about education, and loves learning and sharing content about tech bootcamps. Jess received a M.F.A. in Writing from the University of New Hampshire, and now lives in Brooklyn, NY.
Plus, our tips on how to launch your tech career in game development & design!
Learn the differences between Career Services at College vs Coding Bootcamp!
Tips for neurodiverse folks on choosing & preparing for a coding bootcamp!
Here's what employers are looking for in tech hires in 2023...
Flatiron School expert Beanie answers a reader question about data jobs in today's job market!
Flatiron School expert Khester breaks down what to expect from this career path!
CEO Ramona Ortega shares why she hires Sabio grads for her tech team!
How Lighthouse Labs ensures all students get the support they need...
How Codesmith helps students find the best Software Engineer roles for them!
BrainStation breaks down what you need to know!
Just tell us who you are and what you’re searching for, we’ll handle the rest.