Design · iOS · UX · Tools

Savvy Sketch iOS Wireframe Kit: Touch ID, Apple Pay, and iOS 10 Styling

Megan Balaguer

Last updated Jul 23, 2019

Designing for apps is a fluid process. As time passes, system updates and new design conventions mean we have to master new techniques to ensure our apps remain in the forefront of the industry. As we evolve, so do our resources. Since releasing the Savvy Sketch iOS Wireframe Kit in June 2016, we've noticed a few opportunities to update the kit to meet designer expectations. These changes also come from our experiences using the wireframe kit on new projects.

Want to learn more about the Savvy Sketch iOS Wireframe Kit? Check out our blog post to learn what makes this wireframe kit different from the rest and how to use it. Keep reading for information on the latest changes.

What's New in the Wireframe Kit

These changes add new elements and address system updates.

New Elements

This latest version of the wireframe kit now includes elements for Apple Pay, Touch ID, Smart App Banners, and tab bar variants.

Apple Pay: We added an Apple Pay screen as well as the various buttons associated with Apple Pay. Here they are in all their glory:

Touch ID: Previously overlooked, we found ourselves creating more and more Touch ID alerts. They've proven useful in simplifying the login process for users who have already registered within the app. We've added Touch ID alerts to the kit so now it's as simple as copying and pasting them as needed.

Smart App Banners: These banners are used to promote your iOS app within a mobile Safari view. We added the two states (“View” vs. “Open”) along with options for longer titles.

Tab bar variants: The new tab bar variants will make it easier and quicker to change your tab states as needed. Previously, we only had a 5-tab bar with the first tab active. Now we have each state accounted for in the 5-tab, 4-tab, and 3-tab bars.

Now Optimized for iOS 10 Styling

One of the more notable changes in updating the wireframe kit for iOS 10 is the new bottom card element (seen on the right). Apple introduced the bottom card as a new component within the Apple Maps screens. This bottom card, however, can come in handy on its own. We've found that it's especially useful for communicating to users that a card element can slide up to display additional information.

We also updated the camera, video, text message, and push notification elements within our kit to reflect the new styling for iOS 10.

Get the Wireframe Kit

Head to Dribbble to download our Savvy Sketch iOS Wireframe Kit. (And give it a “like” if you don't mind.)

This is a living, breathing resource. We will continue to update this kit. Want to request an element or provide feedback? Hit us up on Twitter @savvyapps or our contact form.

Written By:

Megan Balaguer

Megan is a tea-loving user experience designer focused on making apps simple and intuitive to use. She has a knack for naming pets and identifying UX patterns.