How to get started with UX prototyping · Sketch Blog

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.
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
Now that we know how useful prototypes can be, it’s time to learn how to make them work.
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.
If you’re just getting started with prototyping, sketching out your ideas will keep you organized and on-task.
Not sure how to get started with your prototype blueprint? We’ve got your back:
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.
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.
A high-fidelity prototype will include Links and Hotspots.
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.
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.
The W shortcut adds a Link to the element you’re currently on.
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:
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.
Viewers and Guests can preview and test your prototypes free of charge.
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.
Once you select an animation, open the prototype Preview window to see how it’ll look.
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.
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 feedbac