Android Icon Guidelines Draft0309

DRAFT-UPDATED 03/09 icon guidelines version 1.0, cupcake release 1 / 17

contents & introduction introduction 1 icon types 1.1 launcher Creating a unified look and feel throughout a user interface adds value to the product. 1.2 menu Streamlining the graphic style will also make the UI seem more professional to the user. 1.3 status bar 1.4 tab With these icon guidelines, we show you how to create icons for various parts of your 1.5 dialog application’s user interface that fit the style that has been set. Following the guidelines will help you to create a polished and unified experience for the user. 1.6 list view 2 tips 2.1 do’s and dont’s 3 icon appendix 3.1 launcher icons 3.2 menu icons 3.3 status bar icons android icon guideline version 1.0, cupcake release 2 / 24

1. icon types 3 / 17

1. icon types 1.1 launcher icon: structure A launcher icon is the graphic that represents your application on an Android device’s homescreen. It is a simplified 3D icon with a fixed perspective. The required perspective is shown in figure 1. The base of a launcher icon can either face the top view or the front view. The majority of a launcher icon’s surface should be created using the color palette described on page 5. To add emphasis, use one or more bright accent colors to highlight specific characteristics. All launcher icons must be created with rounded corners to make them look friendly and simple—as in figure 2. Figure 1, perspective angles 1. 92° 7. 64° All dimensions specified on this page are 2. 92° 8. 97° based on a 250x250 px artboard size in a 3. 173° 9. 75° vector graphics editor like Adobe Illustrator, 4. 171° 10. 93° where the icon fits within the artboard 5. 49° 11. 169° boundaries. 6. 171° Note: 90° would be a perfectly Final art must be scaled down and vertical line. exported as a transparent 48x48 px PNG file using a raster image editor such as 16 px Adobe Photoshop. 16 px Templates for creating launcher icons in Adobe Illustrator and Photoshop are available in the Android icon template pack. Figure 2. android icon guideline version 1.0, cupcake release 4 / 24

1. icon types 1.1 launcher icon: details light, effects, & shadows color palette step by step Launcher icons are simplified 3D icons using light 1. Create the basic shapes with a tool and shadows for definition. The image below like Adobe Illustrator, using the defines the lighting and shadows. angles described on page 4. The shapes and effects must fit within a White Black 250x250 px artboard. r0|g0|b0 r 255 | g 255 | b 255 2. Add depth to shapes by extruding them, Used for highlights Used as base color in 1 on edged. shadows. and create the rounded corners as described on page 4. 3. Add details and colors. Gradients should be treated as if there is a light source placed slightly to the left in front Light gradient Medium gradient of the icon. 1r0 |g0 |b0 1 r 190 | g 190 | b 190 2 r 217 | g 217 | b 217 2 r 115 | g 115 | b 115 4. Create the shadows with the correct 3 Used on the front (lit) Used on the side angle and blur effect. 67° part of the icon. (shaded) part of the 4 5. Import the icon to a tool like Adobe icon. 2 Photoshop and scale to fit a image 5 size of 48x48 px on a transparent background. 1. Edge highlight: white 6. Export the icon at 48x48 as a PNG file Dark gradient 2. Icon shadow: black | 20px blur with transparency enabled. 1 r 100 | g 100 | b 100 50% opacity | angle 67° 2 r 25 | g 25 | b 25 3. Front part: Use light gradient from color palette Used on details and parts 4. Detail shadow: black |10px blur in the shade of the icon. 75% opacity 5. Side part: Use medium gradient from color palette A light source is placed slightly to the left in front of the icon, and therefore the shadow expands to the right and back. android icon guideline version 1.0, cupcake release 5 / 24

