KONGU ENGINEERING COLLEGE

(AUTONOMOUS)
DEPARTMENT OF COMPUTER SCIENCE AND DESIGN

20CDE09
SEGUE BLUE - INFORMATION DESIGN

P.GOWSIKRAJA M.E., (Ph.D.,)

Assistant Professor
Department of Computer Science and Design
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition
2. History of Information Design
3. Need of Information Design
4. Types of Information Design
5. Identifying audience
6. Defining the audience and their needs
7. Inclusivity and Visual impairment
8. Case study.
2
 1. Introduction and Definition
Introduction:

♣ To provide an insight into the subject of information design purpose and various forms, history of
information design context.

♣ Why it is necessary?

♣ How we use it in our daily lives?

♣ The various ways in which it is presented?

♣ How the approach has to be modified depending on the format?

3
Definition of an Information Design:

1. International Institute for Information Design (IIID)

‘Information design is the defining, planning, and shaping of the contents of a message and
the environments in which it is presented, with the intention to satisfy the information needs of
the intended recipients.’

2. Nicholas Felton, Feltron (USA)

‘All graphic design is “information design”. The graphic design is the organization of elements that are
typically capable of communicating independently, like words, photography and illustration.
Information design incorporates the more elemental particles of data, and as a result requires more
interpretation or authorship on the designer’s part for it to speak fluently.’

4
3. Vince Frost, Frost Design (Australia)

‘It is the organization and display of information, messaging or storytelling in an ordered

hierarchy. A journey of information. To present content in a clear, unique and engaging way by
engaging and targeting the human senses through the use of graphic devices such as type,
colour, imagery, time, light, textures and materials etc. to either warn, teach, explain, entertain
or direct.’

4. Dr Alison Barnes (Australia)

‘A graphic designer’s prowess for creating aesthetically pleasing and colourful graphic
representations of statistics or facts. Whilst this may look good, it often leads to a piece of work
that inspires one to look, rather than read. A good information design should engage the reader
both visually and cerebrally, offering something beyond a surface impression.’

5
 UNIT I- INCEPTION OF INFORMATION DESIGN
Introduction and Definition

1. International Institute for Information Design (IIID)

2. Nicholas Felton, Feltron (USA)
3. Vince Frost, Frost Design (Australia)
4. Dr Alison Barnes (Australia)

6
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition
2. History of Information Design
3. Need of Information Design
4. Types of Information Design
5. Identifying audience
6. Defining the audience and their needs
7. Inclusivity and Visual impairment
8. Case study.

7
 2.History of Information Design

1. Cave paintings
2. Early forms of writing
3. Cartography
4. Charts and graphs
5. ISO TYPES [International System of Typographic Picture Education]
6. The Geographically inaccurate map
7. The Graphical User Interface
8. The multi-touch screen resolution

8
2.1 Cave paintings:

♣ The early versions of writing originated in Mesopotamia around 3000 BCE, images had been used as a way
of communicating for thousands of years.

♣ Markings and drawings have been found all over the world, often carved into stones or drawn on rock faces.

♣ The best known of these are the cave paintings of Lascaux and Chauvet in France. Experts consider the
latter to be among the oldest, at around 30,000 years old.

♣ The paintings show images of animals such as deer and bison(similar to cow), as well as lions, bears and
hyenas(like dog) and even birds from Paleolithic times.

♣ Little is known as to why early humans created these images, but they could be interpreted as a means of
recording and educating communities, as well as a form of self-expression.

♣ These images could have had some significance in prehistoric pagan cultures, perhaps used by the local
shaman to contact spirits and influence the weather, find new hunting grounds and heal the sick.

♣ These cave paintings represent the first attempts to convey information visually. They reveal how
individuals communicated to each other about their habits, experiences and lifestyles.
9
Cave painting showing horses, bulls and stags, in the Lascaux caves in southwestern France. The paintings are
around 17,000 years old

10
Sumerian clay tablet, probably from southern Iraq, c. 3100–3000 BCE. The tablet is inscribed with cuneiform, an early form of
writing inscribed with a sharp instrument. It records the allocation of beer.

11
2.2 Early forms of writing

♣ The earliest evidence of writing did not emerge until around 3000 BCE, in the Sumerian culture of
Mesopotamia. This writing system was based on pictographs. It was read from top to bottom and was
constructed on a grid with equal vertical and horizontal spacing.

♣ It is thought that this early version of writing was a system of accounting, as the first written records are
tablets that show commodities listed with accompanying names and numerals organized in columns.

♣ As the writing was inscribed, it would often be smeared as the scribe moved his hand across the writing
surface. Consequently, scribes turned the pictographs on their sides and wrote the rows horizontally to
make the writing easier.

♣ The pictographs became less literal-looking and began to represent ideas rather than physical objects, so a
pictograph of the sun might mean ‘light’ or‘day’.

