Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,808,106 Members 39,832 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
TechMasta
Old
(Last edited by TechMasta; 8th May 2013 at 07:34 PM.)
#1  
TechMasta's Avatar
Senior Member - OP
Thanks Meter 346
Posts: 163
Join Date: Mar 2013
Talking [GUIDE] App/Graphics Design Tips,Tricks & Warnings

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!
Hit the Thanks Button if i helped


The Following 55 Users Say Thank You to TechMasta For This Useful Post: [ Click to Expand ]
 
wad!e
Old
#2  
wad!e's Avatar
Junior Member
Thanks Meter 1
Posts: 15
Join Date: Feb 2013

 
DONATE TO ME
That's really helpful..

Thank you
The Following User Says Thank You to wad!e For This Useful Post: [ Click to Expand ]
 
TechMasta
Old
(Last edited by TechMasta; 12th April 2013 at 01:46 PM.)
#3  
TechMasta's Avatar
Senior Member - OP
Thanks Meter 346
Posts: 163
Join Date: Mar 2013
Quote:
Originally Posted by wad!e View Post
That's really helpful..

Thank you
Glad you liked it
Hit the Thanks Button if i helped


 
SahilC
Old
#4  
SahilC's Avatar
Senior Member
Thanks Meter 879
Posts: 1,998
Join Date: Jun 2012
Location: Mumbai
Amazing guide! Thanks so much! I'm glad more people love great design.

Sent from my Galaxy Nexus using Tapatalk 4 Beta
 
phentex
Old
#5  
phentex's Avatar
Senior Member
Thanks Meter 33
Posts: 241
Join Date: Apr 2010
Location: Paris
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

Device: Samsung/Google Galaxy Nexus GSM (Maguro)
Rom / Kernel / Radio / Bootloader : Omnirom Nightly / Omnirom Nightly / i9250xxlj1 / primemd04
 
nikwen
Old
#6  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1,331
Posts: 2,713
Join Date: Feb 2013
Quote:
Originally Posted by phentex View Post
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
Old
#7  
Recognized Developer
Thanks Meter 16
Posts: 174
Join Date: May 2009
Location: Kanpur

 
DONATE TO ME
Quote:
Originally Posted by TechMasta View Post
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?
Wit beyond measure is man's greatest treasure!
The Following User Says Thank You to akshay2000 For This Useful Post: [ Click to Expand ]
 
nikwen
Old
#8  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1,331
Posts: 2,713
Join Date: Feb 2013
Quote:
Originally Posted by TechMasta View Post
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.
 
TechMasta
Old
#9  
TechMasta's Avatar
Senior Member - OP
Thanks Meter 346
Posts: 163
Join Date: Mar 2013
Quote:
Originally Posted by akshay2000 View Post
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
Hit the Thanks Button if i helped


 
TechMasta
Old
#10  
TechMasta's Avatar
Senior Member - OP
Thanks Meter 346
Posts: 163
Join Date: Mar 2013
Quote:
Originally Posted by phentex View Post
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.
Hit the Thanks Button if i helped



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

Advanced Search
Display Modes