1. icon types 1.2 menu icon: structure Menu icons are graphical elements placed in the pop-up menu shown to users when they 6 px safeframe Figure 3. press the Menu button. They are drawn in a flat-front perspective. Elements in a menu icon 6 px 2 px must not be visualized in 3D or perspective. px 2 In order to maintain consistency, all menu icons must use the same primary palette and the same effects (see page 7). Menu icons should include rounded corners, but only when logically appropriate. For example, in figure 3 the logical place for rounded corners is the roof and not the rest of 48 px the building. All dimensions specified on this page are based on a 48x48 px artboard size with a 6 px safeframe. The menu icon effect (i.e. the outer glow) described on page 7 can overlap the 6 px safeframe, but only when necessary. The base shape must always stay inside the safeframe. Final art must be exported as a transparent PNG file. Templates for creating menu icons in Adobe 48 px Photoshop are available in the Android icon template pack. android icon guideline version 1.0, cupcake release 6 / 24

1. icon types 1.2 menu icon: details color palette light, effects, & shadows step by step 1. Create the basic shapes using a tool like Menu icons are flat and pictured face on. A slight deboss and some other effects, which are shown Adobe Illustrator. below, are used to create depth. 2. Import the shape to a tool like Adobe White Black Photoshop and scale to fit an image of r0|g0|b0 r 255 | g 255 | b 255 48x48 px on a transparent background. Mind the safeframe. Used for outer glow Used for inner shadow and bevel highlight. and bevel shadow. 3. Add the effects seen as described in light, effects & shadows. 2 4. Export the icon at 48x48 as a PNG file with transparency enabled. Fill gradient 1 r 163 | g 163 | b 163 1 2 r 120 | g 120 | b 120 3 Used as color fill. 4 1. Front part: use fill gradient from primary color palette 2. Inner shadow: black | 20 % opacity angle 90° | distance 2px size 2px 3. Outer glow: white | 55% opacity spread 10% | size 3px 4. Inner bevel: depth 1% | direction down size 0px | angle 90° altitude 10° highlight white 70% opacity shadow black 25% opacity android icon guideline version 1.0, cupcake release 7 / 24

1. icon types 1.3 status bar icon: structure Figure 4. Status bar icons are used to represent 2 px safeframe (no overlap) notifications from your application in 2 px the status bar. Graphically, they are very 2 px similar to menu icons, but are smaller 2 px and higher in contrast. Rounded corners must always be applied to the base shape and the details of a status bar icon as shown on page 9. All dimensions specified on this page are based on a 25x25 px artboard size with a 2 px safeframe. 25 px Status bar icons can overlap the safeframe to the left and right when necessary, but must not overlap the safeframe at the top and bottom. Final art must be exported as a transparent PNG file. 2 px Templates for creating status bar icons using Adobe Photoshop are available in 2 px safeframe (no overlap) the Android icon template pack. 25 px android icon guideline version 1.0, cupcake release 8 / 24

1. icon types 1.3 status bar icon: details light, effects, & shadows color palette step by step 1. In a tool like Adobe Photoshop, create Status bar icons are slightly debossed, high in Only status bar icons related to the phone contrast, and pictured face on to enhance clarity function use full color; all other status bar icons the base shape within a 25x25 px image at small sizes. should remain monochromatic. on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free. 2. Add rounded corners as specified on page 8. White Black 2 r0|g0|b0 r 255 | g 255 | b 255 3. Add light, effects, and shadows as specified in the table at left. 1 Used for details Used for bevel shadows. within the icons 4. Export the icon at 25x25 as a PNG file and bevel highlight. 4 with transparency enabled. 3 Grey gradient Fill gradient 1 r 169 | g 169 | b 169 1 r 105 | g 105 | b 105 2 r 126 | g 126 | b 126 2 r 10 | g 10 | b 10 Used for disabled Used as color fill on 1. Front part: fill gradient details within the icon. the icons. 2. Inner bevel: depth 100% | direction down size 0px | angle 90° | altitude 30° highlight white 75% opacity shadow black 75% opacity 3. Detail: white 4. Disabled detail: grey gradient from palette + inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | altitude 42° | highlight white 70% | no shadow android icon guideline version 1.0, cupcake release 9 / 24

