The Savvy Sketch iOS Wireframe Kit

Late last year, we decided to standardize on Sketch as our tool of choice for creating low-fidelity wireframes. Previously we were fans of Balsamiq, mostly because it had a number of pre-built app elements that could be dragged and dropped into a mockup. While we enjoyed the polish and precision of Sketch, not having a similar feature required us to spend valuable time on creating and recreating the same elements in our wireframes.

Update April 11, 2017 — We updated the Savvy Sketch iOS Wireframe Kit to support iOS 10 styling and included Touch ID alerts, Smart App Banners, Apple Pay components, tab bar variants, and bottom cards. See the changelog in the instructions file for details on each item.

At the start of 2016, we started working on an internal solution to to this problem. We decided to make a kit for Sketch that would already contain the main elements we usually require starting with iOS. Since then, we've tried out and modified the kit based on our own experience using it in customer projects. Believing it would be useful to others, we provided it to colleagues and other industry designers who provided ample, valuable feedback.

Today, we're releasing the Savvy Sketch iOS Wireframe Kit into the wild. We're confident that it's an extensively vetted, solid resource for doing UX work on iOS. We hope the community finds it has a similar impact to what it's done for us at Savvy Apps.

A glimpse of all of the elements included in the wireframe kit.

Download the wireframe kit at the bottom of this article.

What Makes This Kit Different

Our kit is all about speed and flexibility. We've organized our file so you won't have to click into multiple levels of groups to get to the component you need. All components are grouped as symbols, ensuring you won't have to select all elements and can simply quickly insert them. Also, instead of focusing on entire screens our emphasis is always on individual components. This approach makes it easy to grab elements as needed and quickly copy, paste, or edit them.

The kit takes advantage of Sketch Symbols because they’re a powerful, easy way to reuse and apply changes to the same components. You can quickly insert them from the Insert > Symbol menu, and easily update all of the instances of a particular symbol at once. Instead of having a long list of Symbols we’ve broken them into categories within the Symbols menu. Now it’s not nearly as overwhelming to find the particular Symbol you’re looking for.

Wireframe elements are also organized within Sketch's Symbols menu.

We also utilized Sketch Artboards because it keeps us organized, maintaining fixed frame sizes for all of our iPhone 6 screens. With Artboards, it’s really simple to export individual screens and to send individual Artboards to our prototyping tool of choice, Marvel.

How the Kit is Organized

A closer look at how the kit organizes elements by category.

This kit is organized into three pages. The first page, “iOS - iPhone 6,” contains blank iPhone 6 Artboards at a 2x scale. Each Artboard has a default status bar (as we tend to start with that in our internal wireframes) and is numbered to help us stay organized throughout the entire app creation process. The second page, “iPhone 6 Wireframe Elements,” provides all of the wireframe elements organized by type, allowing you to easily select and copy components as needed. You don't need to touch the third page, entitled “Symbols,” unless you wish to make edits to the master Symbols.

Remember, this kit makes heavy use of Sketch Symbols, including Sketch's more newly released nested symbols, so keep that in mind when editing components. We suggest using Sketch's new overrides feature to edit the content so that the master symbols are not affected. Also note that all elements were designed for use in screens at a 2x scale (750x1334), as that is typically the size we design in. If you design at 1x, you may need to scale elements down by 50 percent. This kit works with Sketch 3.7 and above and requires Apple's San Francisco font.

How to Use the Kit

We generally start using the wireframe kit once we've worked out some general user flows and sketched some high level ideas. In our wireframing workflow, we begin by duplicating the wireframe kit and renaming the file something relevant to the project (for example, AppName_Platform_Wireframes). We like to tackle the first step of the user flow for our first wireframe. These first few wireframes include the splash, onboarding, and authentication screens. We try to keep those all within the first row of Artboards, titled accordingly (e.g., 0.0_Splash, 0.1_Onboarding_Feature-1, 0.2_Onboarding_Feature-2, 0.3_Login).

You can simply use Insert > Symbol to select the element you need.

As we create each screen, we access the iPhone 6 UI Elements page and quickly copy and paste the element we need into the corresponding Artboard. You can also use Insert > Symbol and select the element you need while on page iOS - iPhone 6. If we need to update the content of a Symbol, we’ll use Sketch’s override feature instead of editing the master Symbol itself. We prefer this “do no harm” approach, rather than worrying about adjusting a Symbol that may be used in other instances.

Once our wireframes are in a good place and we're ready to create a prototype, we’ll export all of our Artboards. The great thing about having your Artboards numbered in the manner described above is that upon export, they’re still organized sequentially rather than by random titles in alphabetical order. This helps carry the organization through the visual design phase as well as the development phase.

Want to work with us?

Savvy Apps is a Washington, D.C. mobile design and mobile development company serving global brands and cutting-edge startups. We're a product team for hire that's driven by making life better, one app at a time.