Visual Aspects of Mobile UI Design Standards


Published on

The visual aspects of mobile user interface design from an aesthetic and functional perspective -- emphasizing Android icon design

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Visual Aspects of Mobile UI Design Standards

  1. 1. The visual aspects of mobile user interface design standards<br />With emphasis on the Android icons<br />
  2. 2. ICON DESIGN GUIDELINES<br />Launcher Icon<br />Menu Icon<br />Dialogue Icon<br />Tab Icon<br />Status Bar Icon<br />List Icon<br />
  3. 3. Launcher Icon<br />A Launcher icon is a graphic that represents your application on the device's Home screen and in the Launcher window.<br />SIZE: 56-72 sqrd. px (high-density), 38-48 sqrd. px (medium-density), 28-36 sqrd. px (low-density)<br />COLOR: Neutral & primary colors; not over-saturated, limited color palette<br />SHADING: Top-lit<br />OTHER DETAILS: Clean and contemporary, Simple and iconic, Tactile and textured, Forward-facing<br />
  4. 4. Menu Icons<br />Menu icons are graphical elements placed in the options menu shown to users when they press the Menu button.<br />SIZE: 44-72 sqrd. px (high-density), 30-48 sqrd. px (medium-density), 22-36 sqrd. px (low-density)<br />COLOR: Greyscale<br />SHADING: slight deboss used to create depth<br />OTHER DETAILS: flat, pictured face on, <br />2 pxcorner radius, when appropriate<br />
  5. 5. Status Bar Icons<br />Status bar icons are used to represent notifications from your application in the status bar.<br />SIZE: 24w x 38h px/ 24w x 24h px (high-density), 16w x 25 px/ 16w x 16w (medium-density), 12w x 19h px/ 12w x 12h px (low-density)<br />COLOR: #828282 to #919191<br />SHADING: #FFFFFF, 10% opacity, angle 90°, distance 1px<br />OTHER DETAILS: Flat, matte, and pictured face-on<br />
  6. 6. Tab Icons<br />Tab icons are graphical elements used to represent individual tabs in a multi-tab interface.<br />SIZE: 42-48 sqrd. px (high-density), 28-32 sqrd. px (medium-density), 22-24 sqrd. px (low-density)<br />COLOR: #808080 (unselected), #FFFFFF (selected)<br />SHADING: No shadows<br />OTHER DETAILS: Flat, matte, and pictured face-on<br />
  7. 7. Dialog Icons<br />Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction.<br />SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame<br />COLOR/ SHADING: Light gradient and inner shadow in order to stand out against a dark background<br />OTHER DETAILS: Flat and pictured face-on<br />
  8. 8. diALOG ICONS<br />
  9. 9. List View Icons<br />List view icons are used with ListView to graphically represent list items. An example is the Settings application.<br />SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame -- based on a 32x32 pixel artboard size in Photoshop<br />COLOR/ SHADING: Light/ black gradient, 57 % opacity, angle 120°, distance 1px, size 1px<br />OTHER DETAILS: Flat and pictured face-on with an inner shadow<br />
  10. 10. List view icons<br />
  11. 11. Final art must be exported as a <br />transparent PNG file.<br />Link to android icon templates pack<br /><br />
  12. 12. Best practices<br />Fill screens sparingly<br />Be consistent with user interface workflows, menu types & buttons<br />Make Touch Mode “hit areas” large enough<br />Use big readable fonts & large icons<br />Integrate tightly with other applications on the system<br />Keep localization in mind<br />Reduce keys or clicks<br />Don’t assume that specific input mechanisms are available<br />Encourage “thumbing” by default<br />
  13. 13. Thank you<br />