1. icon types 1.4 tab icon: structure Unselected Selected Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected. Unselected tab icons have the same fill gradient and effects as menu icons, but with no outer glow. 32 px 32 px Selected tab icons look just like unselected tab icons, but with a fainter inner shadow, and have the same front part gradient as dialog icons. Tab icons have a 1 px safeframe which should only be overlapped for the edge of the anti-alias of a round shape. 32 px 32 px All dimensions specified on this page are based on a 32x32 px artboard size. We recommend using a 1 px padding around the bounding box inside the Photoshop template. Final art must be exported as a 32x32 px transparent PNG file. Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack. android icon guideline version 1.0, cupcake release 10 / 24

1. icon types 1.4 unselected tab icon: details lights, effects, & shadows step by step 1. Create the basic shapes using a tool like These look just like the selected tab icons, but with a fainter inner shadow, and the Adobe Illustrator. same front part gradient as the dialog icons. 2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background. 3. Add the effects seen in light, effects & shadows for the selected state filter. 4. Export the icon at 32x32 as a PNG file with transparency enabled. 3 2 1 1. Front part: gradient overlay | angle 90° bottom color: r 223 | g 223 | b 223 top color: r 249 | g 249 | b 249 bottom color location: 0% top color location: 75% 2. Inner shadow: black | 10 % opacity | angle 90° distance 2px | size 2px 3. Inner bevel: depth 1% | direction down | size 0px | angle 90° | altitude 10° highlight white 70% opacity shadow black 25% opacity android icon guideline version 1.0, cupcake release 11 / 24

1. icon types 1.4 selected tab icon: details lights, effects, & shadows color palette step by step 1. Create the basic shape using a tool like The selected tab icons have the same fill gradient and effects as the menu icon, but Adobe Illustrator. with no outer glow. 2. Import the shape into a tool like Fill gradient Adobe Photoshop and scale to fit an 1 r 163 | g 163 | b 163 32x32 px artboard with a transparent 2 r 120 | g 120 | b 120 background. Used as color fill on 3. Add the effects seen in light, effects & unselected tab icons. shadows for the selected state filter. 4. Export the icon at 32x32 as a PNG file 3 with transparency enabled. 2 1 1. Front part: Use fill gradient from color palette 2. Inner shadow: black | 20 % opacity | angle 90° | distance 2px | size 2px 3. Inner bevel: depth 1% | direction down | size 0px | angle 90° | altitude 10° highlight white 70% opacity shadow black 25% opacity android icon guideline version 1.0, cupcake release 12 / 24

1. icon types 1.5 dialog icon: structure Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background. Dialog icons have a 1 px safeframe. The base shape must fit within the safeframe, but the anti-alias of a round shape can overlap the safeframe. All dimensions specified on this page are based on a 32x32 px artboard size in Adobe Photoshop. A 1 px padding around the bounding box inside the Photoshop template. 32 px Final art must be exported as a transparent PNG file using Photoshop. Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack. 32 px android icon guideline version 1.0, cupcake release 13 / 24

1. icon types 1.5 dialog icon: details lights, shadows, & effects step by step 1. Create the basic shapes using a tool like Dialog icons are flat and pictured face on. In order to stand out against a dark Adobe Illustrator. background, they are built up using a light 2. Import the shape to a tool like Adobe gradient and inner shadow. Photoshop and scale to fit an image of 32x32 px on a transparent background. 3. Add the effects seen in light, effects & shadows for the proper filter. 4. Export the icon at 32x32 as a PNG file 1 with transparency enabled. 2 1. Front part: gradient overlay | angle 90° bottom: r 223 | g 223 | b 223 top: r 249 | g 249 | b 249 bottom color location: 0% top color location: 75% 2. Inner shadow: black | 25 % opacity | angle -90° | distance 1px | size 0px android icon guideline version 1.0, cupcake release 14 / 24

1. icon types 1.6 list view icon: structure The list view icons look a lot like the dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be used only in a list view. Examples include the Android Market home screen and directions in Maps. This icon normally has a 1 px safeframe, but it is ok to use the safeframe area for the edge of the anti-alias of a round shape. Note: All dimensions specified are based on 32 px a 32x32 px artboard size in Photoshop. We recommend using a 1 px padding around the bounding box inside the Photoshop template. Be sure to remember to export final art as a transparent PNG file using Photoshop. Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack. 32 px android icon guideline version 1.0, cupcake release 15 / 24

