Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

From the point of view of a graphical designer, which are the differences in developing for iPhone, Android and Blackberry. Is it possible to design for one platform and to use that work on the others? What are the constraints when implementing the same graphical interface to all of the above mentioned platforms?

share|improve this question
1  
What are you designing? –  DA01 Feb 13 '12 at 4:14
add comment

2 Answers

up vote 4 down vote accepted

This answer only deals with iOS and Android, Blackberry exceeds my knowledge


Resolution

In iOS you have three screen resolutions to consider

  • 480*320 (iPhone3)
  • 960*640 (iPhone4)
  • 1024*768 (iPad)

In Android there are 4 resolutions, to cover at least:

  • xlarge for screens that are at least 960dp x 720dp
  • large for screens that are at least 640dp x 480dp
  • normal for screens that are at least 470dp x 320dp
  • small for screens that are at least 426dp x 320dp


Guidelines

In iOS there are some standerd UI-elements to work with like the tab bar, pickers, status bar etc. See this psd for more Detail.

And you can find even more detailed information in the iOS human interface guidelines

In Android there are less UI standards but since Android 4 it has some usable design guidelines


Differences

Android has its "hardware buttons". Menus and navigation are often at top of the screen. Buttons orientate on the default android buttons and UI. The bottom is often filled with the actual content and overlaid with the hardware menu.

iOS splits the menus and navigation in two parts. At top is the Navigation like back button, title, ok and cancel. At bottom there is navigation like the tab bar to switch between views.


Some apps simply use the same UI layout for both systems with some minor changes, like the use of the menu button from android. Path is an example for iOS and Android

Blackberry has its own design guidelines but there ends my knowledge. Here is a good collection of UI guidelines for further reading ;)

share|improve this answer
1  
Caveat: There are really only two iOS resolutions in terms of overall UI dimensions. One does have twice the resolution, though. That gives you sharper images, but doesn't change the size of the UI. (And it looks like the iPad3 may do this too). Android also has many more resolutions, given that it's not any sort of standard. –  DA01 Feb 13 '12 at 4:17
add comment

We need more information to fully understand what you are designing, but if I were to assume you are designing web sites, then yes, you can design for any device.

That's pretty much my day job...design and develop a mobile web application that supports iOS, Android, BlackBerry and (groan) Symbian.

In terms of visual design, each OS has it's own native UI, but as a web app, you'd be designing a UI just for the web app. This is the standard approach for a lot of the UI libraries out there such as jQuery UI and Sencha Touch.

In terms of hardware, iOS is touch-only. Android is mostly touch. BlackBerry is mostly keyboard.

In terms of software, iOS, Android, and BlackBerry OS 6+ are all running a Webkit browser. Which is nice. Alas, Android and BlackBerry's browsers have plenty of bugs.

Avoid styling native form elements if you can...each OS likes to do things differently with default sizing of those.

UPDATE:

I should also note that one area where you may NOT want to use a universal UI is the split between keyboard and touch devices. This is tricky, as some operating systems have both devices available (such as blackberry) and even more tricky, some devices are both touch screen AND keyboard enabled.

The problem is that they are really two different ways to interact with a screen. Touch is happy to be scrolling with big icons and swipes. Keyboards need a very compact screen and probably prefers pagination over scrolling.

The challenge is that it's really hard to design for both equally. Right now, we mainly target touch, and one can still use the site with a keyboard, but we're not optimizing for keyboard.

In hindsight, it would have been great for mobile browsers to some how detect when a page is being interacted via touch vs. keyboard.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.