[GUIDE] App/Graphics Design Tips,Tricks & Warnings

TechMasta · Apr 8, 2013

Hi Guys

This is a guide on app design guidelines.This can be applied everywhere and not only app design. I have seen many apps that perform awesome but their UI scares people away! This won't be a very detailed guide, only basic pointers on UI Design.

First off i would like to say that User experience and functionality of the app is equally or more important than it's UI. There's no point in a app that has a awesome looking UI but is very laggy or lacks functionality.

Lets begin with a few tips :

Try to make the UI simple and clean with no extra clutter.Hide extra functionality in menus. Keep the main function of the program in the front.
Make the UI flat.Use subtle gradients and shadows. Don't make it too flat like the metro ui,in which you can't distinguish an icon from a button
Use a specific color scheme. Select two to three lead colours. and select 1 or 2 background colours.
Either make it dark themed, or light themed, don't mix the two!
Use transitions. But not too fancy.
Split your app into different parts and provide a easy way to navigate
Fix Whatever you can behind the scenes
Use short Phrases, No one wants to read too much to do a simple task!
Use pastel colours or darker colours. ie. one shade lighter or darker than the original color.
Have contrast between the text color and the background color, making it easier to read.

Tricks :

Don't waste much time making animations. Use LayoutTransitions (android 3.0+)
Test your apps on different screen sizes.
Download the color swatches provided by google -click here
Google is your friend. Go to developer.android.com for more guidelines, application fundamentals etc.
Use good typography. Roboto and helvetica are some of the good fonts. Download roboto - click here
Guide on iconography - click here

Warnings! :

Do not use harsh gradients! for eg.. black to white , It makes the app feel cheap.
Try and stay away from putting ads
Do not let the app make decisions for itself, let it ask the user!
Do not make the app too colourful.
Make sure it runs smooth without jitter.
Don't put too much info. at once!
Don't use too flashy colors that hurt the eye.

Again, this isn't meant to be a very long guide, just a few basic things you should keep in mind while designing. For more detailed guidelines use developer.android.com

If i missed something important let me know! :good:

wad!e · Apr 10, 2013

That's really helpful..

Thank you

TechMasta · Apr 10, 2013

wad!e said:
That's really helpful..

Thank you

Glad you liked it

SahilC · May 13, 2013

Amazing guide! Thanks so much! I'm glad more people love great design.

Sent from my Galaxy Nexus using Tapatalk 4 Beta

MightySashiman · May 13, 2013

Hello there, thanks for this guide.

I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?

thx in advance

nikwen · May 13, 2013

phentex said:
Hello there, thanks for this guide.

I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?

thx in advance

Maybe it would be easier.

However, you would need a proper library to do that. Android does not support adding *.svg vector graphics by default. So all the conversion of the vector graphics need to be done manually. (There are some libs out there, but they do not support all features of *.svg graphics.)
For basic things there is support to do that using the standard Android development APIs provided by Google (declaring drawables in xml files) but it will not be enough for shapes which are more complicated than lines, rectangles or circles or a combination of those.

Addititionally the conversion of vector graphics to bitmaps (graphics consisting of single pixels) would need much processing power and would slow everything down.

Hence *.png and *.9.png files are still the standard way to do that.

@TechMasta: By the way, great guide.

akshay2000 · May 13, 2013

TechMasta said:
Try and stay away from putting ads

No ads? How does one go about monetization then? Don't get me wrong. I'm a Windows and Windows Phone developer. I was thinking of porting my apps to Android. I'm just getting started. But I'm using Windows Azure for which I do have to pay for. How should I go about those expenses?

nikwen · May 13, 2013

TechMasta said:
Do not let the app make decisions for itself, let it ask the user!

Sometimes it should. However, the user should be able to change the default behaviour. Or as the android design guidelines express it:

Decide for me but let me have the final say

Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.

(http://developer.android.com/design/get-started/principles.html)

Great guide, though.

TechMasta · May 13, 2013

akshay2000 said:
No ads? How does one go about monetization then? Don't get me wrong. I'm a Windows and Windows Phone developer. I was thinking of porting my apps to Android. I'm just getting started. But I'm using Windows Azure for which I do have to pay for. How should I go about those expenses?

You can put ads if you want. Just don't bombard the user with them, place them in a way it does not interrupt or come in the way of the user when he is using your app

TechMasta · May 13, 2013

phentex said:
Hello there, thanks for this guide.

I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?

thx in advance

With google's plugin for eclipse you can add your graphics in multiple resolutions by Copying your layout from "layout" folder of resources and paste it in the "layout-land", "layout-xlarge" etc.

TechMasta · May 13, 2013

SahilC said:
Amazing guide! Thanks so much! I'm glad more people love great design.

Sent from my Galaxy Nexus using Tapatalk 4 Beta

Glad you liked it

DesarrolloDroide · May 15, 2013

Thank you very much, very useful information.

eissenvale · May 19, 2013

Thx for it mate I will develop good think

Sent from my GT-I9100 using xda app-developers app

CurlyY · May 28, 2013

Looks good

johnwatson762 · Oct 9, 2013

graphics design

Thank you for this information about web design. Really nice.

prats87 · Oct 25, 2013

Good set of tips for the first version of an app!

The next level of designing should ideally be with testing different design variations via split testing.

Ahamed.M · Oct 31, 2013

Making Decisions

TechMasta said:
Do not let the app make decisions for itself, let it ask the user!

Hai,

Thanks for your guide. But I am having a different opinion from one of your warnings.

Let the app make decisions by itself, for example when user deletes an item DELETE it. But do provide an option to UNDO it. Showing another dialog to confirm it, in your words "ask the user", is redundant.

Because providing too many options makes the user overwhelmed in an unexpected way. Choose the best/defaults for your app and provide some ways to configure them [Ex : Colors, Themes, Font size etc]

nikwen · Nov 1, 2013

Ahamed.M said:
Hai,

Thanks for your guide. But I am having a different opinion from one of your warnings.

Let the app make decisions by itself, for example when user deletes an item DELETE it. But do provide an option to UNDO it. Showing another dialog to confirm it, in your words "ask the user", is redundant.

Because providing too many options makes the user overwhelmed in an unexpected way. Choose the best/defaults for your app and provide some ways to configure them [Ex : Colors, Themes, Font size etc]

True. This can also be found in the Android design guidelines:

Decide for me but let me have the final say

Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.

(Source: http://developer.android.com/design/get-started/principles.html#simplify-my-life)

paul_2033ph · Nov 4, 2013

a

nice

victoriabrinsley · Jan 6, 2015

Nice Tips

These tips are very useful. One should keep in mind while dealing with apps whether in Android or iPhone.

[GUIDE] App/Graphics Design Tips,Tricks & Warnings

Senior Member

Member

Senior Member

Senior Member

Senior Member

Senior Member

Inactive Recognized Developer

Senior Member

Senior Member

Senior Member

Senior Member

Member

Member

Senior Member

New member

Member

Member

Senior Member

Member

New member

Similar threads

Top Liked Posts