Prototyping is a crucial step in the design process, as it allows you to preview your design before the final edits are made and the product is handed off for distribution. Prototypes can help you identify key strengths and weaknesses in a design, gather feedback from your clients, and give the team an idea of what their efforts have been towards for the past few weeks or months. Here’s everything you need to know on how to get started with prototyping.
Table of Contents
Choose the Right Tool(s)
Good prototypes are dependent on many factors, not the least of which is what tools you use to create them. There are good and bad prototyping tools available out there; each with their own features that can either help you create a stunning, effective prototype, or leave you dead in the water.
When you look for a prototyping tool, you’ll want to ensure you’re getting the most features for the price you’re paying. There are tools available that contain both wireframing and prototyping tools, so most of the design process can actually be completed within the same software. This streamlines the process and makes the hand-off from design to development that much simpler.
Prototype software doesn’t have to be feature-rich in order to be effective. You simply want a program that can effectively create a working prototype that you can use to pitch to clients or help the team identify problem areas. Just because a software boasts that it has x features, doesn’t necessarily mean it’s a good program to use. Consider carefully those features you need in your software, and those that are simply extras.
Create a Sketch
Prototyping simply isn’t possible without a design to go off of, and designs usually start with an idea. Sketching out this design on a website like Canva or even on a piece of paper can be a great starting point.
Your sketch will immediately provide you with a visual of what’s in your head, and make it easier for your team to determine what ideas you’re working with. It can be incredibly difficult to explain visual concepts via words, so utilizing a sketch beforehand will ensure you’re effectively communicating your ideas in a way that everyone can understand.
Your sketch doesn’t have to be perfect or even look good for that matter. It’s simply a reference point for the next step; creating a wireframe.
Create a Wireframe
Once you’ve created your sketch and brainstormed your idea, you’ll want to create a wireframe. Wireframes help you iron out important details in your design, such as architecture, navigation, and image, graphics, and text placement.
Wireframes should be grayscale; containing no color or images. Think of wireframes as placeholders for finished aspects of the design. You create a wireframe so that your team knows where everything should fit in the software, website, or mobile app. Use simple fonts and keep the overall design simplistic to maximize the effectiveness of your wireframes.
Wireframes help improve the architecture and navigation of your designs and are absolutely essential for UX and UI design. How your users interact with your design is arguably more important than how it looks. A good-looking design that doesn’t function well is more likely to be avoided than one that is less aesthetically pleasing, but functions perfectly.
Get Feedback Along the Way
An often overlooked, but crucial part to the design and prototyping process is gathering feedback. This doesn’t just apply to the team, either. You’ll want to gather feedback from both your colleagues and the clients you’re designing for, especially during the wireframe process.
Good feedback can be absolutely priceless. It can help you identify issues you may have missed, reinforce your confidence, and give you a better overall idea of what your clients and your team expect from you and the designs themselves.
Keep your clients involved throughout the design process, so they don’t throw you a curveball at the end. We’ve all experienced this; you design something you thought was exactly what your client wanted, only for them to decide on a revision at the very end of the project. These edits can be time-consuming and costly, so be sure to keep clients updated through every step of your process.
A Prototype is not a Mockup
A mockup is usually a simple visual representation of what your product will look like once it’s complete, whereas a prototype actually works. Prototypes test the functionality of your designs, granting you access to precious insight that can help you redesign or refine the entire project if necessary. They’re also a great way to let your stakeholders know what exactly they’re holding stock in and how it will function once it’s completed.
It’s easy to mistake prototypes for mockups and vice versa, so be sure you know which one you’re presenting to the client or team. If you promised a prototype and deliver a mockup, you might find some frustration on the other end of the presentation.
Make it Count
When you present your prototype, you’ll want to absolutely blow everyone away. Make sure the prototype works well, functions as promised, and isn’t overly expensive to produce. Be confident in your designs and how you present them; trust that you and your team designed the best possible product they could. A company that stands behind its work will have a much better reputation among its customers and competitors.
