Designer Blog

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

Set up Photoshop like this:

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.

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

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.

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 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. 

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.

Filip Reese

View all posts by Filip Reese
Filip's website