Connect with us

Culture

Getting Started with iOS 7 Mobile App Design

The path to designing your own mobile application is long and often tedious. It requires a lot of time studying current trends and what other designers have been doing. But the level of accomplishment is very rewarding once you know how to create beautiful interfaces for almost any mobile device.

featured image white iphone ios7 homescreen

This post will look at some of the basic iOS guidelines related to app design. Many interface standards have changed with iOS7 moving towards a more flat design. There are some applications which still utilize detailed gradients and textures, but this seems to be falling by the wayside in lieu of cleaner and simpler UI elements.

Introduction to iOS7

If you wish to design apps for older versions of iOS check out some other articles in Google. Many users still prefer the iOS6-style of design and there is a market for designers in that field. But with Apple only signing iOS7 it's almost impossible to downgrade any device at this point.

Most of the primary interface guidelines for iOS7 relate to clean, readable designs. Apple suggests allowing content to fill the screen and use as much space as the content requires. The goal here is to design for content, keeping the UI of secondary importance to readability and simple interactions.

When you have time read through the iOS Human Interface Guidelines especially for app anatomy which covers each important aspect of the screen. You can find more details about individual UI elements such as title bars, navbars, and tab bars. Ultimately there's only a handful of default items which appear in almost every application.

This structure usually breaks down to include standard bars at the top and bottom of the application screen. The content view is front-and-center to include anything you wish. And keep in mind that even these guidelines can be rearranged if necessary. But when getting started really look at how other designers create interfaces and try to follow their lead.

Building from a Template

If you want to get started quickly the best way is to design from existing templates. When creating an iOS app interface there are many elements which get reused multiple times. I'd recommend downloading a copy of the Teehan+Lax iPhone GUI or iPad GUI centered around iOS7 elements.

ios7 teehan lax freebie psd download template

You get pixel-perfect elements which can also be scaled as vectors to match larger interfaces. Building with templates can save you hours of time reconstructing these design items from scratch.

Another important resource is the application icon. You may not find this process as interesting, but each iOS app requires some type of icon to display on the home screen. Thankfully you can download a free iOS7 app icon template in PSD format. This includes all the common sizes and typical gradient effects you might utilize in an app icon.

Wireframing & Sketch Concepts

If you get started and feel stuck in a rut try following a simple wireframing process. You could use Photoshop or try sketching interfaces with a pencil and some paper. The goal is to quickly map out interface elements to see how they might be placed in relation to each other.

Try wireframing 3 or 4 different versions of your application to see what works best. This is more of a brainstorming phase where you can go nuts and try out all sorts of new ideas. Of course it does help if you have some fundamental understanding of the most important pieces to a typical iOS interface.

This is also a good time for testing how the interface will work in both portrait & landscape formats. The iPhone and iPad can be rotated either way to fit the application design. This means any detail-centric developer will want to implement views for both portrait and landscape styles. If you can plan both interface orientations then you'll have an easier time designing once you jump into Photoshop.

Handling Retina Screens

Another important topic is the advancing prominence of retina(or high-density) screens on Apple devices. These screens use a higher pixel density to display interfaces in the same physical screen size.

iphone retina display sharp home screen icons

The question comes down to actually designing an interface which supports retina displays. Should you create the regular 1x version and scale up, or design for retina then scale down for 1x devices? It seems to be a case of personal opinion and whatever works best for your workflow.

Marc Edwards wrote an excellent article detailing his app design workflow. He suggests building at 1x and refitting each element for a separate retina UI. His post includes plenty of useful tidbits of information for anyone just learning this process. One point he repeats is to automate the scaling process as much as possible.

But overall it comes down to learning the basics and going from there. Once you've designed 4 or 5 decent-quality applications it will become easier to create detailed interface techniques and apply them quicker in Photoshop.

Interface Design Resources

Aside from the free template PSDs it helps to work with some additional resources. This small collection includes free resources, tutorials, and downloadable graphics for iOS app designers.

iOS 7 Design Cheatsheet

ios7 app design cheat sheet website

Free Home Screen PSD

ios7 flat home screen icons psd freebie

iOS7 Tab Bar Icons Vol1

set #1 ios7 tabbar ui icons freebie

iOS7 Tab Bar Icons Vol2

ios7 set #2 tabbar ui icons

iOS7 Tab Bar Icons Vol3

ios tabbar ui icons freebie set #3

iOS7 Tab Bar Icons Vol4

ios7 tabbar ui icons freebie set #4

Streamline Icons

streamline freebie icon set download

iOS7 App Screen in Photoshop

how to design ios7 inspired application tutorial

iPhone App Listing in Photoshop

design photoshop tutorial howto iphone app ui list

iOS 7 Email App in Photoshop

ios7 email iphone app ui design tutorial

I'm the editor-in-chief of Bittbox.com. I'm a designer and developer by day, and a writer and musician when the feeling strikes. I enjoy vintage advertisements and puzzles with an absurd amount of pieces. Follow me on Twitter.

Click to comment

More in Culture

To Top