Tone and Color

Pictured above, we have another shot of the StarCraft II user interface. Notice the use of variation in tone and color can aid in the structure and organization of a design. Tone operates on a finer level in this case to distinguish groupings, such as the headline text from the body text, and to dim the images in the background from the shapes in the foreground. We can also see tone working in alongside scale in the instance of the "Achievement" descriptions, where the larger sized label and brighter tone enhance the pop out effect.

Blizzard has also chosen to make use of color to section parts of the screen. The hierarchy consists of a blue-tinted mission objective segment at the top, a green tinted achievements segment at the bottom right, and a red-tinted summary portion in the bottom right. This element, paired with the rectangle shapes literally divide the high-resolution image into smaller chunks to be more readily understood.


Color and tone can be seen working in conjunction in the finer elements. Such instances include the contrasting orange icons functioning as bullets to the side of the achievement descriptors, and the blue-background dots to help anti-alias the numerals on the far right of the mission summary section. Each dialogue has  a header or footer that's tinted to further enhance the communication of the template.