What were the misconceptions that you needed to deal when looking at a Android app design? Probably most of us, have seen those funny “iOS app designer” faces saying, – “Doh, it has hardware back button!” moment.
As we want our apps to look pretty, we came up with an idea to help graphical designers avoid common Android design anti-pattern. Moreover, when doing coding, coders sometimes suffer from improperly handed-off designs, so it would cool to make those nice people RTFM in their visual language. Think of Infographics. And I can’t avoid giving credit to LemonLabs, who has inspired us with Karri for this idea with their “iOS App Designer Guide to Developer Love“.
So, in the next few days we are going to collect ideas for the “The Guide to Android design, the cutting and the app beauty”.
Here are few ideas about what could be there:
1. Avoid fixed length screens or be super smart about it. Android has a great variety of screens that have different aspect ratios. Some phones are long (1:2 on Nexus One) and some are not so long (3:4 on Galaxy Mini, HTC Wildfire).
2. If a screen doesn’t have much content (login screen for instance), consider designing it as a dialog: it will allow reusing same screen on tablet resolution without much effort.
3. Instead of multiple progress dialogs, consider animating action buttons or other interface elements. This is just so much nicer.
4. Also, I will repeat my very old idea that you can test for 92% of Android screens by using just 3 phones.
Updated with Joonas Kukkonen from Elisa input:
One of the useful tactic is to design for post popular pixel density bucket (mdpi for tables, hdpi for phones). However, you must be aware that some devices have more pixel estate than others (even in desity dependent pixels). For instance, Samsung Nexus S and SIII have 360dp compared to 320dp of Galaxy S2 or 400dp of Galaxy Note. Also be careful about notorious Galaxy Tab 7, which uses hdpi despite it has only 171dp pixel density.
If you design pixel perfect layouts and use mdpi resolution as a reference design, sizes and margins have to be dividable by 2, in order to be properly scalable to hdpi and hdpi. The same way if you use hdpi resolution as a base, sizes and margins have to be dividable by 3, if your base is xhdpi – 4 . Keep in mind that Android design guidelines recommend 8dp grid for mdpi base.
P.S. Note that having more pixel real estate, may mean more space for Ad banners! Profit FTW.
Update with Janne Toivola from Futurice recommendations:
- Screen sizes: There are many different-sized Android phones, and you need to make sure the design works in all of them. At minimum, design for one phone and a tablet.
- Hardware back button:
Android phones have physical back buttons (Android 4 changes things a bit: http://developer.android.com/design/patterns/new-4-0.html
). You need to figure out in each screens what that does. Back button should control the navigation levels, not micro content inside a single screen.
- Version numbers:
UI guidelines differ between different versions, so make sure everybody understand which version the development is aiming for. Android 4 brings new stuff that needs to be taken into account.
- Flexibility: Android is super-flexible. You can do nice design with it but also ugly apps with bad usability. Stick to the guidelines as much as possible!
One more tip:
When naming files don’t use dashes or spaces, also don’t start filenames with numbers, Android doesn’t support these in filenames. Check with your coder, whichever he prefers and stick to CamelCaseConvention or separate_with_underscores .