Design Resources

10 tips on prototyping UIs with Sketch

View all posts

Since it was purpose-built for web and mobile design, it’s no surprise that Sketch is one of the fastest and most versatile tools for designing prototypes. And these 10 tips make it even more powerful.

1. Know your prototype’s audience and goals

Okay, so this has nothing to do with Sketch. But it’s such an incredibly important part of all prototyping processes, that we just have to include it.

Prototyping constitutes the heart of the iterative design process. It reduces risk and uncertainty—and saves time and money that would otherwise be wasted coding untested concepts. A good prototype lets you test assumptions, identify and address usability issues, communicate interactions, and much more.

But what makes a good prototype? That depends on your goals and audience. A prototype designed to test product-market fit will need different elements than one designed to communicate animations to developers. Your goals and audience define the type of prototype as well as its level of fidelity, design, and functionality.

2. Sketch before you Sketch

Sketch is an amazing tool. But sketching on paper can help you quickly identify requirements and stages of your proposed flow. Just like a storyboard, a quick scribble of boxes, circles, and arrows can help you see the bigger picture and organize all your Sketch artboards. Just don’t expect it to communicate much to anyone but you.

sketching before sketch app

Preparing to design a mobile prototype by sketching before opening Sketch App.

3. Use Symbols for all common elements

Your prototype might contain multiple artboards with a bunch of repeating elements: the same header, footer, buttons, list views, etc. Layout and stylistic changes are practically inevitable in the early stages of prototyping, which could mean a ton of mind-numbingly boring work—unless you used Symbols.

Let’s say you want to change your header’s background color and the size of a button. If you created them as Symbols, you’ll only have to make those changes once—all other instances of the symbol will update automatically. Even cooler—you can exclude the text in elements, so updating your “Get started” button to blue will turn your “Log in” buttons blue too, without altering the copy.

To create a symbol, just select a layer or group of layers, then go to Layer > Create Symbol. Once you’ve created a symbol, you can quickly add it to your design with the Insert button.

organizing symbols in sketch

Updating and using elements across pages and artboards: Using Symbols in Sketch

4. Quickly create artboards and UI elements

The Make Grid feature lets you quickly create and distribute elements and artboards. This feature is especially powerful when combined with Symbols. You can create one view with common symbols (background, header, footer, buttons, etc.) and replicate it as many times as you need.

using make grid in sketch app

Creating elements and artboards with Make Grid

5. Generate sample content with a click

Timur Carpeev’s Content Generator Sketch plugin lets you fill out designs with dummy data such as avatars, backgrounds, names, geolocation data, and filler text—all with a click. Timur’s plugin sources graphics and data from the popular Unsplash, uiFaces, uinames, and Mockaroo. Need dummy financial data? Then grab Tyler Wolf’s sketchFinDataGen plugin.

generating sample data

Generating data on the fly with Content Generator plugin

6. Use overlay masks to simulate realistic interactions

One way of boosting your prototype’s fidelity is adding overlays. Alerts, dialog prompts, and image previews often trigger overlay masks to focus attention. You can do this by exporting the PNG output of one artboard directly into an empty artboard via drag-and-drop. Then, apply background fill, multiply blending, and/or opacity to get the right look and feel.

creating overlay masks

Creating overlay masks for more detailed and realistic prototypes.

7. Add the keyboard to all views that ask for text input

User-centered design drives successful products. And cutting unnecessary steps from your flows makes for happier users. Too many mobile user experiences require a tap on an input field (such as the email address field on a login form) to pull up the keyboard. Instead, make sure the keyboard is open and ready to go as soon as the screen loads.

eliminating the unnecessary

It’s the little things: cutting unnecessary steps like tapping on an input field to sign in really helps the user experience.

Note: this can cause accessibility problems, so be sure to check with your accessibility team about this interaction.

8. Organize UI flows with Sketch Pages

It’s easy to create chaos with all your artboards and layers. Luckily, Sketch supports multiple Pages and allows for quick organization while keeping all assets in one .sketch file. We routinely use Pages to separate different prototypes, flows, concepts, wireframes, and App Store assets.

using pages in sketch app

Using pages to organize prototypes and UI flows

9. Prototype straight from your source files

In case you haven’t heard yet—InVision supports and syncs Sketch files like a dream. Just upload your source files straight to the site, or make life even easier with InVision Sync or Dropbox syncing. With the last 2 options set up, updating your prototype’s as easy as hitting Save.

10. Adapt UI kits and resources by fellow designers

You can grab dozens of free and premium UI kits like TETHR and TERACY at Sketch App Sources. Following and using your fellow designers’ hard work can be a great way to improve your workflow and learn new prototyping techniques.

CTA for those not in hs to DO UI kit

Todor Iliev, UX Designer at Sketch App Sources
Todor is a User Experience designer and entrepreneur in Washington, D.C. He leads Sketch App Sources, the largest curated collection of top-quality Sketch resources.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.