Skip to main content

Getting Started in iOS User Interface Design

iOS devices are becoming mainstream as avid technology buffs are playing with Apple’s latest technology. The release of the iPad tablet computer along with the HD iPhone 4 retina display has shown an impressive year for company branding.
We’ll be going over a few tips for designing a simple iOS interface in Adobe Photoshop. Out of the graphics software available Photoshop or a similar platform is the easiest option for UI design. With easy access to layers and project icons things become much simpler.
This process is similar to the artist or graphic web designer in that application prototyping requires strong creative energies. To put together an entire storyboard of app screens takes time and patience. With the tools we use today the process is much quicker and simpler than ever before.

Starting Off Generic

Designing for iOS isn’t much different than designing for the web. In fact it’s a bit easier since you’ll be working on a smaller screen with specific access points. Practicing with the native iPhone graphics is the easiest path for newbie designers.
Included is a small list of bells and whistles native to the iOS interface. These are the buttons and toolbars you see most commonly around the App Store.
These elements are commonly found inside Apple’s Interface Builder, which is software used to design resources for iPhone and Mac OS X apps. This is the software application developers can use to connect iOS graphics to backend Objective-C code.
Below is a small list of interface elements. This is not an exhaustive collection but should give you an idea of the basic starting points.
  • status bar
  • navigation bar
  • tabs/tab bar
  • sliders and switches
  • input fields
  • table lists
Many of these are available for free as iPhone and iPad UI kits. They will include layered documents for Photoshop and Fireworks containing all icons and page elements possible. Most developed UI templates will also include a graphic relating to an actual iPhone, screen sized to 480 x 320.

App Prototyping

Before opening Photoshop it can be handy to spend some time sketching out your idea first. This could be on a simple piece of paper or laid over an entire spread. This step all depends on your hand-drawn artistic abilities and how comfortable you feel.
Illustrators will generally sketch out frames for each piece to an iOS application. These are also known as views and can immensely help the app developers down the line by having a contained set of templates. If you are less artistically gifted and wish to jump right into the technology then check out a sample iPhone UI kit. Working from the newest releases Teehan+lax has a fantastic iPhone 4 GUI PSD release for free.
The file includes everything you would expect to find inside a standard application. Once downloaded I’d recommend saving the initial template in a new directory where it can be used as a reference point.
Prototyping is much simpler when you can work through a diagram similar to the iPhone design, included in portrait and landscape. The same goes for iPad kits which include the same framing style.

Best Practices

The suggested practices towards creating individual app prototypes is to save separate view states into a new directory. As an example you could create a new directory labeled myApp and inside create a folder named views.
Within here you can save individual .psd files labeled after which content they contain. This could range to include home.psd or settings.psd. After a bit of work you’ll notice creating complementary views becomes easier once the initial design is set.
Also it’s important to save copies of each file as a .jpg or .png. This alternate is beneficial to those who do not use Photoshop or would be too confused to mess around with layered files. When working on a project with many developers and closing deadlines this can become especially time efficient.

Example iOS UI Sets

Below are just a few examples of some great starter kits. These will include all of the core functionality which lives naively in Interface Builder. Note iOS3 and iOS4 do contain differing graphics as the screen resolution has been updated.

iPhone GUI PSD Version 4

iPhone WireFrames & Stencils

Fireworks toolkit for iPhone UI

iPad GUI Kit(PSD)

iPhone PSD Vector Kit by Smashing Magazine

iPad vector GUI Elements

