multimedia design principles - chapter 8
DESCRIPTION
Notes for Multimedia Design Principles classTRANSCRIPT
8 Typography And Graphical Usage In Interface Design
Objectives
At the end of this chapter students should be able to:
Know human considerations in interface design. Know how to organize screen elements clearly
and meaningfully. Know how to present information simply and
meaningfully. Explain the organization and structure guidelines
in interface design. Explain the technological considerations in
interface design.
Typography
Typography Terminology
Categories Of Type
Getting Text Into Your Document
Reading Type Onscreen
Font File Considerations
Anti-Aliasing Type
Balancing Design Time And Effort
Graphics
Sources Of Graphics
Integrating Images Into The Interface
Colour
Colour Methods
Colour Terminology
Colour Harmony
Colour Context
Using High Contrast In Interactive Document
Selecting The Right Colours
Using Colours Effectively
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
126
8.1 TYPOGRAPHY Typography is the art of designing type that is legible, expressive, and engaging. Text
on the screen adds expressiveness and style to an interactive document along with meaning.
Using text is one of the quickest and easiest ways to communicate large amounts of information.
Good text is easy to read, informative, and adds visual style to the interactive document.
One way to create good text is to understand the basics of typography. Designing good typography depends on choosing the right typeface, size, weight,
spacing, colour, and layout to convey the message. In addition to dealing with these traditional issues of good typographic design, you should be aware of resolution, anti-aliasing, contrast, text fields, and file format issues.
Figure 8-1 Example of typography
8.2 TYPOGRAPHY TERMINOLOGY Typography has a long history and an established terminology. These are the terms are widely used today:
Figure 8-2 Example of typeface
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
127
8.2.1 Typeface Set of characters (letters, numerals, and symbols) with similar design features. Some computer programs use the word fonts interchangeably with the word typeface.
8.2.2 Point Size The height of a letterform, traditionally measured in points. There are 72 points to an
inch. The smaller the point size, the smaller the type can be. Smaller point sizes are difficult
to read onscreen.
Figure 8-3 Type point size
8.2.3 Weight The thickness of the strokes that make up a letterform. The thicker the strokes, the bolder the letterform can be. Common weights are regular,
bold, and ultra bold. Thin, delicate type is generally not as easy to read onscreen as regular or bold type.
Figure 8-4 Type of weight
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
128
8.2.4 Spacing Space between letters, words, or vertical lines of type. Spacing encompasses letter spacing, word spacing, and leading. Letter spacing is the space between individual letterforms. Word spacing is the space
between words. Leading is the vertical space between lines of type. Letter spacing, word spacing, and leading are all factors that influence the readability
and the expressiveness of the type.
Figure 8-5 Example of spacing
8.3 CATEGORIES OF TYPE There are literally tens of thousands of typefaces and most typefaces have similarities
in form that allow for their placement into broad type categories. Examples of type of categories are as follow:
8.3.1 Roman Roman typefaces typically have thick and thin variations in their letter strokes, and
serifs range from moderately to extremely pointed. Roman typefaces are commonly used in body copy, as they are considered easy to
read.
The type on top is at normal letter spacing. The type in the middle is shown with wide letter spacing, while the type at the bottom uses very tight letter spacing
Regular leading
Wide leading
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
129
Serif typefaces can be difficult to read onscreen if they are too small because of low screen resolutions, and the thick and thin strokes within the letterforms.
Figure 8-6 Roman
8.3.2 Sans Serif Sans serif means “without serifs”. Sans serif typefaces have a modern appearance and
feel and can be very easy to read. They hold together well at small sizes and are generally a good choice for headline
copy, body text, and interactive controls.
Figure 8-7 Sans serif
8.3.3 Square Serif For these typefaces, the serifs at the end of the letter strokes appear to end in blocks or
slabs. It work best in headlines or display type.
Figure 8-8 Square serifs
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
130
When set in smaller type sizes, square serifs tend to make text fields onscreen appear dense and black.
8.3.4 Script Script typefaces can convey the
feeling of handwritten designs. Some script typefaces can be hard to
read, especially in blocks of text that are all capital letters. The delicate letter strokes of some script typefaces make them hard to read at smaller sizes.
They are best used sparingly and for headlines.
Figure 8-9 Script
8.3.5 Decorative When a typeface design is hard to categorize it is called decorative category. There
are no design limits for this category. Many of these typefaces can be extremely difficult to read and are best used for
display or headline copy instead of body text. The advantages using these typefaces are can establish a mood, time period, or style.
Figure 8-10 Decorative
8.4 GETTING TEXT INTO YOUR DOCUMENT There are three main options for obtaining text for interactive documents. If the project is a revision of an existing print or motion media piece such as a
brochure, newsletter, or video you may be able to reuse existing copy. This text can be typed manually or scanned.
To get text for an entirely new project, the text will have to be written and edited specifically for the project.
The third way to get text into your document is to let the user input information.
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
131
8.4.1 New Text Writing or editing new text may require the services of a professional copywriter. The
copywriter should be aware of the limited screen. As an additional advantage, writing new text circumvents the need to obtain copyright
permissions.
8.4.2 Reusing Existing Text Reusing existing text may
require the services of a professional typist or someone willing to carefully edit OCR-scanned text.
For long lengths of text, scanning may be a viable option, as long as someone is available to copyedit the text to identify and correct any OCR scanning problems.
Figure 8-11 Example of reusing existing text
8.4.3 User Input Interactive documents requesting user input are more demanding to design and
program. On the design side, you must consider how much screen real estate is necessary to
accommodate user input. For instance, a web page may ask for the user to “fill in the blank” with their name,
title, and address all in a limited amount space. Ultimately, whether text is typed, scanned, or input by the user, text adds functionality
to your document. As an interactive designer, your challenge is to shape readable, stylish, and usable
typography for the screen.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
132
Figure 8-12 User input
8.5 READING TYPE ONSCREEN Designing type that works well on screen, demands a good understanding of the
traditions of effective typographic design and how to work with the strengths and weaknesses of interactivity.
There are many factors involved with making type legible onscreen. These factors include careful consideration of typefaces, sizes, weights, colour and contrast choices, when to anti- alias type, and where to place type in the screen layout.
8.5.1 Typeface Choices Choosing the right typefaces for your project means selecting typefaces that are
expressive, legible, and fit the overall style of your project. Selecting a typeface to use in your document may at first produce some surprises, so it
is best to view the typefaces onscreen for legibility. Many typefaces that are easily read on paper may not translate well onscreen.
Figure 8-13 Typeface of choices
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
133
8.5.2 Size And Screen Resolution Small type onscreen is notoriously hard to read, largely due to the low-resolution
capabilities of most monitors. On low-resolution screens, small letters tend to lose definition and clarity.
At these low resolutions, letter strokes can appear to grow together, characters may be awkwardly spaced, with some letters compressed together while others have large gaps between them.
If monitor resolutions improve, the legibility of smaller point sizes will be better.
Figure 8-14 Size and resolution
8.5.3 Optical Weight Each typeface has its own optical weight that makes the typeface appear lighter or
heavier. Typefaces with thick letter strokes appear heavier than typefaces with regular letter
strokes. The advantage of using a bolder typeface is that the increased visual weight of the word adds emphasis.
The disadvantage to a very bold typeface is that setting line after line of text in the heavy weight tends to decrease readability.
Figure above shows a word at 12 point size, and enlarged to show the pixels available to the computer to display that size type. Notice that the lowercase ‘e’ only has a total of 6 vertical
pixels available to display all of the letterform’s details
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
134
Figure 8-15 Optical weight
8.5.4 Spacing Readability problems
can arise when letterforms and words in long passages of text are either too close or too far apart.
Both tight and open spacing slows down the reader's recognition of letterforms, resulting in a slower reading speed.
Too much spacing between letters, words, and leading in body text can also expand the amount of screen real estate a section of body text occupies.
Figure 8-16 Spacing
While spacing letters and words too close or too far apart can cause legibility problems, judicious use of creative letter and word spacing can add positively to the look and style of the document.
Creative spacing tends to work better in short passages of text, such as headlines, interactive buttons, or the credits.
Two examples of how different type can look when made in a drawing program (top) and in an authoring program (bottom)
An example of bold type as seen onscreen
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
135
8.5.5 Colour And Contrast Colour and contrast can help
establish a stylistic look or feeling in your document; they also can enhance or detract from readability.
Dark colours in type imply somberness, quality, or dignity. Bright colours in type are visually exciting and convey a dynamic feeling to a screen interface, but when used extensively, they can easily tire the eyes.
Middle-range colours (such as a medium blue) in type often suggest sophistication but, unless placed on a very dark or very light background, are difficult to read onscreen.
Using high contrast is a quick way to enhance readability.
Figure 8-17 Colour and contrast
8.5.6 Type Layout Type should fit in
stylistically with the rest of the screen elements. Headline type, text fields, and column widths should balance with images, interactive controls, and other screen elements.
Screen layouts loaded with lots of images but little descriptive type may be interesting to view but lacking in detailed, exact information. Figure 8-18 Type Layout
Screen layouts with lengthy bodies of text may communicate the precise, detailed meaning, but all-text screens may not appeal visually to the user.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
136
8.5.7 Text Fields A text field is an area onscreen designated to hold scrolling text. Text fields are useful for holding large amounts of text. They are easily created within
most authoring programs and can hold any amount of text. They provide handy built-in
control buttons or scroll bars that let the user go forward or backward through the information.
The advantages of text fields is that creating custom typography or formatting within the field is difficult, and the scroll bars and other built-in controls rarely coordinate with the rest of the look and style of the interface design. Some users will also not read large amounts of text onscreen.
Figure 8-19 Text fields
8.6 FONT FILE CONSIDERATINS In order for the user's computer to display a font in your interactive document
properly, the user's computer must have the same font installed. There are a number of options to consider when using type in an interactive
document. You can ship the font files along with the product, select a standard font present on
most computers, convert your document to a portable document format (PDF), or convert the type to a bitmapped image.
Figure 8-20 Font file considerations
Image on the left shows a web page displayed in Netscape Navigator’s standard browser default font, Times New Roman. Image on the right shows the same web page after the default font has
been changed in the browser preferences
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
137
8.6.1 Deciding On A Type Format
Deciding which type format to use in your document depends on number of factors. The following list shows some of the advantages and disadvantages of each option.
1. Editable text (font files loaded in
the user's computer) Advantages
o Since the letters and words are stored as a series of codes, they can be edited, searched, and modified.
o Editable text can be placed in text fields.
o Editable text takes up very little data space.
Figure 8-21 Type format
Disadvantages o The end user must have the complete font files installed on their computer or
else the text will not display right. 2. Type converted to a portable document format (PDF) Advantages
o You can make the type any typeface, style, and format you want. o PDF takes up very little data space.
Disadvantages o The end user must have the proper software loaded or else the PDF document
will not display properly.
3. Bitmapped image type Advantages
o Because type is an image, you can apply special effects to the type in an imaging program. For example, you could apply special textures or colours into the type.
o The type can be anti-aliased. o You can make the type any typeface, style, and format you want. o It will always look right on the user's computer.
Disadvantages o The bitmapped image takes up a lot of disk space. o Large bitmap files take longer to load onto the screen. o Bitmapped type cannot be moved or edited.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
138
8.7 ANTI-ALIASING TYPE Importing anti-aliased type into your interactive document can improve the look of
the type, but also imposes a few problems of its own. Small anti-aliased letters with interior spaces like D, F; R, and P may lose definition. In general, anti-aliasing type tends to work best in larger type such as titles. Another problem with
anti-aliasing text or images is that the technique is safe to use only when the background behind the anti-aliased object remains constant.
If the background changes behind the anti-aliased type, you will be able to clearly see the anti-aliased edges of the type, unless you create a new version of the type that matches the background.
Figure 8-22 Anti Aliasing type
8.8 BALANCING DESIGN TIME AND EFFORT When working with type in your document, you
should strive for attractive, easy-to-read type mixed in with- a well- planned balance of backgrounds, graphics, animation, and other screen elements to enhance the usability and legibility of the interface.
Good type design, no matter the medium, can help engage the user's interest and keep them looking at your message.
Figure 8-23 Balancing time and
effort are important
The top letters show the jagged edges of aliased type. The bottom letters show the same type, only with anti-aliasing applied
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
139
8.9 GRAPHICS Visual elements such as photographs, illustrations, charts, maps, and icons are
familiar elements and are often the keystones of interactive documents. The images you choose help create a mood, establish a visual style, and convey
complex information. Graphs, charts, and diagrams are good for putting across complex and detailed
information, while photographs and illustrations are better at implying a feeling or style.
Many individuals find statistical or numerical information easier to understand when placed into a graph or chart form.
Photographs convey a sense of realism. Artistically treated photographs and some illustrations can imply a mood or impression.
8.9.1 Photographs Photographs are often the mainstay of interactive documents, as they are relatively
easy to obtain and to scan, and they add a sense of realism to a document. Photos can be powerful visual images evoking strong emotional responses in the
viewer. Photographs are easily transferred
into the computer. Once loaded onto a computer, photos can be imported directly into your authoring program (if they are saved in a format recognizable to your authoring program), or special effects can be applied to them in an image-processing program.
Most image processing programs let you apply a variety of enhancements to the photographs, including colour correction, adjustment of the resolution, and experimentation with special effects such as emboss or blur filters.
Figure 8-24 Example of photographs One factor to take into consideration is that photos with many details will not render
well on low-resolution computer screens. When it is necessary to show detailed information, illustrations are often a better
choice.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
140
8.9.2 Illustrations Illustrations can be
diagrams, charts, maps, cartoons, or drawings. They are particularly useful for showing complex, detailed information that is difficult to show in other ways.
Illustrations can be humorous, serious, decorative, or strictly factual.
Figure 8-25 Example of Illustrations
Whatever the style of the illustration, a well-designed illustration can quickly put
across information as well as adding style, emphasis, and interest to your document.
8.9.3 Graphs, Charts, And Diagrams Graphs, charts, and diagrams work best when they are well designed and stripped to
just the essential data. A good graph, chart, or diagram will clearly state all relevant measurements and
parameters.
Figure 8-26 Example of diagram, graph and chart
Graphs and charts are widely used to represent numerical data. Bar graphs and pie
charts are two common forms. Diagrams usually contain data, text, and a visual element such as a photograph or an
illustration. Diagrams are useful for pointing out detail in existing images.
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
141
8.9.4 Maps Maps are a commonly used visual element in interactive documents, but they can be
easily misinterpreted if poorly or inadequately labelled. Screen resolution
limits the amount of detail it is possible to show in maps, so you may have to simplify some details.
Figure 8-27 Example of map
A viable alternative in this case would be to simplify the map and provide a zoom function so the user could selectively enlarge portions of the map.
8.9.5 Icons
Figure 8-28 Example of icons
Icons in interactive documents have come to mean any symbol or picture that is
"clickable" An icon is a simple symbol or picture that represents another thing.
Once you establish an icon in your document, it should always stand for the same thing. If you use an arrow pointing to the right to indicate, "Go to next screen," that icon, when clicked, should perform the same function throughout the whole document.
Another characteristic of a good icon is that it can be enlarged or reduced and still remain legible.
Another consideration in designing good icons depends on the culture of your audience.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
142
8.10 SOURCES OF GRAPHICS There are many sources for obtaining graphics. You can reuse existing graphics;
commission work from professional photographers, illustrators, and graphic designers; use clip media from clip art and clip photo CD-ROMs; or create images yourself.
Whatever the source, the graphics you choose should fit with other screen elements, work well compositionally, and convey the information or desired impression to the user.
8.10.1 Capturing Images Graphics are usually
either created in drawing or image-processing programs or scanned into a digital format from existing drawings, photographs, or other images.
The following paragraphs discuss some of the issues that should be addressed when scanning your images.
Figure 8-29 Example of capturing image
1. Scan And Save Images At A High Resolution Version One of the best things you can do to improve the overall image quality is to scan your
images at a resolution at least twice as high as the one you will need onscreen. Scanning your images at a high resolution is recommended for the following reasons: Scanning images at a high resolution
provides greater long-term flexibility. High-resolution images can be reused in
other media, such as printed materials advertising your product.
If you later choose to slightly enlarge an image in the interface, you can go back to the original high-resolution file, size the image, then resave it at 72 ppi to use in the authoring program.
Reducing the image later to a lower resolution helps to "clean up" unwanted dust specks in the image.
Figure 8-30 High resolution improve
image quality
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
143
2. Reduce Resolution In The Image Used In The Interactive Project While it is recommended that you scan and save images at a high resolution (for
greater long-term flexibility), you absolutely reduce the size of your image before placing it in your interactive project.
Since most monitors only display around 72 ppi (that is, 72 available pixels per linear inch), the image should be reduced to that resolution. If your image has higher resolution, the monitor will enlarge the image.
3. Avoid Image Degradation One technique to rigorously avoid is to take an existing image file and increase the
resolution. Increasing the resolution in an image makes the image appear to blur. This degradation of the image occurs because boosting the image's resolution means
the computer has to add information to the image file. It is a much better idea to start with a high-resolution file, because you can always
lower the resolution later if needed. Scan high, save low. Another quick way to severely degrade the quality of an image is to take a small
image and enlarge it in the authoring program.
8.11 INTEGRATING IMAGES INTO THE INTERFACE You may want to integrate all sorts of images into your interface, including scanned
photographs, special-effects photographs, cartoons, charts, illustrations, 3D computer-generated renderings, and so on.
Whatever the image, it should not only communicate content, but also look good both individually and with other elements onscreen.
8.11.1 Standalone versus Layered Images Graphics can be used either as standalone images or as layered images. Standalone images can begin as an individual picture like a photograph or a scanned
piece of artwork. Standalone images such as photographs are easy to place and move around onscreen.
Layered images are individual elements that are designed to work together as part of a larger interface. Using layered images adds flexibility and enhances the control you have over the interface.
With layered images you can easily move individual images around onscreen, reuse them in other screens, or apply interactive functions to the image.
Since layered images are saved as individual graphics, they are easily transferred to other projects and used over and over again.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
144
1. Use Images As Interactive Elements.
Using images as interactive controls adds visual interest to the layout and is a good way to provide feedback to the user.
Images are commonly used in image maps and multi-state buttons, which clue the user in to interactive possibilities.
If an image has interactive potential, for instance, it might highlight or briefly animate when the user rolls the pointer over it. This way, images can add visual interest to the screen and enhance functionality.
Figure 8-31 Images can be used as interactive elements
8.12 COLOUR Colour plays an important role in the creation of interactive documents. Colour evokes emotional responses, enhance stylistic unity, and can add or detract
from the readability of the interactive document.
Figure 8-32 Colour play important role for creating interactive documents.
Understanding more about colour will help you shape more effective interactive
documents
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
145
8.12.1 What is colour Colour is light energy in the form of waves and particles that is interpreted by the
human eye as mixture of red, green, and blue. The frequency of the light wave determines the colour that is perceived. High-
frequency light waves register in the human eye as red. As the frequencies decrease, the eye sees orange, yellow, green, blue, indigo, and finally, purple.
Figure 8-33 Example of colours
Light wave frequencies are higher than the red range are infrared energies; light wave
frequencies lower than the violet range are ultraviolet rays, X rays, and gamma rays. The differences in the frequency of the light waves are interpreted in the retina of
your eyes. The retina contains two types of light-sensitive cells: rods and cones. Rods perceive
the strength, value, and brightness of a light wave, while the cones perceive the frequency of the wavelengths as red, green, and blue (RGB) colours. There are three types of cones, and although each cone is not sensitive exclusively to one colour but can also distinguish limited amounts of other two colours. This ability to read small amounts of other colours helps the brain interpret mixes of RGB as in between colours, such as magenta, purple, and brown.
Figure 8-34 The retina
The Human Eye
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
146
8.12.2 The Psychological Impact Of Colour
Different colours can influence our emotions. The psychological impact of colour is an inexact science, but colour does have a powerful impact.
Using colour in a sophisticated, knowledgeable way can enhance the appearance and legibility of your interactive document. Using colour poorly can produce an emotional effect on the user that can range from mildly disturbing to the colour equivalent of fingernails grating on a slate blackboard.
Exciting, dynamic colours such as orange and red are considered warm or hot, because of a psychological link with fire. Bright oranges and reds convey an impression of excitement, passion, liveliness, and quickness.
Cool colours such as blue and violet are interpreted as serene and soothing and can convey an impression of cold and shade. Darker shades of blue and violet are often interpreted as moody.
Greens imply vigour and growth and are considered nurturing. White is widely used in hospitals, as it suggests purity and cleanliness. Bright colours seem more exciting and active, while softer, lighter colours seem more soothing and passive.
8.13 COLOUR METHODS Computer monitors project light waves to depict colours. Most monitors emit beams
of red, green, and blue (RGB) electrons onto a layer of fluorescent phosphor that coats a glass screen. It is the mix of RGB electrons on the phosphor that causes the screen to glow, creating visible colours.
8.13.1 Additive Colour
Figure 8-35 Additive colour
When the monitor uses projected RGB light to create colours, it is using the additive colour method.
The additive colour method starts with an absence of all colours, which results in black. Equal proportions of the RGB beams result in white.
Varying intensities and proportions of RGB light waves create the gamut (the full range of colours) available onscreen.
Additive Colour Subtractive Colour
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
147
8.13.2 Subtractive Colour In the additive colour method, white is achieved by using the full intensity of
projected RGB light. The subtractive colour method achieves white by the complete absence of the colours
cyan, magenta, and yellow (CMY). Mixing the full intensity of the CMY pigments produces a dark colour that is almost
black. To achieve a true black, black (K) pigment is added. This CYMK colour combination is widely used to achieve a range of colour on paper.
8.14 COLOUR TERMINOLOGY There are three terms that you need to understand when working with colour: Hue – the pure colour (as in red, blue and green) Tone – the relative lightness or darkness of a colour Saturation – A scale from fully intense as in a dark green.
Figure 8-36 Colour terminology
When using type and colour, legibility comes from contrast. The greatest contrast is
between black types on a white background; the least contrast is yellow type on a white background.
The range between these two is extensive. As the background moves closer to the type in colour, so legibility decreases.
Figure 8-37 Colour selection
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
148
Figure 8-38 Hue, tone and saturation
1 2
3 4
(1) Colour is described in three ways
(2) HUE, the name of colour
(3) TONE, a range from light to dark
(4) SATURATION, a range from low
intensity to full intensity
5 6 7
(5)-(6) The strongest contrast is black
type on a white background or yellow type
on a black background
(7) The weakest contrast is yellow type on
a white background
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
149
Figure 8-39 Type and background colour
8.15 COLOUR HARMONY
Figure 8-40 Example of colour harmony
Harmony can be defined as a pleasing arrangement of parts, whether it is music, poetry, colour, or even an ice cream sundae. In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience.
When something is not harmonious, it's either boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it.
The human brain rejects what it cannot organize and understand. The visual task requires that we present a logical structure. Colour harmony delivers visual interest and a sense of order.
(8)-(10) As type and background colours move
closer together, legibility decreases
8 9 10
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
150
8.15.1 Formulas For Colour Harmony
There are many theories for harmony. The following illustrations and descriptions present some basic formulas.
1. A colour scheme based on analogous colours Analogous colours are any three colours, which are side by side on a 12-part colour
wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colours predominates.
Figure 8-41 Analogous colour
2. A colour scheme based on complementary colours Complementary colours are any two colours, which are directly opposite each other,
such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colours create maximum contrast and maximum stability.
Figure 8-42 complementary colour
3. A colour scheme based on nature Nature provides a perfect departure point for colour harmony. In the illustration
above, red, yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for colour harmony.
Figure 8-43 Nature colour
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
151
8.16 COLOUR CONTEXT How colour behaves in relation to other colours and shapes is a complex area of colour theory.
Compare the contrast effects of different colour backgrounds for the same red square. Red appears more brilliant against a black background and somewhat duller against the white background.
Figure 8-44 Colour context
In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Notice that the red square appears larger on black than on other background colours.
Different readings of the same colour
If your computer has sufficient colour stability and gamma correction, you will see that the small purple rectangle on the left appears to have a red-purple tinge when compared to the small purple rectangle on the right.
They are both the same colour as seen in the illustration below. This demonstrates how three colours can be perceived as four colours.
Observing the effects colours have on each other is the starting point for understanding the relativity of colour.
The relationship of values, saturations and the warmth or coolness of respective hues can cause noticeable differences in our perception of colour.
Figure 8-45 Effect colour
8.17 USING HIGH CONTRAST IN INTERACTIVE DOCUMENT Adding contrast to the text, images,
and background in your document will improve its legibility whether it is displayed on a greyscale monitor or a colour monitor. Figure 8-46 High contrast colour
Small amounts of text can be easily read in light type on a black or dark background, while longer passages of text work better with dark type on a light background.
The best colour mixes are black or dark blue text on a white or cream background. The least legible type and background combinations are orange on blue, red on blue, green on orange, and yellow on orange.
Best option to ensure that your document will be readable is to use high contrast between your text, images, and backgrounds.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
152
8.18 SELECTING THE RIGHT COLOURS
Figure 8-47 In this attractive example, the colour helps define separate items of copy. It also gives added visual meaning to the
image.
Whichever specific colours you select, you can create harmony in a design by using a limited group, or palette, or colours that look pleasing in combination.
If you aren't sure where to begin, try starting with a small number of colours that have a specific relationship to each other on a colour circle. For example the triad colours.
Hues can be varied in saturation and value to produce the desired palette.
Typically, a colour palette contains contrast, between light and dark and between saturated and unsaturated colours. If the colours are of similar value, the overall effect will be bland.
Figure 8-48 Triad colours provide a balanced colour scheme and can be a good place to start
exploring palettes.
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
153
Here are some sample palettes: (i) (ii) (iii)
Figure 8-49 Example of patterns
Colour can be used for both associating elements in the design through common colour or differentiating elements with dissimilar colours. Use bright highly saturated colours to grab attention, but not for prolonged viewing.
The colours you choose can affect the mood, tone and message of your web site. Use cool colours for a calm, serious effect, or warm colours for an energetic, exciting look
Colours can be selected according to theme. A season, a geographical region, or a historical era, so that the palette conveys the desired mood or feel. Examples of thematic palettes can be found in textile and product designs
Spring Colour Dessert Colour
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
154
(iv) (v)
Figure 8-50 Continuous example 2 of patterns
For a palette to work well in a design, some unifying attribute should tie the colours together. This could be a particular hue or range of saturation (or value) that appears throughout the design, accented by small areas of a contrasting colour.
In informational design, distinguish decorative colour from functional colour. Decorative colour enhances the layout by making it more aesthetically appealing,
creating a mood, or establishing a style. Functional colour conveys information explicitly.
The best choice of colours depends on the site's intent and the user expectations, as well as the designer's aesthetic.
Figure 8-51 Colour Palette
Colours can be selected based on subject matter. Thorough understanding of the subject matter is necessary to avoid using colours that may be confusing or erroneous
Traffic Light Colour Cell Microbiology Colour
Use colours based on psychological, cultural, or age.
Dignified Colour Children Colour
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
155
8.19 USING COLOUR EFFECTIVELY
Figure 8-52 Example of using colour
Effective use of colour can give the user a good first impression of the software product, encourage user acceptance, cause a user to prefer your product compare to competitor’s products, and significantly improve user performance.
You have learned about colour, how we perceive colour, how to select colour etc. Based on that knowledge, here are some recommendations for using colour effectively.
8.19.1 Using Colour Sparingly One good rule to keep in mind is that the less frequently a colour is used, the better it
will grab the user's attention. Once you use the colour red to warn the user, don't use red for any other purpose.
Remember, colours are effective maximally when they are used minimally. The background colour affects the effectiveness of the other colours. Pick an effective
background colour and use only about five colours. Avoid using a solid, black, untextured background. This type of background can
cause coloured characters to appear to float at different distances relative to the background (Narborough-Hall, 1985).
If you have to use a solid, black, untextured background, then use white and desaturated red, desaturated yellow, desaturated green, and desaturated blue colours (Weitzman & Neri, 1986).
A good choice for a background colour is a neutral, textured, dull, light grey (Narborough-Hall, 1985). This type of background helps people keep their attention on the foreground text and graphics, reduces the likelihood of floating characters, and allows the designer to use the colour black in the display.
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
156
8.19.2 Use Colour Consistently With User Expectations Due to our culture and experience, we have gradually built up expectations for what
colours mean. For example, traffic signals use the colour red for stop, yellow for caution and green
for go. Take advantage of these expectations when using colour on computer displays. Some
well-known expectations above. So, make red a warning that data
will be deleted if an action is performed. Use green text or graphics to tell the user that a requested process worked. Make yellow a caution that the next process will be slow. Indicate cold, application-specific objects, like ice, with blue.
Use your colours in a way that is consistent with the expectations of your users. Figure 8-53 Use colour consistently
8.19.3 Use Colours That Contrast Well Contrast refers to the difference in perceived brightness of two objects. The eye
focuses most sharply on objects that have different colours and brightness (Murch, 1983).
For example, if you have a light grey background, don't use yellow for text. The poor contrast between background and foreground will make it harder for the eye to focus on the letters, and the text will be difficult to read.
If all colours have the same intensity, then we perceive colours in the middle of the visual spectrum, like green, as brighter than colours at the ends of the visual spectrum, like blue (Murch, 1983).
This means that green is a good foreground colour and blue is a good background colour. Blue-yellow and red-green also form high contrast.
For example, you could use yellow as a foreground text colour and blue as a background colour. Avoid using together non-opponent colours, like blue-green and yellow-red.
Figure 8-54 Example of contrast colour
Red = warning, stop, error, hot
Green = go, good
Yellow = caution, slow
Blue = cold
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
157
8.19.4 Avoid Using Blue Colour For Text The reason for not using saturated blue for text, thin lines, and high-resolution
information is because the eye is not designed to see it clearly. The lens absorbs almost twice as much light in the blue region of the colour spectrum
as in the yellow and red regions (Murch, 1983). This problem increases with age because the lens gradually yellows and filters out the shorter wavelengths of light, such as blue.
To focus long wavelength light, the muscles make the lens thicker. To focus short wavelength light, like blue, the muscles must make the lens thinner.
Saturated blue, however, has such a short wavelength that the lens simply cannot be made thin enough to focus it on the retina. Instead, the wavelengths that produce saturated blue focus in front of the retina (Murch, 1984). This means that small, saturated blue objects, like text, always appear blurry to us.
Figure 8-55 Example of blue colour for text
8.19.5 Avoid Using Saturated Colours The reasons why we
should not use saturated colours on computer displays because it produced visual fatigue.
Saturated colours make the lens more refocusing. This constant refocusing Figure 8-56 Example of saturated colours can cause the muscles that change the shape of the lens to tire, and may produce a sensation of visual fatigue (Murch, 1983).
Saturated colours may also produce false perceptions of depth. Saturated colours that are at the same distance from the eye can be perceived to be at different distances. For example, saturated red is perceived to be closer to the person than saturated blue (Murch, 1983).
Saturated colours with the same brightness are difficult for colour defective people to differentiate. In particular, saturated red is especially difficult for colour defective people to perceive (Human Factors Society, 1988).
Saturated colours are associated with other visual problems. For example, after viewing strongly saturated green characters for several hours, air traffic controllers have reported seeing red or pink for up to 15 minutes after the session is ended (Narborough-Hall, 1985).
TANJONG GOLDEN VILLAGE TANJONG GOLDEN VILLAGE TANJONG GOLDEN VILLAGE TANJONG GOLDEN VILLAGE
8
M U L T I M E D I A D E S I G N P R I N C I P L E S
158
8.19.6 Use Colour Redundantly In a human-computer interface, both the human and the computer less ability to
perceive colour. Although the term "colour blind" is used frequently, "colour defective" more accurately describes people who have trouble perceiving colours.
Some of the people who use your application software may have monochromatic computer displays. These people cannot see your colour choices because their displays cannot show colour.
Additionally, many computer printers can print one colour only. So, monochromatic computer displays and printers can be considered colour deficient.
Since people, computer displays, and computer printers can be colour deficient, try to use colour redundantly with other coding techniques such as location on the display, brightness, shape, texture, and blink.
If you cannot make a colour code redundant, such as a screen filled with lines of text, then use desaturated colours that consist of different mixtures of red, green, and blue. The blue mixture is especially useful for red-green colour defective people (Human Factors Society, 1988).
8.19.7 Let Users Select The Colour Colour preferences are extremely personal. Colours that you love, someone else will
surely hate. This means that using colour in a fixed fashion in your application will definitely
annoy some users. Therefore, let users select the colours. Users should also feel like they are in control of the computer. The best way to
deal with the personal nature of colour preferences while allowing users to feel like they are in control of your application is to give default colours that are consistent with the recommendations of this report and to allow users to select colours to suit their personal preferences.
Figure 8-57 Users have choice to select the colour they wanted to
8
T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n
159
8.20 EXERCISE