Colour plays a very important role in visual design. It can assist in the organisation and grouping of information, helping to focus attention, convey differentiation, and establish relationships and visual hierarchies between elements. Colour can also help readers scan information and quickly identify structural or functional elements such as headers, menu items, and hyperlinks. When used incorrectly, however, it can easily distract attention from the task at hand, create visual ‘noise’, and cause a user to make connections between elements that may not be related at all.

Like computer monitors, mobile devices use an additive colour process. Unlike print media, which begin with a white surface, the computer screen begins as a black surface to which coloured light — red, green, and blue (RGB) — is added.

Although early mobile devices supported very few colours, colour support is now quite robust, with a large proportion of devices providing 12-bit (4,096 colours), 16-bit (65,536 colours), or 24-bit (16 million colours) colour support. You will find however that — similar to the variety in screen size — many devices in use support varying colour depths, with newer, low-cost models (such as the Nokia 2330 classic) typically supporting 12- or 16-bit colour depths.

Figure 1. Bit depth and image quality

Pictured above is a simulation of an image displayed at various bit depths. As this illustration indicates, the vast majority of Nokia devices are in the 12- to 24-bit range.

In light of the wide variety of devices you may have to support and the often-critical nature of the tasks people execute on their mobile devices, here are some things to keep in mind when working with colour:

• Don’t rely exclusively on colour to convey critical information such as error messages or network interruptions. This practice will ensure that users of less sophisticated devices or users in variable light conditions have other means for clearly understanding the level of importance associated with your message. Remember as well that about 10 per cent of men have some sort of colour-blindness.

• If a colour is being used to convey a specific meaning (for example, red to warn of danger or an error), check to be sure that the chosen colours are universally associated with the intended meaning and be aware of the potential conflicts that result from cultural misinterpretation.

• Remember the importance of maintaining clarity between figure and ground. Aim for a contrast of 50 per cent — especially for critical interface elements and body copy. If you are uncertain about your colours, you can convert your designs to greyscale to see which elements stand out and which blend into the background.

• Complex gradients — those that include transitions involving more than two colours or that follow a complex path — may not appear as expected, even on newer devices. This will manifest itself as banding between each area of colour. Avoid using gradients for backgrounds or large areas of the screen.

• Some devices display colours differently from various viewing angles, so test your design by holding the device in different positions. Remember that unlike desktop computers, mobile devices are not always viewed from the same angle or orientation. Certain development tools, such as Adobe Device Central CS5, enable simulation of various display conditions, such as backlight timeout and daylight reflections on-screen.

• Displays also vary in brightness, and the newer devices are not necessarily the brightest. Get to know the brightness range by testing on multiple devices. Pay particular attention to colour contrast. Black on white will always create the highest contrast and, as a rule of thumb, you should aim for a contrast of around 50 percent. Remember as well that devices are often used in sunlight, which further decreases the visible level of contrast.

• If you work with brand managers or marketing departments, try to manage their expectations with regard to colour accuracy early on. Even devices with identical colour depths can display colour differently, and, because of differences in colour saturation, it can be difficult to match Pantone colours to a mobile display. Expect slight shifts in colour — in particular with bluish tones, which tend to have a wider range on devices.

Font support

Font support on mobile devices is limited, and your level of stylistic control over fonts will depend on the platform you are designing for. All devices support at least one font. This font often serves as the device’s default typeface and is typically referred to as the native font or device font. For example, S60 devices from Nokia use one font — S60 Sans, designed by Monotype — to render text within the browser and operating system.

Figure 2. The S60 Sans font by Monotype

All device manufacturers provide their own custom device font, so it’s worth taking the time to familiarise yourself with each of those fonts.

• If you are designing a Web site that will be viewed in the Web Browser for S60, your ability to affect type will be limited to basic styling of the size, colour, style (such as bold or italic), and weight of S60 Sans.

• In Java ME development, the formatting of device fonts is limited. The font size can be specified as small, medium, or large, which should be considered a very rough measure, because the actual size displayed will vary across devices. You can also specify a limited range of font styles (typically, bold or italic, but, again, not supported on all devices) and set text colour using RGB components or hexadecimal values.

• Java ME technology also enables you to specify custom typefaces, but the process is quite different from what you may be used to on the Web or with Flash. Java ME technology doesn’t simply specify a typeface. Instead, a graphical (or bitmap) version of the required characters is included with the application that then crops and displays each individual character to form the required words and phrases. While this approach enables you to specify any font you wish, it also increases the size of the application, may cause performance issues on less capable devices, and is therefore not recommended for large areas of body copy. Note as well that it is not possible to change the colour of bitmap fonts dynamically, so a separate version of a font will need to be included for each and every colour you wish to use.

• Flash Lite supports device fonts, as does Java ME technology, and also enables you to specify your own typeface in two ways. You can either choose standard, TrueType fonts or use pixel fonts that are specially designed for mobile use and to appear crisp at a specific point size. As with Java ME technology, each font bundled with the application increases the size of the overall file.

Designing for the small screen on a big monitor can be challenging, and the most common mistake is making fonts too big. Given the variable nature of device fonts and the added impact of physical display size (described in the previous section), many designers find the creation of accurate wireframes, mock-ups, and documentation challenging. There are, however, simple ways to improve the accuracy of your designs:

• Gather screen shots of various devices and measure the point sizes of common text-based elements such as body copy, headers, and softkeys. To avoid last-minute surprises, use these measurements as a guide and crosscheck your designs well before the porting begins.

• Use the S60 Sans font in your wireframes or designs. You can obtain a TrueType version of the font downloading and installing the S60 SDK, then looking in the following location on your drive:

  C:\Symbian\[version# ex. 9.2]\[release # ex. S60_3rd_FP1_5]\Epoc32\release\winscw\udeb\z\resource\fonts

• Avoid the use of italic type: It can be difficult to read. Unlike traditional print fonts that typically use a custom italic variant of each font, device fonts often simulate italics by shifting the upper half of the font slightly to the right. This approach can decrease legibility at certain sizes.

• Remember that an increasing number of devices support both portrait and landscape modes. These modes can be implemented in all applications or merely during use of certain applications, such as the browser, camera, or media viewer. Newer device models, such as a number of the Nokia Nseries multimedia computers, include an accelerometer, which triggers a change in mode as soon as such a device is physically rotated. This feature further increases the likelihood that your users will spend time in both modes and emphasises the need to consider both throughout the design process.