These are just some of the best tips towards getting into iPhone app design. There’s a large world of mobile graphics out there and iOS is a hugely popular operating system. As the mobile app market advances there will be a huge spike in demand for mobile app UI and icon designers.
Getting started is always the hardest step but returns the greatest rewards. Pick up a few of these PSD kits and mess around for an hour or two to see what you can create. Often times practice does make perfect and designing for the iOS platform can be not only fun but a truly fulfilling learning experience.


  1. Hi,

    Thank you four your nice writing on Getting Started in iOS User Interface Design


  2. I almost never leave a response, but i did a few searching and wound up
    here "Getting Started in iOS User Interface Design". And I actually do have a couple of questions for
    you if it's allright. Could it be just me or does it look like some of the remarks come across like they are coming from brain dead folks? :-P And, if you are posting at other sites, I would like to keep up with anything new you have to post. Would you list of all of all your shared pages like your twitter feed, Facebook page or linkedin profile?
    My homepage ; mcallen web design

  3. It's awesome to pay a visit this site and reading the views of all mates on the topic of this paragraph, while I am also keen of getting experience.

    Also visit my web-site ... mike chang monster mass download

  4. when doing Hiit cardio and lifting, whens the
    very best time do to each, and a single appropriate right after another or aside, too as what time of
    working day. Say carrying out both home and gym workouts, and hiit. talking about receiving all of it in...

    Look at my blog post six pack shortcuts training program download

  5. I'm getting herbalife from last one thirty day period in 1st week i unfastened one kg. but in 2nd week i couldn't consider it for 5
    days. i had been having my typical lunch & evening meal. & my
    bodyweight increased by 0.5kg once more. I want to request when i
    will stop taking herbalife, will my weight increase again?
    Remember to advise.

    Review my webpage ... precision nutrition certification pdf

  6. The best solution for the is a enamel whitening product

    Also visit my site - teeth whitening reviews consumer reports 2013

  7. I do not understand how you think about diet plan pills but
    last 12 months my friend's mum bought diet plan tea with the hope to lose some pounds. This kind of tea was marketed in well-liked journals and Tv channels. She ended up having diarrhea. So I am frightened of one thing referred to as "diet" tablets, "diet tea", and so on.
    Phyllis J. McNeal from physical fitness certification.

    my blog - weight loss journal ideas

  8. I say "damage" because it truly is always been my understanding that one
    builds fitness by NOT overdoing anything. Do what it is possible to to your limits,
    then let your body renew itself, then rinse and repeat.

    Here is my web page :: adonis golden ratio fitness program

  9. I attempted 800 mg a day for four months and i have really acquired bodyweight.
    I'm not obese but needed to determine if it performs. Now I'm over fat in my abdomen which I've by no means been. It did something to my intestines I believe. They did give me power for confident but i used to be exhausted each evening so I'm
    not positive relating to this from individual experience I do not trust it.
    I've a brand new bottle that's inside the trash!

    Review my web site - Hormone weight Loss drops

  10. I can begin to see the challenge - many thanks for posting.
    This is one thing good to think about for us but experienced you continued this education I am positive things
    would have been a lot better for you personally. I can
    only guess however.

    Also visit my webpage - Women attracting pheromones India

  11. write-up: lean gains: the dietary strategy

    my web-site; eat healthy food song

  12. Thank you for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your further write ups
    thanks once again.

    my blog post ... map of attractions in washington dc


Post a Comment

Popular posts from this blog

Top 5 Women Who Impacted Technology in 2010

Katie Stanton, International Strategist for Twitter Katie Stanton has impressively long names of companies in her resume. They include the White House, Google Inc, and her latest addition is Twitter. Her remit is working on Twitter’s international strategy and her experience in social media will be a key asset to the company. Katie has a history of working in technology, and her knowledge of departmental laws will help Twitter work alongside government agencies, as she’ll be spearheading the free information approach, especially after the Wikileaks incident. Stanton has been a key player in the techsphere for some time, and this extends to her private life. Following the Haiti disaster she worked with a group of engineers to create a free texting service to help those in need and she is constantly in demand as an expert in both social media and government policy.
Caterina Fake, Co-Founder of Flickr and Hunch Despite having a surname which sounds like a pseudonym for a spy (it’…

AT&T MiFi 2372 review

In the week or so that I have been testing the AT&T MiFi 2372 by Novatel Wireless, it has already saved no less than three lives. First, it saved my cable guy’s life. You see, Time Warner Cable provides the worst home Internet service I have ever experienced. I can’t even think of a close second. If providing terrible home Internet service was a sport, Time Warner Cable would be on its tenth consecutive undefeated season. Forget the fact that my upload speed is capped at 60Kbps and I’m lucky if I can get half that — it has been months since I’ve gone through a full day without at least one service interruption. Months. Unfortunately, Time Warner Cable has an exclusive contract with my building so I have no choice but to endure its abysmal service. Last week, as a Time Warner Cable technician entered my home for the sixth time in two months, I realized that this certainly would have spelled serious trouble had it not been for my trusty new back up device. Before the Mi…

Evolution Of Computer Virus [infographic]