5 tips to get you started in iOS app design

Filip Resse

To say that mobile is hot right now is an understatement. A recent study predicts that users of mobile devices will overtake users of PC’s by 2014. This means that within 2 years, more people will be consuming internet content through their mobile device than through their computer.

As a result, graphic designers that are knowledgeable in mobile app design are becoming more and more in demand. Here are 5 tips to get you started in iOS App Design.

1. Understand the basic resolutions for apple mobile devices

There are basic resolutions that you need to remember for the newest versions of the iPhone and iPad3. You don’t want to be left in the dust with a design that doesn’t look crisp on the new version of the iPad.

Take note that even though the resolution for newer models have increased, files should still be saved at 72 DPI — just like any other web design.

iPhone:

  • App Icon: 114 x 114 pixels
  • App Store Icon: 512 x 512 pixels
  • Screen Size: 640 x 960 pixels

iPad:

  • App Icon 144 x 144 pixels
  • Store Icon 512 x 512 pixels
  • Screen Size 1536 x 2048 pixels

Set up Photoshop like this:

2. Start with a wireframe

Sketch a mock up that shows the basic outlines of your app. The more detailed you get, the better. This part of the process is all about visualizing how the user will interact and experience your app.

wireframe

When you are happy with your sketches, its time to turn them into digital wireframes in Photoshop.

Make sure to get all of your proportions correct. You don’t want a navigation bar that is narrow and appears crowded, but you also don’t want to use up the limited real estate you have available on a mobile device.

Maintaining consistent proportions throughout your interface is key to the app’s aesthetics and user experience. Check out some examples of digital wireframes here.

3. Start small and scale it bigger

size

Photo: Apple Store

Design for the iPhone first. By starting out with a design for iPhone, you will have less difficult decisions to make when you create the iPad version.

It’s easier to add elements, than to cut out elements the app needs. The best mobile designs are fully functional on the iPad and don’t feel like they lack features on the iPhone counterpart.

4. Provide the proper deliverables to your client/developer

phone

Photo: Thom Weerd (via Unsplash)

Like a web page, a layered .PSD file is the standard deliverable, however some developers may want you to slice the app into individual elements. All elements of the design should be saved in .PNG format — the preferred image file for iOS apps.

5. Use and explore the iOS Dev Center

apple

Apple has tons of resources available for app designers and developers in the iOS Dev Center. If you’re ever un-certain of best practices or any specific requirements for an App Design this should be the first place you go. The Human Interface guidelines section is especially useful for designers.

Have any questions or tips of your own? Leave them in the comments.

The author

Filip Resse
Filip Resse

Filip Reese works as a Community Liaison at 99designs in San Francisco. He earned a B.A. in International Relations with a minor in Spanish from the University of California, Davis and has spent time living, traveling, and studying in Europe, Asia, and South America. Filip is an active skateboarder, photographer and outdoorsmen. If hes not writing tweets or handling disputes you can probably find him at Potrero del Sol Skatepark.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

30 beautiful mobile apps for design enthusiasts

30 beautiful mobile apps for design enthusiasts

With an ever-growing supply of mobile apps, it takes a lot to stand out from the crowd—both in functionality and design. With that in mind, we sloshed through app stores to handpick 30 beautiful mobile apps that designers and design enthusiasts will love. We’ve organized this article into seven sections, so you can easily find the mobile app that fits…

The design apps you need to know about

The design apps you need to know about

The number of design apps out there is simply staggering. Think of any handy tool—calendars, sketch programs, color palette generators, font references—and you’ll find a dozen apps for it, each with slightly different functionality. What is more, almost all of them are well designed (they are made for a demanding market, after all). So how do…

Current Design Contests

Designers, check out these contests so you can start building your career.