How to get started with UX prototyping

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. Here are some advice on how to get started with prototypes, along with some top tips to help them stand out.

When does prototyping come in handy?

Usability testing: Allows designers and developers to understand each other better

Involving stakeholders: Can test if GDPR consent boxes are displaying properly
Impressing clients: Provides client with a hands-on experience
Communicating your vision: Communicating the vision through a prototype

Laying the groundwork for successful prototyping

Grab all your notes

Gather as much intel as possible on plans and expectations for your prototype before starting
Start sketching out the stages of your prototype
Polish your draft
Even if you get it just right on the first try, you’ll still benefit from having a clear blueprint

Tips and tricks to make your prototypes pop

Quickly add Links

Hotspots
Set up usability testing
Starting point
Animation
Show or hide prototyping
Guide your testers
Maintain the Canvas cleanly
Create bigger contact spaces behind small icons

Best practices for setting up your prototype

Low fidelity or high fidelity

Consider your user
Build your prototype from the inside out
Think as your user would when interacting with the product
List the elements that are most important to your user by order of priority

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

Creating prototypes with Sketch

Insert an Artboard onto your Canvas.

This Artboard can serve as your first frame (a login screen, for example).
Continue to add different Artboards that reflect the different screens in your design flow. Once you’re done, connect them by using Links.