Advertisement
General

Exclusive Freebie: iOS 7 Omnigraffle and PDF Stencil Kit

by

It's not something you'll see very often on Webdesigntuts+ these days, but occasionally we just need a bit of candy, right? Here's a great freebie file for you; an iOS 7 Omnigraffle and PDF stencil kit, courtesy of Sourcebits, free for personal or commercial use. Go get it!

Apple has finally released the new iPhone, and with it a standardized iOS 7 for all Apple devices. There are plenty of changes to the design, such as thinner icons, solid colors, removal of shadows, reduced gradients, and an overall flat aesthetic. This kit* is comprehensive (including select, negative, press and obviously normal states), with image views, list views, nav bar icons, action sheets and so on. It's all pixel perfect and aligned to the grid.

*made with love by Bhargavi Kamakshivalli and Rick Patrick from premium design and engineering studio Sourcebits.


What's Included?

You'll get an Omnigraffle stencil file, which looks a bit like this:

file

You'll also get a PDF version which you can open in Adobe Illustrator and edit as raw vectors.


What's Omnigraffle?

Omnigraffle is an OSX/iOS application with many purposes, but is chiefly used for creating diagrams, charts and layouts, such as wireframes and user interaction graphics. It's available as a 14 day free trial, and, if you've never used it before, take a look at our Beginner's Guide to Wireframing in Omnigraffle.

Installation

It's hardly worth going over really, but once you've downloaded the freebie file, and assuming you have Omnigraffle on your system, double-click the icon and all will be well. You'll have the following, and more, waiting for you in Omnigraffle's "Stencils" window:

sourcebit-ios7-ui-kit
Related Posts
  • Code
    Mobile Development
    Inspecting iOS Applications with RevealPreview image@2x
    In this article, I'd like to tell you about Reveal, an OS X application created by Itty Bitty Apps that lets you inspect your application's user interface at runtime. Be ready to be amazed.Read More…
  • Web Design
    Community Projects
    Community Project: The Tuts+ Illustrator Wireframe KitWireframe thumb
    Calling all community members! We have a little project for you to take part in! We're compiling a wireframe kit for Adobe Illustrator, built by you, the Tuts+ community. Read on to see how you can take part.Read More…
  • Design & Illustration
    UX
    10 Tips for Building Wireframes With IllustratorPreview wireframe
    Adobe Illustrator is experiencing a come-back in the world of web design. Not only is SVG becoming commonly used online, but more and more designers are using vectors for wireframing. The following tips will help you make the most of Illustrator as a wireframing tool.Read More…
  • Computer Skills
    App Training
    Beyond Highlighting: How to Get the Most From Your AnnotationsAnnotations icon
    It's easy to highlight a passage in an eBook, but there's so much more you can do with digital highlights. Here's everything you need to know to annotate your eBooks and PDFs on your Mac, PC, iPad, and more, and then put your annotations to work for you.Read More…
  • Code
    Interviews
    In the Spotlight: Jeremy OlsonInterview jeremy olson preview image@2x
    Jeremy Olson is the founder of Tapity and the company's lead designer. Tapity focuses on designing, developing, and marketing mobile applications. Jeremy and his team don't create just any mobile application, they craft software that stands out in a crowded App Store and closely follow Apple's philosophy with respect to design and attention to detail.Read More…
  • Web Design
    Design Theory
    Introducing Wireframes to Your Design ProcessDsfd wireframes retina
    After sketching, there is one final thing you should work on before starting to design (although, admittedly, this is all part of designing). Wireframing is essentially a visual guide to a website which helps you to look at layout without thinking about the aesthetics of the project.Read More…