Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP TechMasta

8th April 2013, 04:34 PM   |  #1  
TechMasta's Avatar
OP Senior Member
Thanks Meter: 349
 
163 posts
Join Date:Joined: Mar 2013
More
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!
Last edited by TechMasta; 8th May 2013 at 08:34 PM.
The Following 55 Users Say Thank You to TechMasta For This Useful Post: [ View ]
10th April 2013, 12:50 PM   |  #2  
wad!e's Avatar
Junior Member
Thanks Meter: 1
 
15 posts
Join Date:Joined: Feb 2013
Donate to Me
Thumbs up
That's really helpful..

Thank you
The Following User Says Thank You to wad!e For This Useful Post: [ View ]
10th April 2013, 12:54 PM   |  #3  
TechMasta's Avatar
OP Senior Member
Thanks Meter: 349
 
163 posts
Join Date:Joined: Mar 2013
More
Quote:
Originally Posted by wad!e

That's really helpful..

Thank you

Glad you liked it
Last edited by TechMasta; 12th April 2013 at 02:46 PM.
13th May 2013, 08:59 AM   |  #4  
SahilC's Avatar
Senior Member
Flag Amherst
Thanks Meter: 879
 
2,003 posts
Join Date:Joined: Jun 2012
More
Amazing guide! Thanks so much! I'm glad more people love great design.

Sent from my Galaxy Nexus using Tapatalk 4 Beta
13th May 2013, 04:15 PM   |  #5  
phentex's Avatar
Senior Member
Flag Paris
Thanks Meter: 35
 
253 posts
Join Date:Joined: Apr 2010
More
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
13th May 2013, 04:54 PM   |  #6  
nikwen's Avatar
Recognized Contributor
Thanks Meter: 1,411
 
2,813 posts
Join Date:Joined: Feb 2013
More
Quote:
Originally Posted by phentex

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.
13th May 2013, 06:27 PM   |  #7  
Recognized Developer
Flag Kanpur
Thanks Meter: 17
 
174 posts
Join Date:Joined: May 2009
Donate to Me
More
Quote:
Originally Posted by TechMasta

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?
The Following User Says Thank You to akshay2000 For This Useful Post: [ View ]
13th May 2013, 10:10 PM   |  #8  
nikwen's Avatar
Recognized Contributor
Thanks Meter: 1,411
 
2,813 posts
Join Date:Joined: Feb 2013
More
Quote:
Originally Posted by TechMasta

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:

Quote:

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/...rinciples.html)

Great guide, though.
13th May 2013, 11:30 PM   |  #9  
TechMasta's Avatar
OP Senior Member
Thanks Meter: 349
 
163 posts
Join Date:Joined: Mar 2013
More
Wink
Quote:
Originally Posted by akshay2000

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
13th May 2013, 11:34 PM   |  #10  
TechMasta's Avatar
OP Senior Member
Thanks Meter: 349
 
163 posts
Join Date:Joined: Mar 2013
More
Quote:
Originally Posted by phentex

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.

Post Reply Subscribe to Thread

Tags
app design, clean, flat ui, graphics design, tips and tricks
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes