logo.svg

iPhone Mocks for Sketch

Over the past couple years we have been working on our own version of iPhone views that are commonly used. These may look a lot like teehan+lax iPhone GUI elements, that's because they were a huge inspiration along the way. Every time they created a new resource we always downloaded it and checked it out. They were beautiful and you could tell a lot of hard work went into every detail. Like everyone else, we have used it in the past for some projects. But, we wanted something more. Their screens lack common naming conventions, the elements were sometimes strangely grouped, it wasn't @1x, and they were missing some commonly used native items.

posts/iphone-sketch/birdeyeview.jpg
iOS 8 iPhone 6 @1x - Version 001

Our version has been tried and tested on many of our personal and client projects. We have noticed that it makes us more productive and our workflow is a lot smoother. Plus, at the end of the day our presentations all look consistent as if they are coming from one source.

We are sharing this now because we think it's ready for a beta release. Also, with the founders of teehan+lax getting acquhired by Facebook we figured we would help fill in that gap.

All screens are designed for iPhone 6 at @1x. If you haven't already done so, you should read about our design setup for iOS apps. This will help you understand the importances of why we should design this way. It's also Apple Marketing ready. For those that have had the pleasure of working with Apple you are familiar with the Apple Marketing Guidelines. For example, to keep things consistent they like 9:41am as the time and the battery indicator to show full. Everything is a vector, well mostly everything. The exception is the keyboards and pickers. We really don't have control over that design. We did build one picker that is vector based but it doesn't look native, but it will work for your mocks. And much more.

Hopefully you get as much out of it as we have. We are releasing this under Creative Commons Attribution-NoDerivatives 4.0 International. If you find any mistakes or want to contribute, please reach out to us via email or Twitter. Feel free to sign up for our newsletter to receive updates about this and other relevant news.

Download Now

We want to make a quick note about where the pieces came from. For the most part, they were hand built by us. Along the way, we have included items but forgot their source, such as the Touch ID icon. We are not trying to hide anything and we will gladly give credit where credit is due.


Release Notes

  • 03/14/2015 - V001
    • iOS 8 iPhone 6 @1x. We are excited to release this into the wild. We are proud of where it has been and can't wait to see where it goes.