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.
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.
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.
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 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.
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.
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.
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.
by Todor Iliev
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.
