Introduction

One of the big challenges for designing UI media for the Android OS is supporting the many display sizes of various devices. Android media guidelines define nine-patch "skin" media assets that can grow and shrink as needed dependent on the screen layout as well as icons in all dip (density independent pixels) sizes targeted by the application.

Problem

Motorola media designers were struggling with supplying several sizes of media assets (icons and certain nine-patch files) to support UI designs across a myriad of displays in a timely and agile fashion. Designers were constantly challenged with meeting tight deadlines for software builds that were made to support a new or custom display. A refreshed design of the UI framework required at least a 2 month effort just to produce all of the 6,000+ assets.

Analysis

One of the issues I identified early on was the lack of robust detailed guidelines and adherence to the already established guidelines by the media designers. Designers at Motorola primarily used Adobe Illustrator (AI) to make media assets. AI is a good tool for generating media source files since the vector file format is the most flexible for scaling to the various sizes required. Guidelines for AI use was determined as a necessary first step. Once these were in place, an automated system could be implemented to quickly create several .png exports from single source .ai files.

Solution

Guidelines were established for AI design source files to ease the preparation for the automation process. Many of the file changes to support these rules were eventually handled by the production tools.

Here are a few examples:

• If at all possible, use single artboards. If not, ensure that there are no elements that extend across more than one artboard within a multiple artboard file.
• Use target filenames for artboards in a multiple artboard file; use target filenames for single artboard files.
• All elements within an artboard should be contained within canvas boundaries.
• Use RGB color as opposed to a combination of color and opacity in opaque color fills (quite often designers will use black and various opacities to achieve different grays).
• Use a 1x1 pixel grid and force shapes to snap to this grid to eliminate all instances of sub-pixel rendering. Sub-pixel rendering reduces sharpness of lines (Fig. 1 and 2).
• Ensure that each single artboard file has a 0,0 origin in the upper left corner of the artboard. No sub-pixel origins.
• Use shared graphic styles and palettes to maintain consistent style across designs
• Use the exact same file structure for the source files as the output files which should also map one-to-one with the media file structure within the build tree. This eliminates confusion over which files the media designer is delivering.

Using the AI JavaScript API I wrote scripts to:

• Split multiple artboards into single artboards
• Scale standard artwork by a user-defined value (Fig. 3 and 4)
• Scale nine-patch artwork by a user-defined value
• Export png files according to spec

All of these processes were applied directly by the designers. They were also able to batch these processes across multiple files.

Summary

A process that once involved manually creating 6 files (3 dip sizes for .ai source and .png output) for every 1 design was reduced to manually creating 1 file while the other 5 were created via the production tools. The production tools also forced the creation of single source .ai files that mapped one-to-one with .png files used in builds (including the base filename and file location). This greatly reduced the time spent by designers searching for source files of png assets.

Advantages of this system:

• Reduction of initial production time by 83%
• Reduction of source search time by 85%
• Increased agility to make design changes across several displays
• Higher quality media designs: no sub-pixel rendering, 100% correct dimensions