How to end vocal scratch?

Front-end designing doubt on creating a mobile app from scratch?

• Hi All, here is another question reg mobile app front end development, I design User interface in Photoshop and Illustrator, to start with, which screensize should i design first? for eg; i'm designing an app for iPhone, iPad, Android and Windows, though the backend differs the front end is same. Should i start designing for iPhone 5 and resize it to iPhone 4 or 3, then Android? which is the best method? or i design all these UI in a standard size and some tool will adopt it to different sizes?  Thanks

• Answer:

  I'd just like to say that if you're designing an app that is not a full screen game and want to have it look the same across platforms, you might want to reconsider because different platforms have different UI guidelines for good reasons: the platforms are inherently different. Look at how Instagram does it: the basic theme (look and feel) of the app remains the same across Android and iOS but stick to the platform specific conventions so that their users feel at home. Now with that warning in place, I'd urge you to think about your app in terms of what Android calls fragments: http://developer.android.com/guide/components/fragments.html. Think about the basic components that make up the screen and how they would look on various screen sizes and resolutions. This will also help you decide how landscape and portrait versions of the same app will differ, and how tablet and phone UIs would look. When you have a good idea of these components, you should start mocking the interface for the iPhone 5 resolution. If you have a clear component separation in mind, scaling it down for iPhone 4S and earlier should be a cakewalk. For example, in the example of Instagram, the top and bottom bars remain fixed, while the content shown is more or less based on if its an iPhone 5 or iPhone 4S (or earlier), respectively. To take this to Android, make sure nothing is too tightly bound to resolution, and scale relatively. Continuing with the Instagram example, since the bottom bar has 5 buttons, think of each button as taking up 20% of the width of the screen. Relative definitions allow you to adjust the padding/margins as well. There will however be a trade-off here: if you want to support really low end devices as well (called LDPI devices on Android) you might have to introduce scrolling nav bars and content areas. Crunching everything into the screen at once might make your interface cluttered. If having a consistent experience is more important to you than supporting low-end devices, you might consider leaving them out completely. Tablets tend to have a lot more screen estate than phones (usually, though the line is disappearing fast with some of the newer 'phablets'). It might be beneficial to think about these interfaces differently, as tablet versions of apps are expected to do more than their phone counterparts. If your tablet app is just a stretched/scaled version of your app, you're inviting negative feedback for your app. Think persistent navigation and think landscape. Tablets are used in landscape far more than portrait.