1. icon types 1.6 list view icon: details lights, shadows, & effects step by step 1. Create the basic shapes using a tool like List icons are flat and pictured face on with an inner shadow. Built up by a light gradient Adobe Illustrator. and inner shadow they stand out well on a 2. Import the shape to a tool like Adobe dark background. Photoshop and scale to fit an image of 32x32 px on a transparent background. 3. Add the effects seen in light, effects & shadows for the proper filter. 4. Export the icon at 32x32 as a PNG file 1 with transparency enabled. 2 1. Inner shadow: black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px 2. Background: black | standard system color These icons are displayed in list views only. Note: The dialog icon sits on 32x32 px artboard in Photoshop, without a safeframe. android icon guideline version 1.0, cupcake release 16 / 24

2. tips ? 17 / 17

2. tips 2.1 do’s & dont’s When creating new icons there are some factors to consider to make them fit within the guidelines of the platform. Do Make sure no abnormal perspective is used. The depth of an object should be realistic. Keep it simple! By overdoing an icon, it loses it purpose and readability. Only use colors when necessary. Mind that the base of a launcher icon should be grey and feel solid. Use the correct angles for the specific icon types. Don’t Use open elements like text alone as icons. Instead place those elements on a base shape. Use colors for your status bar notifications. Those are reserved for specific phone-only functions. android icon guideline version 1.0, cupcake release 18 / 24

3. icon appendix 19 / 17

3. icon appendix 3.1 launcher icons * as of 03.09 Alarm Clock Browser Calculator Calendar Camcorder Camera Contacts Gallery Gmail Google Talk IM Dialer Email Generic application Maps Market Messaging Music MyFaves Settings Voice Dialer Voice Search YouTube android icon guideline version 1.0, cupcake release 20 / 24

3. icon appendix 3.2 menu icons * as of 01.09 Info / details Clear / Close / My Location Directions Edit Favorite Shuffle More Map mode Cancel / Discard Video History Route Search Switch Traffic Add Back Forward Bookmark Go to Home Party shuffle Play Zoom Gallery Share Call Camera Done Duration Attachment End conversation Archive Rename Rotate Upload android icon guideline version 1.0, cupcake release 21 / 24

3. icon appendix 3.2 menu icons * as of 01.09 Add buddy / Block user Clear Clear playlist Emoticons End chat Favorite Flag My account / Invite Account list Compose Flip orientation Go to Import contacts Home Delete All threads New window Help from SIM Notifications View labels My places Music library Save Save draft Rotate Repeat Revert Refresh Reminder Spam Settings Start Today Month Week Stop conversation android icon guideline version 1.0, cupcake release 22 / 24

3. icon appendix 3.2 menu icons * as of 01.09 Mute Upload video Shuffle all Security Search Star Upload Set as Scan for devices Route List Slideshow Speaker / Invites Compass Most popular Volume android icon guideline version 1.0, cupcake release 23 / 24

3. icon appendix 3.3 status bar icons * as of 01.09 Voicemail Music SMS/MMS EDGE Calendar Email IM Gmail Alarm Sync Disk full USB connected Warning Signal GPRS GPS on Airplane mode Speaker phone Vibrate Bluetooth WiFi 3G Call Call forward Call on hold Missed call Battery 100% Signal Battery empty WiFi unavailable Roaming Installation Silent mode Sync error Bluetooth Wireless network unavailable complete connected available android icon guideline version 1.0, cupcake release 24 / 24

http://www.slideshare.net	153
http://www.e-presentations.us	3
http://bachian.posterous.com	2
http://140.119.82.147:88	1
http://translate.googleusercontent.com	1

Android Icon Guidelines Draft0309

by Alexander Muse on Apr 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 160

Statistics

Android Icon Guidelines Draft0309 — Presentation Transcript