UNIT I INCEPTION OF INFORMATION DESIGN 20CDE09-ID

SEGUE BLUE
KONGU ENGINEERING COLLEGE
(AUTONOMOUS)
DEPARTMENT OF COMPUTER SCIENCE AND DESIGN
20CDE09 - INFORMATION DESIGN
P.GOWSIKRAJA M.E., (Ph.D.,)
Assistant Professor
Department of Computer Science and Design

UNIT I- INCEPTION OF INFORMATION DESIGN
2
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.

3
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?

4
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.’

5
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.’

6
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)

7
8. Case study.

2.History of Information Design
8
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

9
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.

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

12
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.

14
♣ In Egypt a similar system was utilized to communicate,
though, unlike Sumerian script, this did not develop into a
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 races.
The Egyptians did, however, produce illustrated manuscripts
using papyrus, a material similar to paper, that was made
from the pith of the reed-like papyrus plant.

15
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.

16
♣ 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.

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

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

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

21
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.

22
♣ 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.

23
‘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).

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

25
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.

26
♣ 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.

30
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 lines.

31
♣ 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.

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

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

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

35
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.

36
♣ 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.

37
♣ 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.

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

39
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

40
The Microsoft Windows 3.0 Graphical User Interface, 1990

41
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.

42
♣ 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.

2.History of Information Design
44
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

45
8. Case study.

46
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.

47
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).

48
♣ 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.

49
♣ Signage in two languages at Hong Kong airport.
♣ The periodic table

50
8. Case study.

1.4 Types of Information Design
51
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

52
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.

53
♣ The complexity of the data must be an audience
may struggle if too much information is
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.
Anatomical diagram of an eye.

54
Assembly instructions for the IKEA ANSSI barstool.

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

56
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?

57
♣ 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.

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

59
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.

60
♣ 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.

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

1.4 Types of Information Design
63
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

64
8. Case study.

1. Identifying audience, Defining the audience and their needs
65
♣ “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

66
♣ The information designer can use this
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.
The Nokia E7 smartphone, designed to
appeal to a universal audience.

67
♣ 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.
Not everyone will use every function,
even if they are available.

68
3. Semiotics
4. Gender
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.

69
♣ 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.

70
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.

73
♣ 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
technology and high-tech products.
Western cultures, girls are often
encouraged more into the arts and
social sciences
men might be encouraged to put
function first and then emotion.
women might put emotion first and
then function.
levels of technology is high Little lesser than men

74
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.

75
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.

76
♣ 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.

1.5 Identifying audience
77
♣ “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.
3. Semiotics
4. Gender

78
8. Case study.

1.7 Inclusivity and Visual impairment
79
♣ ‘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.

80
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

81
♣ 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.

82
♣ 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.

83
♣ 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.

84
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.

85
♣ 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.

86
♣ 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.

87
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

88
♣ 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.

89
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

90
♣ 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).

91
8. Case study.

1.8 Case study.
92
♣ 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 mock-up of the Typo Lounge area.

93
♣ https://www.idnworld.com/creators/StrangeAttractorsDesign

94
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.

95
♣ Graffti and Tactile interaction

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

99
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.

100
face brush script
text letter slab serif
fat face (marshmallow)

101
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)(WAF-web application Firewall)
♣ Focus: type and rhythm
♣ Components: Wii remotes(Wiimote-game controller device)/ PlayStation USB controllers, webcams, projector,
computer, speakers
Station 2: a. Geometric wall type (ref: Wim Crouwel-geometric shape font, 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.

102
♣ Letterlab Pixel Wall (Station 2).

103
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)

104
Letterlab Type Station (Station 3).

105
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!)

106
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.

107
♣ 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

108
♣ Letterlab Typo Lounge (Station 5).

109
♣ Letterlab Typo Lounge in action.

110
♣ 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.

111
♣ 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.

112
8. Case study.

UNIT I INCEPTION OF INFORMATION DESIGN 20CDE09-ID

More Related Content

Similar to UNIT I INCEPTION OF INFORMATION DESIGN 20CDE09-ID

Similar to UNIT I INCEPTION OF INFORMATION DESIGN 20CDE09-ID (14)

More from GOWSIKRAJA PALANISAMY

More from GOWSIKRAJA PALANISAMY (16)

Recently uploaded

Recently uploaded (20)

UNIT I INCEPTION OF INFORMATION DESIGN 20CDE09-ID