Topic 4: Logos and Graphics
Logos and graphics are often key elements of
documents and forms developed for communication
purposes. The images help to create an aesthetic look
to the page(s) and at the same time can serve to
strengthen aspects of the message being delivered.
The graphics can take many forms. Sometimes they
will be abstract graphics placed in positions on the
page to improve the layout and the look and feel.
Other times, they can be used to facilitate use of the
page as an information source, for navigation purposes
etc. And they can also serve as branding elements to
provide some form of recognition as to the owner of
the page and the corporate identity.
4.1 Graphics and images
Graphics and images are frequently used in place of
words and text in headings and titles to facilitate better
understanding among users. Graphics and images tend
to have universal recognition and can be used in place
of natural language to facilitate recognition to a much
large audience. In everyday life we see many instances
where images are used in pace of words to indicate
restrooms, facilities, directions and the like. The very
useful outcome of this is that the graphics can be
understood by people who speak different languages
and even people who can’t read, for example, small
children.
An early form of pictograph was the petroglyph, rock
painting and carvings from ancient times. Many older
civilisations and their histories carved in storied and
forms on cave walls and rock paintings in the form of
pictographs. Today the petroglyph is used as a stylised
form of pictograph, They have their own unique look
and feel.
Pictographs are reputed to have become common in the
modern world when countries started adopting
common sets of traffic signs so that travellers from one
country were able to follow the traffic signs in another.
Today traffic pictographs are common the world over
and represent one of the best known forms of this
graphical imagery
Pictographs are used today for many purposes. They
transcend language and culture and are artistic in many
forms. Pictographs can be found in airports where they
point to the facilities one would expect and needs to
find, eg. restrooms, cashpoints, luggage collection,
transport, hire cars, transport, information etc. Today
we see pictographs in many different settings:
• Olympic games sports are often stylised as
pictographs;
• Controls in vehicles use pictographs;
• Switches on office machinery;
• Buttons on specialist machines eg. coffee makers;
• And as menu items and buttons on Websites and
interactive programs.
Pictographs
Pictographs are a special form of graphics. They are
symbols which describe an object, an action or a
process and they use an image to do so. In early days,
alphabets consisted of pictographs, in days before
letters and alphabets were used to represent phonetic
forms. The Chinese language, for example, is
comprised of characters many of which are pictographs
in a calligraphic form.
Figure 4.2 Pictographs
Images that transcend the language barrier can be
used in public places to indicate services etc..
Figure 4.1 Road Signs
Road signs are the same the world over. They are
pictographs whose design provides a clear meaning for
motorists.
Topic 4: Logos and Graphics
The design of pictographs requires considerable skill
and talent. The images need to have the capability to
cross culture, some even argue to cross time and style.
Pictographs for special events can be quite unique
1
while those that serve as guides and supports need
more global qualities.
One of the big problems in pictographs is choosing a
representation that means the same thing to every
person.
Weak pictographs can suffer from a number of ills;
• Poor graphic and style;
• A lack of consistency and form;
• Ambiguity;
• Complex imagery limiting reproduction;
Images and Graphics
People using such applications as Word, Powerpoint
and Web page software will frequently find themselves
needing to use image and graphics for various reasons
in the pages they design. For example, when designing
a form that people need to read and complete, it can
help to provide some images to highlight important
parts of the document. Often there will be a need for
images and symbols that say:
• Read this;
• Fill this in;
• Here is the email address;
• Here is a Web link you will find useful;
✍✄☛✉
 
