Design process of Mobile App for iPhone and iPad

Design process of Mobile App for iPhone and iPad

Overview

Nowadays, the Growth of Mobile users is very high compared to desktop users. Mobile applications can be one of the best ways to keep your consumers engaged with your brand as they are on the move. In five years, the mobile generation could have more buying power than all other demographics


Steps for Mobile designing

 

Wireframing

So, this is the first step for design, it’s better to start with a rough sketch of what we are going to do.

Designing in Photoshop

Dimensions and Resolutions

Dimension for iphone 3.0

Screen size: 320 x 480 px

Resolution: 163ppi (pixel per inch)

Dimension for iphone 4.0

Screen size: 640 x 960 px

Resolution: 326ppi (pixel per inch)

 

Retina Display

Retina Display is a brand name used by Apple for liquid crystal displays which they claim have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.

normal-retina

So, it’s better to designing for the 320 x 480px screen size and then sizing up to 640 x 960px is the better option. Designing for the smallest screen size eliminates the disappointment of losing details when a design must be sized down later.

 

Saving for Retina

Normal: Icon.png

Retina: [email protected]

 

Mobile GUI   – UI Elements

There are plenty of resources available to help you get acquainted with the various iPhone and iPad interface elements. Even if we are going to create customized interfaces, these templates are helpful in getting a baseline grid or dimensions of on-screen elements properly proportioned

 

iPhone GUI
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

 

iPhone GUI retina
http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

 

IPhone Stencil
http://graffletopia.com/stencils/413

 

iPhone UI Vector
http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

 

Standard UI Format of Apple

iphone

Apple Suggest the above format for applications, they are also providing the UI’s in XCode (Mac editor for creating Mobile apps). One of the reasons is Apple wants the developers to develop an App without the support of a Designer.

 

Use Vector

Use Shape layers because they have vector capability. So that the image will not blurry in larger Screens

 

Link/Buttons

In Mobile, we are not using a Mouse. We are using our hand as mouse. So design a link or button should be accessible with finger. So the minimum dimensions for a link is 44 x 44 px as calculated with our exact finger tip size. If we design multiple buttons as we do in Web, it will be very difficult for users to touch the exact point.

 

Screen Size and Landscape Modes

You should also keep in mind that there is lots of mobiles are in the market and all of them have different screen size, also there is a landscape option for every screen. As we know that we cannot design for all screens, so our design should be compatible on familiar Screens and Landscape modes.

 

File Format

All graphical assets that will be used to build an app are exported in Portable Network Graphics (.png) format. Technically, the iPhone can display other file formats as well, but PNG files are automatically optimized by the iOS SDK, and consequently should be the preferred format.

 

Slicing

Slice up all of the files to ensure all images are sliced out properly to save huge time later. We should give proper naming for all images like prefixing “btn” for all buttons. Also there will be an affix @2x for retina images.

 

Creating Icons

For iTunes: 512 * 512 px

For iPhone 3: 57 * 57 px

For iPhone 4: 114 * 114 px

 

Conclusion

The mobile Web is different, and may be daunting, but the design process is similar enough for Web designers to ease into mobile design. Designing the perfect mobile website is an impossible task even for experts, but using an iterative user-centered design process can help create the best experience for our users with their help.

Featured Image Credit : Flickr by Ricky Romero 

Web3Canvas provides Freebies & Resources for Designers.