♣ This in turn led to a form of rebus-style writing (substituting an image for a letter or word), which then
developed into cuneiform – a phonographic writing system in which images represented sounds or
syllables.
12
13
♣ In Egypt a similar system was utilized to communicate, The Egyptians did, however, produce illustrated manuscripts
using papyrus, a material similar to paper, that was made
though, unlike Sumerian script, this did not develop into a from the pith of the reed-like papyrus plant.

more abstract form of writing for almost 3,500 years.

♣ The Egyptians combined both images and words to

communicate information on papyrus scrolls, such as
their religious beliefs on the after life. These are well
documented in the tombs of the pharaohs and also the
religious scrolls found in Egypt.

♣ As a result of this, communication between individuals can

be more precise. Images can be restricting and open to
misinterpretation, whereas words are unmistakable and can
communicate complex ideas.

♣ Writing allows us to communicate to a mass audience and to

document our history down the generations. It also allows us
to exchange important information between cultures and
14
races.
2.3 Cartography

♣ Cartography is the science, skill or work of making maps, demonstrates the first`recognizable
form of information design as we know it today. The ancient Egyptians created maps that
communicated information about the stars.
♣ A star map dating from around 1500 BCE was discovered in the tomb of the great Senmut (a
high ranking official in royal service to Thutmose II) near Luxor. This map represents the
gathering of planets in particular positions in the night sky, thereby referring to a specific point in
time.
♣ The first maps indicating land or territory are harder to identify. One artifact that could be
described as an early land map was found in 1930 at a dig in the ruined city of Ga-Sur at Nuzi
(the modern city of Yorghan Tepe), 200 miles north of the site of Babylon in modern-day Iraq.
♣ The map is drawn with cuneiform characters and symbols inscribed on a small clay tablet
thought to date from 2500–2300 BCE.

15
♣ It represents a district bounded by hills or mountains and bisected by water. It is interesting to

note that the hills or mountains are shown as overlapping semicircles – a device used by

mapmakers and illustrators for centuries afterwards.

♣ The 2nd century CE, mapmaking had become more sophisticated. Ptolemy, a Roman citizen of

Egypt, was an astronomer and mathematician who wrote Geographia, or The Geography.

♣ This information about map projections on the world’s geography between 127 and 150 CE.

♣ Ptolemy was the first recorded person to assign coordinates to geographic features and

imposed a grid system on a map, using the same grid system for the entire globe.

♣ find our way from one place to another with such accuracy.

16
Facsimile painting by Charles K. Wilkinson of the Astronomical Ceiling in the tomb of Senmut, near
Luxor, Egypt, c. 1473–1458 BCE.

17
Facsimile painting by
Charles K. Wilkinson of the
Astronomical Ceiling in the
tomb of Senmut, near Luxor,
Egypt, c. 1473–1458 BCE.

18
Cast of a Babylonian clay tablet inscribed with a map, c. 2500–2300 BCE, from
Ga-Sur, Mesopotamia (modern Iraq).

19
20
 2.4 Charts and graphs:

♣ The bar charts and graphs seem such an obvious way of presenting statistical data that it

is easy to think anyone could have created them.

♣ Scottish economist and engineer William Playfair (1759–1823) is often credited with

the invention of bar, line and pie charts.

♣ Large amounts of statistical data were available in the 18th century, but this was always

presented in printed tabular form. Playfair had the idea of presenting data in illustrative

form.

♣ The bar chart first appeared in his Commercial and Political Atlas, published in 1786. Atlas

presented information on imports and exports from different countries over the years.
21
♣ The reader could see the relationship between the various economic factors in
quantitative graphical data. It was the first step towards the visualization of data.
♣ This clever way of presenting data enables the eye to perceive instantly what the
brain would take such longer to deduce from a table of numbers.
♣ graphs work so well for scientists, businesspeople and others. The charts allow the
numbers to speak to everyone in the same way.
♣ They transcend the boundaries of culture, language and race: a Russian person can
understand the same graph just as well as a French person.
♣ Graphs make information easy to decode and accessible for a much wider
audience.

22
‘Exports and Imports of Scotland to and from different parts for one Year from Christmas 1780 to Christmas 1781’, bar chart from
William Playfair’s The Commercial and Political Atlas (1786).

23
‘Exports and
Imports to and
from Denmark
and Norway
from 1700 to
1780’, graph
from William
Playfair’s The
Commercial and
Political Atlas
(1786).

24
2.5 ISO TYPES [International System of Typographic Picture Education]

♣ ISOTYPEs (short for International System of Typographic Picture Education) are an attempt
to communicate information pictographically, through a standard visual language.
♣ They were created by Vienna-born political economist Otto Neurath (1882–1945) between the
1920s and 1940s. Following the First World War (1914–1918), Neurath felt it was vital to
communicate important social and economic issues clearly.
♣ He is quoted as saying ‘words make divisions, pictures make connections’.
♣ A system of elementary pictographs was developed, completely void of decoration, in order to
present complicated data visually.

25
♣ The pictographs were designed to represent subtle qualities within the data, and challenges
such as how to represent an emigrant or an unemployed man through a pictograph had to be
overcome.
♣ Along with scientist and mathematician Marie Reidermeister (later his wife), Neurath converted

data from verbal and numerical form into visual layouts.

♣ Inspired by the artistic movement of Constructivism and the avant-garde New Typography

movement of the 1920s and 1930s, German artist Gerd Arntz (1900–1988)
designed most of these pictographs; by 1940 there were more than 1,000.
♣ Simplicity was the key: a strict set of rules governed the pictographs to ensure they were
consistent in their make-up and application.
♣ These specified the use of text, colour and positioning.

26
27
28
29
 2.6 The Geographically inaccurate map:

♣ Most people are familiar with the iconic London Underground map,

designed by English engineer Henry C. Beck (1902–1974) in 1933.

♣ It does not take the form of a traditional, geographically correct, map. It

presents a diagrammatic representation of the Underground accurate

distances and realism are dispensed with in favour of clarity and usability.

♣ The result is a clear map drawn on a grid of horizontals, verticals and 45-

degree diagonals, with bright colour-coding to identify the different

30 lines.
♣ Beck was a draughtsman who had worked on electrical circuits: the

combination of circuit diagram and map was his idea.

♣ London Underground’s publicity department was initially sceptical

about Beck’s design, but it printed a trial run and asked the public for

feedback.

♣ The new map was found to be easy to read and functional, so it was

implemented throughout the Underground system.

♣ It is now a design standard and has inspired subway and railway maps

across the world.

31
Henry C. Beck’s map of the London Underground, 1933.

32
 The New York Subway map, designed by Massimo Vignelli, 1972

33
 Map of the Paris Metro, based on Beck’s London Underground map.

34
 2.7 The Graphical User Interface:

♣ It is the representation of information and actions available to a user through

graphical icons and visual indicators.

♣ The actions are performed through direct manipulation of the graphical elements,

rather than typed commands via text.

♣ It is used to complicated computer code to control these devices.

♣ The evolution of computers began back in the 1950s, but the home computer, or

personal computer, as we know it today, was developed in the 1970s.

35
♣ Xerox developed the Xerox Alto, the first personal computer prototype, in 1973.
♣ It used a keyboard as an input device, a mouse as a pointing device and a video
screen as a viewing device.
♣ In 1981, the introduction of Xerox Star brought in the first GUI.
♣ Graphical icons were used to initiate operations and control the computer rather
than typing in long lines of programming code.
♣ The machine was not developed beyond the prototype stage, as it was thought to be
too expensive to be marketable.
♣ A young Steve Jobs (CEO of Apple Inc. until his death in 2011) had been to a
presentation of the Xerox Star system and decided to build a GUI of his own.

36
♣ The result was the Apple Macintosh, which launched in 1984. The interface used a
desktop metaphor, with files, folders and even a wastebasket or trash can.
♣ It featured overlapping windows to separate operations.
♣ The system also includes a keyboard and mouse as input devices.
♣ Since the GUI was embedded into the operating system, all the application software
employed the same methods to perform tasks, making it easy to learn new
pieces of software.
♣ In 1990, Microsoft introduced the Windows operating system, which used the same
metaphors as the Macintosh.
♣ It became the standard operating system for the personal computer market.

37
The first personal computer prototype, the Xerox Alto, 1973.

38
The Lisa, made by Apple Computers, 1983, was the first personal computer available to the consumer
that featured a detachable keyboard, mouse and Graphical User Interface

39
The Microsoft Windows 3.0 Graphical User Interface, 1990

40
 2.8 The multi-touch screen resolution:

♣ A touch screen is an electronic display that is sensitive to the touch of a stylus or finger

within the display area.

♣ E.A. Johnson of the Royal Radar Establishment in the UK is credited with the invention

of the first touch screen in 1965.

♣ The touch screen enables the user to interact with the display directly without the need for a

mouse or touchpad.

♣ Multi-touch technology allows the device to recognize two or more points of contact with the

screen.

♣ When an object or finger touches the surface, sensors detect the disruption of an electrical

field. This information is relayed to the software, which responds to the gesture accordingly.
41
♣ Interactive designer Mike Matas from the USA has commented, ‘If you want to do something

(on a computer) you should just be able to reach out your hand and do it, no buttons and no

computer interface required.

♣ Many companies utilize multi-touch screen technology for their smartphones and tablets.

♣ Devices such as the Apple iPhone and iPad were designed to be used with a finger, so you

control everything with a tap, drag, swipe, pinch, flick or twist of the fingers.

♣ This technology has allowed electronic devices and interfaces to become more accessible and

instinctive.

♣ They rely less on complicated menus and keyboards and as a result use fewer moving parts.

42
43
 2.History of Information Design

1. Cave paintings
2. Early forms of writing
3. Cartography
4. Charts and graphs
5. ISO TYPES [International System of Typographic Picture Education]
6. The Geographically inaccurate map
7. The Graphical User Interface
8. The multi-touch screen resolution

44
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition
2. History of Information Design
3. Need of Information Design
4. Types of Information Design
5. Identifying audience
6. Defining the audience and their needs
7. Inclusivity and Visual impairment
8. Case study.

45
 3. Need of Information Design
Why is information design necessary?
➔ Information plays a large part in our daily lives.
➔ Ex: Remote control for our TV to the interface on our mobile phone and the webpage we view.
Try to imagine a world where information design didn’t exist.
➔ Taking a simple bus or rail journey would be quite difficult without it.
◆ How would you know which bus or train to catch?
◆ Where to catch it? and what time it departed or arrived at its destination?
◆ How would the driver know where he was going without the use of directional road
signs? How would you know when to turn and in which direction?
◆ Even simple decisions when to stop at a junction would be difficult without the traffic-
light system.
◆ Crossing a busy road could prove difficult without simple aids such as the pedestrian
crossing.
46
Pedestrian crossing light from the
former German Democratic
Republic.
The UK road and motorway signage system was designed
1957–1967 by Jock Kinneir and Margaret Calvert. It has
since been adopted around the world, for example at Umm
Suqeim, Dubai, UAE (bottom).
47
♣ Simple inventions like warning symbols and colour-coding allow users to navigate and use
machines safely.

♣ Clear instructions are given on what (or what not) to do. Consider travelling to a foreign country
where your native language is not spoken.

♣ Example:
♣ At the airport, how do you know where to find the departure gate or retrieve your luggage?
How do you find the taxi rank or bureau de change?
♣ It provides clear instructions, facts or data to an audience in a visual language that can
transcend international boundaries and bring people together.
♣ It helps us to learn complex information, such as the Periodic Table. It can make the
complicated very simple and can save time and effort in the transmission.

48
♣ Signage in two languages at Hong Kong airport.

♣ The periodic table

49
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition

2. History of Information Design

3. Need of Information Design

4. Types of Information Design

5. Identifying audience

6. Defining the audience and their needs

7. Inclusivity and Visual impairment

8. Case study.

50
 1.4 Types of Information Design

This is not a definitive list, and some people may use other categorizations.
Each category takes a different approach to the presentation of data.

1. Print-based information design

2. Interactive information design
3. Environmental information design

51
4.1 Print-based information design

♣ Example of print-based design, what would it be? Something from a textbook at school; a

biological diagram of an eye, perhaps? Information is presented to us all the time, and in a
variety of ways;

♣ Consider the utility bill that tells you how much electricity you have used, or the instructional

diagrams that come with flat-pack furniture.

♣ Information is everywhere, and we are not always aware of how much thought has gone into its
visualization.

♣ A newspaper or magazine article.

♣ The user does not interact with it in any way other than to decode the visual data presented

to gain the facts or figures more quickly than by reading long passages of explanatory

text.
52
♣ The complexity of the data must be an audience

may struggle if too much information is Anatomical diagram of an eye.

presented in one piece.

♣ This may mean that a key (sometimes called a

legend), such as colour-coding or symbolic

pictograms, is required to be able to decipher the
material.

♣ Example of this is the 2010 UK election map

designed by Mark Bryson, which shows via colour
coding the number of votes cast for different
political parties across the UK.

53
Assembly instructions for the IKEA ANSSI barstool.

54
♣ Mark Bryson’s map for The Guardian newspaper ♣ The Sacramento Municipal Utility District bill,
showing results for the 2010 UK general election. designed by Opower, details the addressee’s
energy

55
4.2 Interactive information design:

♣ The computer and the internet have revolutionized how we receive and interact with data.

♣ Interactive information design requires a very different approach than print. Since the user is
active in making choices, those choices need to be considered and presented.

♣ It is not a case of presenting a static image on screen. The user needs to be involved or immersed in
the information. This often involves filtering data to show particular facts, figures or statistics.

♣ The data or information is measured or compared.

♣ The navigation of this information is very important: the options available have to be clear and
should lead to some meaningful resolution.

♣ Think about the interface of your cable or terrestrial TV supplier. What is showing at the moment?
What will be next?

♣ Can I set a reminder to watch a transmission?

♣ How do I record a particular programme at a certain time?

56
♣ Paul Farrington of Studio Tonne in
the UK has created website
interfaces for numerous clients,
including the navigational
interface for record label 4AD’s e-
commerce site.

♣ The decisions made on the tool

took the user to specific pages
within the site.

57
Examples of interactive information design include reading a
magazine on an iPad and using an in-car navigation system.

58
4.3 Environmental information design:

The Signage is probably the most people think of when talking about environmental information design,
although wayfinding, exhibition design and large-scale installations could also be included in this category.

♣ American urban planner Kevin Lynch first sed the term ‘wayfinding’ in his 1960 book Image of the City.

He used it to describe navigating through a physical environment using visual cues

to orient oneself. Signage along with lighting and three-dimensional objects.

♣ The function of wayfinding is to inform an audience of where they need to go, how to find it? what to do
once they have arrived.

♣ The designer must be aware of the physical limitations of an environment and of the needs of the user.

♣ They may have to analyze the space and make informed choices based on how real people use the area.

Example of wayfinding and signage in practice is provided in the case study at the Design Museum
Holon, Tel Aviv.

59
♣ The challenge with exhibition design is how you communicate important facts or data to a
large audience in a specific site.

♣ The designer may have to think about the distance from which a project is viewed, where it is
positioned, even the ambient lighting conditions within that physical environment to ensure
that it is legible.

♣ It is possible to use multiple platforms or communicate, choosing print for some elements
and interactive for others. This may depend on the amount of detail required and how the
presentation of the information aids comprehension.

Example: A piece about kinetic energy ill use movement to tell the audience about it.

♣ The main thing of the environmental information design is visibility and context.

60
♣ Dot Braille Watches: Embrace Accessibility and Smart Technology with DOT's Smart Watch

61
Smart watch

62
 1.4 Types of Information Design

This is not a definitive list, and some people may use other categorizations.
Each category takes a different approach to the presentation of data.

1. Print-based information design

2. Interactive information design
3. Environmental information design

63
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition

2. History of Information Design

3. Need of Information Design

4. Types of Information Design

5. Identifying audience

6. Defining the audience and their needs

7. Inclusivity and Visual impairment

8. Case study.

64
 1. Identifying audience, Defining the audience and their needs

♣ “Usability is the ability of an object or system to be used with satisfaction by the people in the environment and
context the object or system is intended for.”

-Ronnie Lipton, writer on information design

♣ Designers need to be able to identify the audience or group of people to whom they are communicating.

♣ Audiences can be defined by a number of factors such as gender, race, age, occupation or income.

1. Cultural considerations

2. Ethnography and personas

3. Semiotics

4. Gender

5. Age and familiarity with technology

6. One Laptop Per Child project

65
 The Nokia E7 smartphone, designed to
♣ The information designer can use this
appeal to a universal audience.
material to understand the needs and
requirements of a specific audience
and adjust their designs accordingly.

♣ An audience for a product or service

can be very general.

Example: Korean designer Seon-Keun

Park has proposed a concept for a Braille
phone for visually impaired users.

66
♣ The Doro PhoneEasy® 612, designed for seniors.
♣ The Firefly mobile phone,
designed for children.
A simple smartphone
has a multitude of
functions such as phone,
text, email, camera,
maps, GPS, music and
alarm.
The ability to use all of
these functions depends
on the kind of user and
their level of proficiency
with the technology. 67
 1. Cultural considerations

2. Ethnography and personas

3. Semiotics

4. Gender

5. Age and familiarity with technology

6. One Laptop Per Child project

1. Cultural considerations:

♣ Cultural backgrounds and population stereotypes can influence the way in which an
audience interacts with a product or service.

♣ An example of this is a basic electrical switch. In the UK, a switch tends to be flicked down to
turn something on and up to turn it off, whereas in the USA the opposite is the case.

68
2. Ethnography and personas

♣ Ethnography is the anthropological study of human behavior when dealing with products or
services. Many companies employ ethnographic research when designing for specific audiences.

♣ Don Tunstall, PhD, states ‘Ethnography is a philosophical approach to human knowledge

that says it’s best to understand people based on their own categories of thought,
behaviour and actions.’

♣ It is expensive and time consuming,

♣ In constructing a fictitious character who represents a whole group or section of society.

♣ The character is given a name, and a description of their attitudes, behaviours, environmental
conditions, goals, personal details and skill sets is built up.

69
3. Semiotics: The word ‘semiotics’ comes from the Greek word semeiotikos, which means
‘interpreter of signs’. Signing is vital to human existence because it underlies all forms of
communication. Signs are amazingly diverse.

They include gestures, facial expressions, speech, slogans, graffiti, commercials, medical symptoms,
marketing, music, body language, drawings, paintings, poetry, design, film, Morse code, clothes, food,
rituals and primitive symbols.

70
71
72
♣ Gender: British cognitive psychologists Diane McGuinness and John Symonds in 1977, it was
found that male babies responded more to mechanical objects than to faces; female babies had
the opposite reaction.

♣ This experiment demonstrated that younger males and females differed in their preferences for
objects and people.

MEN WOMEN
males being more confident with Western cultures, girls are often
technology and high-tech products. encouraged more into the arts and
social sciences
men might be encouraged to put women might put emotion first and
function first and then emotion. then function.
levels of technology is high Little lesser than men
73
Age and familiarity with technology:

♣ Age can be a huge consideration when deciding what kind of technology should be used to
present data.

♣ Different generations have grown up with different forms of technology.

♣ The younger generation are computer-literate from an early age and so feel comfortable with
technology, but many seniors do not have the same level of familiarity or proficiency.

♣ It was employed, which made the equipment easy to use and the audience less fearful of the
technology.

♣ Conversely, a younger generation often embrace new forms of technology and equipment and are
happy to learn different techniques to retrieve information; they have less fear of the equipment.

74
One Laptop Per Child project: A designing an interface appropriate for a specific audience is design
agency Pentagram’s work with the One Laptop Per Child project.

♣ This initiative aims to provide durable, low-power $100 laptops to children all over the world.

♣ The goal is for children in developing countries to learn about new technology.

♣ The laptop’s interface has to be universal and so uses an icon-based ‘zoom’ system to
communicate. This interface, called Sugar, was developed by Lisa Strausfeld, Christian Marc
Schmidt and Takaaki Okada.

♣ It is easy for children to use and has four main categories to navigate: Home, Friends,
Neighborhood and Activity. All the functions are contained within these categories.

♣ Home shows the user’s activities, such as drawings, texts and photographs. The project has
been running since 2007, and so far 2million children have received laptops.

75
♣ The XO-3 tablet mimics the XO laptop and has a multi-touch display, which can
pick up pen and brush strokes as well as gestures. The screen is readable in
sunlight.

76
 1.5 Identifying audience

♣ “Usability is the ability of an object or system to be used with satisfaction by the people in the
environment and context the object or system is intended for.”

-Ronnie Lipton, writer on information design

♣ Designers need to be able to identify the audience or group of people to whom they are
communicating.

♣ Audiences can be defined by a number of factors such as gender, race, age, occupation or income.

1. Cultural considerations

2. Ethnography and personas

3. Semiotics

4. Gender

5. Age and familiarity with technology

77
6. One Laptop Per Child project
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition

2. History of Information Design

3. Need of Information Design

4. Types of Information Design

5. Identifying audience

6. Defining the audience and their needs

7. Inclusivity and Visual impairment

8. Case study.

78
 1.7 Inclusivity and Visual impairment

♣ ‘The design of mainstream products and/or services that are accessible to/and usable by, as
many people as reasonably possible … without the need for special adaptation or specialized
design.’

♣ it understands that people are not either disabled or fully abled.

Example: In 2009–2010, the British government commissioned a Family Resources Survey to provide statistics
about the typical British household.

♣ The survey included Statistics from the survey show that within the categories of cognitive, sensory and
motor abilities, 6.8 percent of the population have less than full ability in one or more.

♣ This might include visual impairment, auditory impairment, dyslexia(word blindness), memory loss,
mobility and other cognitive functions such as communication.

♣ Out of a population of 61.8 million people, about 10 million people have an impairment of some sort.
there are guidelines available on the use of typography, colour combinations and scale of visual elements
that may result in a design that works well for a greater percentage of the audience.
79
Visual impairment:

In the UK, more than 1 million people are registered as blind or partially sighted. Almost
700,000 people have a visual impairment, which makes it difficult for them to read standard-
size print.

♣ Field of view

♣ Technical issues relating to visual impairment

♣ Contrast

♣ Designing for visual impairment

80
♣ There are various types of visual impairment:

1. colour blindness or loss of peripheral vision.

2. Our eyesight deteriorates as we age, and older eyes may have difficulty differentiating colour,
especially in low lighting conditions.

An estimated 10 percent of males suffer from some sort of colour blindness, and around 1 percent
of women. It is a hereditary condition caused by a reduced number of a particular type of visual
receptor at the back of the eye.

Shinobu Ishihara colourblind test(1917, Dr Shinobu Ishihara, a professor at the University of

Tokyo) - it uses coloured dots placed in a pattern to present a numeral. Certain combinations are
extremely difficult for people with particular types of colour blindness to read.

Most forms of colour blindness involve difficulty differentiating between either red and blue or blue
and yellow, although in some cases colour cannot be distinguished at all.

81
♣ The basic rule is to use contrast to maximum effect. Make sure that there is a large enough tonal
difference between colours to be able to distinguish them from one another.

The Shinobu Ishihara tests for colour blindness.

82
♣ The four colour bars on the left demonstrate a strong contrast between the
background colour and the text. The bars on the right show a weak contrast,
making illegibility more likely.

83
Field of view: To group relevant chunks of information together. Certain eye conditions can lead to a
loss of peripheral vision, meaning any elements not in the central portion of our field of vision
are obscured.

Technical issues relating to visual impairment: These could include choices of colour, scale and
weight within a design solution;

Example, particular colour combinations can be very difficult for anyone who is colour blind to
distinguish.

There is software available that designers can employ to mimic some of these visual disturbances
to assess how successful a piece of design is to someone with less than 20:20 vision.

Braille may have to be incorporated into the design in instances such as medical packaging or
wayfinding.

84
♣ Reconstructions of the field of view that is seen by someone with a loss of peripheral vision and by
someone with a loss of the central field of vision.

85
♣ Pasamano is an award-winning wayfinding product. It
has been designed to assist blind and visually impaired
visitors, as well as the sighted, by Esteban Marino.

♣ The signage element was created for use on handrails on

stairs and walkways.

♣ there is a strong contrast between the matt aluminium

and the black background, which helps the viewer to
distinguish between the various elements.

♣ The information is displayed in Braille, along with clear

and legible numerals and graphic icons such as arrows
and pictographs.

♣ It provides clear, intuitive signposting for visually

impaired visitors to navigate and indicate emergency
escape routes in unfamiliar environments with ease.
86
Contrast: Contrast is a very important element when designing with visual impairment in mind.

♣ It is a simple exercise, but squinting your eyes while viewing a design will let you see how close the
tonal qualities are of differing colours.

♣ If they all look the same shade of grey, the tone is too similar.

♣ If you were colour blind, this may result in you not being able to distinguish one colour from another.

♣ This could be problematic if you are using typography on a background colour, or need to tell one
coloured line from another on a subway map.

Example. When designing something to be viewed or read from a distance, don’t just guess what would be
an appropriate size.

♣ We get a false sense of scale when designing on a computer screen; zooming in and out means you
don’t get a true representation of the final artwork.

♣ Print out sections of type at actual size in draft form and pin them up to mimic real scale and distance.
This will help you decide on suitable sizes and weights to use within designs
87
♣ Try to avoid fonts that have extreme contrasts within their stroke weight, such as
♣ Bodoni or Didone: the hairline serifs and bold strokes make it difficult to read small sizes.
♣ Screen resolution may mean that certain typefaces have to be discounted, as they cannot be
rendered accurately at small sizes on 72dpi screens.
♣ In this instance it may be preferable to use fonts specially designed for the screen, such as
Verdana and Georgia.
♣ When designing, avoid using light type on a light background.

88
Designing for visual impairment

♣ Think about which colours you use to convey information. Perhaps use complementary methods
such as shape and typography to help differentiate them.

♣ Consider using colour contrast to help make things stand out, but ensure there is also sufficient

brightness contrast.

♣ Ensure a design is still legible when it is converted to greyscale.

♣ Be careful to position elements within a design so that anyone with a loss of peripheral vision can
still see all the components

89
♣ A piece of software called Color
Oracle is available to help those
designing for the visually impaired by
replicating what people with common
colour vision impairments will see.

♣ These colour bars show the original

colour scheme and then the results
for the conditions deuteranopia
(common colour blindness with
difficulty distinguishing between red
and green),

♣ protanopia (difficulty distinguishing

between red and black)
tritanopia (a rare form of colour blindness where the sufferer has difficulty
distinguishing between blue and yellow).

90
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition

2. History of Information Design

3. Need of Information Design

4. Types of Information Design

5. Identifying audience

6. Defining the audience and their needs

7. Inclusivity and Visual impairment

8. Case study.

91
 1.8 Case study.

♣ Designing for a target audience – children Project: Letterlab, a typographic exhibition for 6-to 13-year-
olds, Graphic Design Museum, Breda, The Netherlands, October 2009–January 2011

♣ 2D, 3D, multi-media and type design: Catelijne van Middelkoop and Ryan Pescatore Frisk of Strange
Attractors, Rotterdam and New York.

♣ A computer-generated schematic showing details and measurements for wall graphics along with

a cardboard
92
mock-up of the Typo Lounge area.
Approach: To begin the initial inquiry, the designers asked a simple question:

How do you make children experience the history and creative possibilities of typography?

♣ they wanted the exhibition experience to be so inviting and engaging that children felt compelled
to interact with it.

♣ If the exhibition like wonder and enjoyment of play, then interaction would occur naturally.

♣ The children benefited from an educational experience and gave careful thought to the position
and order in which each of the display stations encountered.

♣ They did not want the target audience to be reminded of classroom-based instruction, or worse, of
homework!

♣ They structured an active curriculum for children as an engaging experiential journey using
digital and analogue media, colours, sounds, and tactile interaction that utilized
contemporary memes such as text messaging, touch screens and graffiti.

93
A series of images demonstrating Strange Attractors’ process of developing Letterlab from technical drawings and screen
mock-ups to maquettes and final visuals.

94
95
Development:

Design problem to solve/goal:

How to make children experience the history and creative possibilities of typography.

Note 1: Use a selection of 5 different typefaces for the entire exhibition!

1 pixel face + 1 brush script + 1 text letter + 1 slab serif + 1 fat face (marshmallowy)

Note 2: Combine high-and low-tech where/when possible! Wood + electronics + screen printing +
laser-cutting Sketches (thoughts on the interior): An exhibition space like an emptied-out toy box,
spread out over and sunk into the floor, engaging yet surprisingly organized and full of hidden facts.

Thoughts: Five stations made out of screen-printed plywood, covered with type, child proportions yet
accentuating the height of the space Pixel facts (example: the first Nokia consumer phone had a
display of 84 x 48 pixels) Translucent PVC cubes (c. 10 x 10cm) LED lights, Micro-controllers.

96
Historical references: Design for a newspaper stand by Herbert Bayer (1924)

♣ Kiosk by Michel de Klerk (c. 1919–1923)

♣ Dylaby (Stedelijk Museum) by Daniel Spoerri (1961)

Timeline: From sounds and shapes to letterforms and compositions, gaining meaning, becoming an
experience! (A brief history of typography)

Station 1: WAF! WAT? W! (Shapes and sounds make letters)

♣ Focus: type and rhythm

♣ Components: Wii remotes/ PlayStation USB controllers, webcams, projector, computer, speakers

Station 2: a. Geometric wall type (ref: Wim Crouwel, geometric shapes with rare earth magnets)

♣ b. Drawing letters with light (drawing letters with LED sticks)

Focus: type and form

Components: geometric building blocks, rare earth magnets, USB camera, LED light sticks, computer
and screen. 97
♣ Letterlab Pixel Wall (Station 2).

98
Station 3: ‘Press here!’ (based on ‘Real Design’: Wijdeveld, Crouwel, etc.)

♣ a. From analogue to digital (no overlapping elements)

♣ b. No more boundaries (touch screen enables overlap)

♣ Focus: type and composition

♣ Components: RFID tags and reader, laser-cut and screen-printed wood blocks, interchangeable

grids, computer, projector, touch screen (use abstractions of original printing studio) ‘Gutenberg

press’ ‘Letterkast’ Base components on originals by Wijdeveld (1931)

99
Letterlab Type Station (Station 3).

100
Station 4: A play with the meaning of type

♣ Focus: type and meaning

♣ Components: computer, projector, green screen, cams

♣ Station: triplex, vinyl (pixels on floor), chroma key green paint

Station 5: Typo lounge

♣ Focus: type and overview At this station, a movie will loop through the history of typography,
combining aspects from all exhibition stations and providing a comprehensive overview. There is
also room for a speaker (teacher, guide) to step on to a stage.

♣ Components: giant foam letter and pixel seats, projector/flat-screen TV, DVD player

♣ Station: vinyl (pixels, half-tone patterns and splashes on floor and wall), triplex, foam

♣ Window front thought: A set of monitors displaying the action inside triggering children outside to
come in and play! (Windows entirely covered with vinyl except for peepholes at kids’ height... Psssst!)
101
Outcome:

Letterlab was all about letters in the broadest sense of the word. In this exhibition, children aged 6 to
13 and their parents discovered that the letters you mostly encounter in books.

Letterlab made children realize that the letters we use for reading have a history of development, that
they are designed, and that the way in which that takes place determines how the letter functions.

The exhibition let the target group view letters from different perspectives:
Letter and sound: the pronunciation of a letter could very well be closely associated with the shape
of the letter. How does that work?

Inside the ‘theatre’ children could play a custom designed and programmed game. Each key launched
a different sound as well as a corresponding letter or shape onto the game field.

Letter and shape: a letter consists of several components, or several forms. That is how you get
different fonts. Appropriately, five new fonts were created for Letterlab.

102
♣ The designers also designed a giant desktop for the exhibition space, including menu, files, folders
and pop-up windows. Inside the windows, visitors could manually leave their own pixel message.
An example of a pixel font could be found on the desktop as well

Typographic specification
sheet for the project

103
♣ Letterlab Typo Lounge (Station 5).

104
♣ Letterlab Typo Lounge in action.

105
♣ Letter and composition: a letter becomes part of a composition; on a poster or in a book or
newspaper. The composition is determined by the positioning of the letter in the space.

♣ In Composition, a large letter-shaped printing press offered children the opportunity to discover
how newspapers are put together.

♣ Large blocks with pre- set texts such as headlines, along with individual letters, formed the toolkit
for creating your own Letterlab Courant.

♣ A webcam recorded the manual labour and displayed the results on one of two screens mounted
on the giant H.

♣ The second display was connected to a touch screen on the other side of the press. Using similar
design elements but now experiencing the (dis)advantages of the computer, a comparison could be
made between two different time periods in modern typography: the analogue and the digital era.

♣ Letter and meaning: a letter, several letters (a word), and even more letters (a sentence) give
meaning.
106
♣ A text can be written through the meaning of the letters. Behind the theatre a dark alley was
created in which children could use light graffiti to leave their name or tag on the wall.

♣ Stencils were also supplied, providing pre-set positive words such as: ‘good’, ‘hope’, ‘beautiful’ and
‘nice’.

♣ Letterlab was a laboratory where children could find out for themselves how various perspectives
of the letter work.

♣ Discovery assignments were linked to each sub-theme. The assignments were layered and diverse,
so that children of various ages could feel challenged by them.

♣ One of the corners of the exhibition space was given over to a lounge area where visitors could
watch a custom-crafted film that provided an abstract overview of the history of typography.

♣ The film also showed how all the stations in the exhibition are related to one another.

♣ At the European Design Awards in 2010 the Letterlab project was awarded the Gold in Brand
Implementation and the Jury Prize.
107
 UNIT I- INCEPTION OF INFORMATION DESIGN
1. Introduction and Definition

2. History of Information Design

3. Need of Information Design

4. Types of Information Design

5. Identifying audience

6. Defining the audience and their needs

7. Inclusivity and Visual impairment

8. Case study.

108