iOS App Design

Open Source Tool For Creating Highly Configurable Grid Overlays On UI For Easier Design

John · Jan 2, 2015 ·

Early last year I mentioned a handy library allowing you to overlay a grid on your user interface to aid in design called Grid-Window.

Here’s an open source tool for creating configurable overlays according to your design specs inspired by the dspec library for android called dspec-iOS that adds more configuration options than the previously mentioned tool.

With dspec-iOS you can overlay a grid over the interface based on your specifications, with configurable keylines, baselines, spacing markers and more so you can quickly see if your user interface is aligned with your design specifications. Specs can be loaded from a JSON file if desired.

Here’s an image showing dspec-iOS in action:

You can find dspec-iOS on Github here.

A nice tool to aid in interface design.

An Apple Watch User Interface Design Sketch Template

John · Dec 3, 2014 ·

Shortly after the Apple Watch announcement I mentioned an early Apple Watch PSD UI template inspired by what was shown in the Apple Watch keynote.

Here’s a Sketch Apple Watch UI template based on the 42mm watch design from Marcel Wichmann with an emphasis on accuracy.

Dozens of elements are included including switches, buttons, status bar elements, status bar, notification elements, text elements, image placeholders and more.

Note that you will need to install the San Francisco font in WatchKit to use the template.

You can download the template file over on the Uarrr blog.

A nice template for those designing for the Apple Watch using Sketch.

Extensive Free iOS Design Kit Featuring Over 250 Components

John · Sep 6, 2014 ·

Earlier this year I mentioned a iOS 8 user interface template kit for Sketch.

Here’s an extensive iOS design Kit called Tethr that contains 8 PSD files featuring 138 templates and over 250 components.

The design matches the flat design of the iOS interface, and can be downloaded for free.

Here’s a snapshot from the homepage that shows off some of the included elements:

You can download Tethr from the homepage E-mail required.

A great iOS user interface design kit.

A User Interface Template Kit For Sketch Updated For iOS 8

John · Jul 1, 2014 ·

I’ve mentioned the fantastic Sketch user interface design app in the past, and pointed out a collection of free iOS design templates for Sketch.

Here’s a UI Kit template updated with new user interface elements from iOS 8 for your prototypes from Rafael Conde.

Here’s an image showing a keyboard and predictive text bar taken from the stencil.

You can download the iOS 8 UIKit here

You can find the repository on Github here.

For those without Sketch it can be downloaded from the home page here.

A nice Sketch template for those trying to make sure that their designs fit within the iOS 8 UI.

iOS Library Allowing You To Automatically Turn iOS Screenshots Into Layered PSD Files

John · May 21, 2014 ·

Just over a year ago I mentioned a nice library for creating PSD formatted files called PSDWriter.

Here’s a handy library that utilizes PSDWriter from Vinh Phuc Dinh called MMLayerShots.

MMLayerShots allows you to take app screenshots and automatically convert them into layered PSD files so you can then load them into an app that supports PSD files (ie. Photoshop, Pixelmator, Gimp).

This allows you to adjust the individual elements without having to cut apart each element individually.

You can find MMLayershots on Github here.

A handy library for experimenting with app designs.