Figure 4.5 Zapf Dingbat font
Zapf dingbats provides a range of symbols and images
for the printed page or screen.
4.2 Buttons and screen graphics
While there are many graphics are used for print
documents, other forms o graphic are used in Web
pages. Most Web pages involve a series of graphics to
facilitate navigation and movement between the
various pages. The graphics on Web pages take a
number of forms. Perhaps the most common form of
graphic is the button.
a. buttons
Buttons are simple graphics that are used to support
hyperlinks to move between pages. The buttons
usually have a consistent form and are designed to add
to the appearance of the page as well as supporting
navigation.
Figure 4.3 Page symbols
Images and symbols are frequently used in desktop
publishing to highlight aspects of a page
Desktop publishing activities often involve the use of
symbols and graphics and their placement on the page
for effect and function. There are a range of fonts that
are available to users of such applications as Word and
Powerpoint to facilitate their use. Some of the more
common graphics fonts are Zapf Dingbats and
Wingdings.
Figure 4.6 Buttons
Buttons are Web-based graphics used to support
movement between Web pages.
Figure 4.4 Wingdings font
Wingdings a range of symbols and images for the
printed page or screen.
Topic 4: Logos and Graphics
Many Web page designers use buttons to help develop
a distinctive look and feel for the page. The graphics
design of the buttons often adds to the appearance of
the page and forms part of the visual. While some
buttons are clearly navigational devices, others are
designed in ways to complement the appearance.
Figure 4.7, for example, shows a number of navigation
links, some as buttons and the others in pictorial form.
2
Figure 4.7 Images as navigation elements
In this Web page images as well as buttons are used to
select and to link to various pages.
Designing Buttons
There are many ways to develop graphics that can be
used in digital formats for such purposes and
navigation and movement within the resource. The
following image shows a Web page and a series of
links for users to follow. The links are presented in the
form of buttons and the buttons provide some unique
representation of the various clickable options. In this
example, the product describes training for drivers and
the various buttons have a transport theme in keeping
with the subject matter of the resource.
Figure 4.8 Buttons and themes
In this Web page the buttons convey their functionality
and follow a transport theme in keeping with the
product.
With many digital products providing links to other
pages, the buttons have a unique design and also have
distinctive elements that appear when the mouse is
rolled over or when they are selected. Often the design
of the button includes the design of the rollover and
visited forms and these are also in keeping with the
themes used. Often the changes will be to colours and
shades so that the original image remains but an altered
state shows.
Topic 4: Logos and Graphics
Figure 4.9 Menu items
Navigation can also be enhanced through combinations
of text-based links and iconic forms.
The use of buttons and icons as a means to support the
navigation within sites can sometimes limit the
usability of pages for users with visual impairments or
specific equipment needs. There is still widespread use
of text-based link as these are self-explanatory and can
provide a better overarching structure for a site.
Figure 4.10 Alternative forms
There are many was to be creative in the choice of
graphics and buttons to support navigation in digital
resource sets.
In some cases, it is possible to design buttons and links
in ways which provide a natural connection to the
subject matter and the navigation role being played by
the buttons. Figure 4.10 shows a navigation page
presented in the form of a pin up board. Each of the
clickable options appears as an item on the pin-up
board and is graphical in form while still text-based in
description. The overall impression of this form of
navigation in a set of learning materials is a set of links
with clear actions, presented in an attractive fashion
which is in accord with the materials being accessed.
3
4.2 Designing Effective Logos
There are a number of general rules and principles
which when applied can help designers to create logos
that will be effective.
a. Make a clear and clever association. The design
of the logo needs to create an image and impression
which will advance the viewer’s perception of the
company and give a positive image. The
association is best achieved if it provides some
unique or noticeable connection. Readers will
always remember clever associations and will
recognise the logo with the company or product
when next viewed or visited.
Fig 4.11 Glen Jones
A logo for a stationery shop with a clever connection to
the owner’s initials
b. Provide immediate recognition. The logo needs
to have sufficient uniqueness to cause it to be easily
recognised and linked to the company. The logo
should not be so similar to another logo so as to
cause confusion or recognition of the alternative.
Strategies that assist in making logos recognisable
is through the use of known trademarks or through
some advertising processes that raise the profile of
the company and its link to the logo.
c. Convey a level of abstraction. The logo needs to
have a visual connection and a level of abstraction
that facilitates the connection. The cleverer the
design in this regard, the better. People enjoy
seeing a clever logo where the image and the
activity have alignment.
Fig 4.12 Abstract designs
A traditional activity comprising simple shapes used to
create a raft of image forms
d. Reproducible. Logos need to be designed so that
they are readily reproducible even down to quite
small image sizes. A logo with very fine detail and
complicated elements may not reproduce easily.
Most logos end up being used in a variety of places
and for a variety of purposes. The need for
reproducible forms is very important especially
since there will be many media which can be
employed to present logos.
Fig 4.12 Use of colours
Single colour graphics reproduce easily both in colour
and in black and white.
e. Use of appropriate colours. Often the best logo
will have minimal colours and employ the
corporate colour scheme. Too many colours will
limit the reproducibility of the logo. The choice of
colours can also effect where the logo can be
displayed. Most Web-page designers used Web
specific colours so that image can be presented inn
colour and black and white while still retaining its
basic shape and essence. Figure 4.12 above shows
a monochrome graphic which appears to have
several shades of blue as a consequence of the line
width and makeup.
f. Use bold colours. Logos need to have bold colours
and to avoid the use of colours that don’t reproduce
well. Pastels, patterns, etc. and shading often do not
reproduce well.
The use of bold colours in logos assists in the
recognition of the logo and the use of corporate
colours helps t remind people of the organisaton
when they see the logo.
Many companies today use a corporate colour to
help with their image and branding. Logos need to
replicate that colour perfectly otherwise they can
lose their impact. Imagine a Qantas logo with
anything other than mailbox red, or a McDonalds
logo with a mustard colour. The variations simply
don’t work.
Topic 4: Logos and Graphics
4
g. Negative space. Logos can make strong use of
negative space to create a strong visual. The use of
positive spaces alone can restrict elements of the
design. Negative space provides many
opportunities for creative design.
Fig 4.13 Use of negative space
The use of negative space sees pages in this book
presented in black and white colours.
h. Line weight. Lines and forms in logos need to be
heavier rather than lighter. Heavy lines and forms
enhance reproducibility and recognisabilty. In
designing logos, it is better to try to use bold and
thick lines and graphical elements to give the logo
some weight and form. The weight of the graphics
adds to the depth that can be portrayed.
j. Direction. In logo design, many will argue that an
important strategy is to make the constituent
elements, be they lines, shapes and patterns, to flow
in a positive direction. A positive direction is
generally one that is either to the right or up.
Negative directions tend to be down or to the left.
An impression of negativity of direction can limit
the appeal of a logo.
Fig 4.15 Direction
In this image direction to the right is suggested by the
use of musical notes.
i. Flow and motion. Logos tend to look better if they
portray a flow and connection between their
elements. When logos contain discrete shapes and
blocks of white space, they can be limiting in their
aesthetics and appeal. When logos that are
appealing and effective are examined, there tends to
be a flow within them that leads the eye to the
critical elements and which gives the logo a sense
of motion and direction. These elements can give
a static shape some sense of vibrancy and life.
Fig 4.14 Flow and motion
The use of elements to create flow and motion can give
logos a sense of life. The lines in this image suggest
motion and flow.
Topic 4: Logos and Graphics
5
Links of Interest
http://desktoppub.about.com/od/logos/ss/logobasics.
htm
A website that explains from the basics how to design a
logo design, with emphasis on use of lines and shapes.
Topic 4 Revision Questions
http://www.101010.it/storiagrafica/1950.html
A fantastic website looking at the graphic layout and
history of design from 1950 to 1999.
2. What factors need to be considered when designing
pictographs?
http://www.grantasticdesigns.com/logos1.html
Guidelines for selecting a logo design
3. Different people will often interpret symbols and
images differently. What are some of the causes of
differences in interpretation?
1. Describe a pictograph. Give examples of some
common pictographs.
http://www.johnlovett.com/test.htm
An explanation of the elements and principles of
design that are the building blocks used to create a
work of art.
4. What are dingbats? Where are they used?
http://cooltext.com/
A cool website where you can generate text-based logo
designs for webpage’s. Real-time generation is
provided.
6. What are some of the issues that need to be
considered in the design of navigation elements for
electronic resources and Web pages?
http://www.sowpub.com/cgibin/forum/webbbs_config.pl/read/1879
A top 50 list describing how and why some of the most
famous logos were designed. (i.e. Apple, Michelin
Man and Nike.)
http://www.cs.utexas.edu/users/tbone/warningsigns/
An example of exploring the art of conveying
information without assuming any prior knowledge,
through the use of Stick-Figure Warning Signs.
http://www.symbols.com/index/wordindex-a.html
A comprehensive A-Z list of symbols, their represented
icon and a description.
5. Describe some of the images that can be used to
provide navigation in a Web page?
7. List and describe 2 logos of which you are aware
where the design has a clever association with the
product/company.
8. Describe 2 logos of which you are aware that have
a strong recognition. What makes the brand so
recognisable?
9. Describe a logo of which you are aware that is
characterised by flow and motion. How does the
flow and motion contribute to the logo design?
10. List and describe the factors that make each of the
following logos successful.
http://www.makikoitoh.com/archives/2004/01/03/fav
icon.php
This examines favicon design – the use of small logos
in the address bar of web-browser.
http://www.logoworks.com/logos.html
Various articles looking at logos and starting with their
history, through to analysising their functionality.
http://www.goodlogo.com/cases/
A list of the most famous logos with an accompanying
description of how they came about.
http://www.goshen.edu/art/ed/Compose.htm
Some Ideas about composition and design elements,
principles, and visual effects.
Topic 4: Logos and Graphics
6