How to get started with UX prototyping

They say a single image is worth a thousand words. And if that’s true, there’s a lot more a prototype will cover. Prototypes can help you visualize and test your designs before they reach development, help you understand how users interact with your work and help you spot issues in the flow of your designs.

With that in mind, we’ve put together some advice on how to get started with prototypes, along with some top tips and tricks to help them stand out.

When does prototyping come in handy?

While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:

1. Usability testing. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live.
2. Involving stakeholders. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real.
3. Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience.
4. Communicating your vision. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.

Now that we know how useful prototypes can be, it’s time to learn how to make them work.

Laying the groundwork for successful prototyping

Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.

Not sure how to get started with your prototype blueprint? We’ve got your back:

1. Gather all your notes. It could be notes from clients, collaborators, or even a random sticky note you once taped to your fridge. Gather as much intel as possible on plans and expectations for your prototype before starting.
2. Start sketching out the stages of your prototype. What’s the first thing you want your users to see? Start sketching out ideas as you map out the user journey.
3. Polish your draft. Even if you get it just right on the first try, you’ll still benefit from having a clear blueprint, which will boost both your confidence and your motivation.

Get started with prototyping

It’s time to turn your blueprint into a full-fledged prototype! With your now polished draft, you’ll be ready to get your prototype up and running in no time.

Best practices for setting up your prototype

Before you dive in head-first, there are a few things to consider for your prototype:

Low fidelity or high fidelity? Fidelity refers to how close a prototype will be to the real deal. If you’re simply preparing a quick visual aid for a presentation, a low-fidelity prototype — like a wireframe with placeholder images and some basic text — would be more than enough. But if you’re going for more intricate usability testing, a high-fidelity prototype — with on-brand colors, fonts and imagery — could help get more pointed results.

Consider your user. To create an intuitive user flow, try to think as your user would when interacting with your product. While you can fine-tune this during beta testing, considering your user’s needs and habits early on will save you time by setting you on the right path.

Start from the inside out. A nice way to both organize your tasks and create more user-friendly prototypes is by building your prototypes ‘inside out’. Start by focusing on what will be important to your user, like a Buy now button or an image gallery, and list each element by order of priority. This way, you’ll be able to create a prototype that puts your users’ needs at the heart of your design.

Creating prototypes with Sketch

Start by inserting an Artboard onto your Canvas. You can choose from our range of pre-existing presets, such as iPhone screens, or create your own. This Artboard can serve as your first frame (a login screen, for example). Then, continue to add different Artboards that reflect the different screens in your design flow. Once you’re done, connect them by using Links, which you can add by pressing the W key. Visit our documentation for a more detailed guide on how to create prototypes with Sketch.

Usability testing

Being able to test a design before production is one of the biggest benefits of prototyping. But to truly get the most out of your usability tests, it’s important to be clear on what you want to achieve. Before sharing running tests on your prototype, ask yourself the following questions:

• What is the test’s objective?
• What will the beta tester need to complete this objective?
• How much context should you give the beta tester?

Depending on the scope of your prototype, you might also need to select a specific part of it to test. For example, if you’re working on a shopping site design and want to know if the user experience is clear, ask your beta tester to try buying a jersey.

Last but not least, make sure to pick the right audience for the tests you want to run. Identify who your real customer or user will be, and reach out to a diverse range of potential beta testers within that scope. That way, your results will be more accurate since you’ll be getting feedback from people who would have a genuine interest in your product.

Tips and tricks to make your prototypes pop

In Sketch, a prototype starts out as a simple series of linked Artboards, but there’s a lot more you can do.

Ready to take your prototypes to the next level?

Quickly add Links. You can use the W key to add Links anywhere on your Canvas. Simply select the component or Artboard you want to link from, press W, and then select the destination Artboard.

Show or hide prototyping. To keep your Canvas clean and de-cluttered, you can partially or completely hide the Links to the Artboards you’re not working on by selecting ⌃⌥F.

Animation. You can mimic the behavior of a live product by adding animated transitions. For example, select the option under the “Animation” section in the Inspector to create a swipe up motion.

Hotspots. You can use Hotspots to create bigger contact spaces behind small icons. For example, you have a closing button that’s too small to press, you can create a transparent Hotspot around it, giving testers a larger hit to tap.

Guide your testers. You can help guide your user or audience when interacting with your prototype by enabling Hotspots. To get more accurate results during the usability test, you can also disable the prototype Hotspots to avoid any hinting.

Setting up usability testing. In a similar vein to Hotspots, you can add text boxes to your Canvas with specific instructions to help guide your beta tester.

Starting point. You can define Start Points by selecting Prototype > Use Artboard as Start Point in the menu bar. This way, your user will start their journey exactly where you want them to, regardless of where they’re clicking.

Sharing your prototypes

Okay, so you’ve designed your prototype and it’s ready for user testing. Now it’s time to share them. With Sketch, you can open your prototype in either the Mac app or the web app, and instantly copy the link to share with others. Any Viewers or Editors in your Workspace will also be able to preview your prototypes and leave feedback. You can find more detailed instructions in our documentation.

And there you have it! Everything you need to get started with prototypes — right in Sketch.