Skylark Blog

Categories

Mobile Apps made easy



Posted on by Jordan

The summer at Skylark has seen us dive head first into the world of mobile apps. The purpose of this blog is to briefly outline the key points across the various platforms we had to research, which will make the whole process a lot easier. This is not a bible of how to do it and we are still very much learning ourselves, but it will definitely be of use when designing your first multi-platform app.

iPhone

When designing for iPhone you need to be aware of the general guidelines that the apps follow. Apple are quite strict with their rules, which is a great benefit to the platform, because users get familiar with the way the apps work very quickly. Download the GUI PSD, which has parts to use within your app, such as the nav bar and buttons. Look around on the app store to see the familiar patterns that run through. We focus on the iPhone app first because they are the most popular and most effective. The design of this then forms the basis for the other platforms.

640 x 960 screen size
326 dpi

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

Human interface guidelines:

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Android

Designing for Android is fairly similar to designing for the iPhone, which means most of the design can just be re-used. We designed for the size below, which has the same proportions as the iPhone. The main things to change within the design are the buttons and the nav bar. Pop-ups in Android are completely customisable. Android has a back key within the phone so the back buttons should be removed from the design. This is also the same for BlackBerry, and Windows.

320 x 480 screen size
181 dpi

The GUI PSD has buttons and parts which you can use within UR app as well as the default Android font.
GUI PSD including ‘droid’ font family:

http://vgrishin.me/android_gui.html

There are many screen sizes and resolutions for Android, but we designed for one size as it’s the most popular. It is then down to the dev team to scale for different sizes. Here is a link which goes into detail about multiple android screens:

http://anidea.com/technology/designer’s-guide-to-supporting-multiple-android-device-screens/

Windows

The Windows app is very similar to the Android. There are not strict rules as with the iPhone, so there is more flexibility within the app. The main nav often appears at the top but can appear at the bottom as well. It has a back button and a menu bar. Like the Android and Blackberry, there are many sizes and screen resolutions. We designed for a larger size, which can then be scaled down easily for other sizes.

480×800 screen size
252 dpi

BlackBerry

BlackBerry is a platform that requires more thought because, in general, the screen sizes are smaller than that of the iPhone or Android. Also, most of the BlackBerrys don’t use a touch screen, they use a trackball instead. Again, we designed for the most popular size, the BlackBerry Bold, and then left it to our dev guys to scale for the various sizes.
The BlackBerry has menus built in as well as a back button. As the screen size is smaller, you will probably need to simplify the design, so scrolling it’s put to a minimum. Browse the BlackBerry appworld to get a real feel for BlackBerry apps and give you ideas of how best to approach the design.

480×360 screen size
240 dpi

BlackBerry Bold:

http://psdlist.com/mobile-phone/12/rim-blackberry-bold-9700-psd.html

BlackBerry apps:

http://us.blackberry.com/apps-software/appworld/

Other relevant links:

Android & iPhone App Design: Is it twice the work?

 http://johnnyholland.org/2010/09/06/android-iphone-app-design-is-it-twice-the-work/

iPad:

http://www.informationarchitects.jp/en/designing-for-ipad-reality-check/