This lecture looks at the study of meaning from symbols and good practice in icon design.

1. 2010
Game Design 2
Lecture 9: Semiotics & Icons
http://www.comu346.com dfarrell@davidlearnsgames.com

2. Reading
• Duarte p44 - p61 (icon stuff)
• Handouts

3. Semiotics
A sign is “something that stands for
something to someone in some capacity”

5. Literacy
• Literacy is normally thought of as the ability
to read and write.
• You can interpret meaning from other
stimuli than just text.
• art, music, film, fashion, advertising
• Many mediums convey more through
images than text

6. Reading & Writing
• You don’t just read, you read or write
something in some way.
• newspaper vs rap
• essays vs fiction
• Each domain has its own rules &
requirements
• These can be considered separate literacies

7. What does this mean?
“The guard dribbled down court, held up
two fingers and passed to the open man.”

8. Semiotic Domains
• Within each domain, all sorts of things can
take on meaning.
• Someone can be musically literate without
knowing how to read notation.
• they are part of a different semiotic
domain

9. Games Literacy

10. Game Domains
• Game literacy is really an umbrella term for
many sub domain literacies.
• FPS game domain expectations of a box
would differ from a platform game

12. Short Cut
• By understanding the meaning of symbols,
the designer can avoid the need to explain
or teach the player what something does.

14. Cultural Semiotics
• Swastika symbol has many meanings but in
western culture the association with
Naziism is overwhelming.
• Possible to cause offence or create meaning
where none intended.

17. • Escapist discussed train
• can watch Brenda’s talk on gdcvault.com

18. Game Tells
• The decisions you make about your game’s
art style convey information to the
potential player.
• This is not ‘art’ this is games design.

20. Sci Fi Corridors
• Sci Fi corridors and doors often have
angled or curved walls.
• In the future, we’ll probably have
rectangular walls but the art design isn’t
trying to be realistic, it’s trying to
communicate.
• Desaturated, gloomy colours are often used
to imply a grim future environment.

22. Association
• People associate and identify themselves
with certain things.
• Blue for boys, pink for girls
• Brands like Apple, FCUK have a lot of
meaning for people.
• The visual style of a game is important.

25. Designing Icons
• Duarte and Gnome Project
• Rule of thumb: If you have to think about an
icon to ‘get it’, the metaphor is too
complex.
http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html

26. Functionally Suggestive
• An icon should suggest its function.
• Icons shouldn’t suggest the name of its function.

27. Good Icon Design
• Avoid text in icons
• text provides no metaphor and requires
more effort to scan than a good icon.
• Don’t rely on information users won’t have
• users should be able to predict outcome

28. • Avoid useless information
• if you have an icon for the game’s help
files, having a pen would mislead -
implying the creation of documents.

29. • Icons which work as silhouettes work
better than those which require detail
• Avoid ambiguity
• if two icons could represent same
function, one should be redesigned

30. Abstract Vs Realistic
• Some game functions may represent abstract
notions and suit an abstract icon.
• Other functions are more specific and
realistic and don’t require a distant metaphor.

31. Abstract
• Abstract icons are usually shapes that
combine to show relationships.

32. Abstract: Flow
• Linear Flow: Flow construction that
illustrates a process with a definite start
and end point.
• The Diagram can follow a straight line or
be a series of steps along a line.

34. Circular Flow
• Flow that represents a continuous process
without an end point.
• Any closed loop shape could work.

36. Divergent and Convergent
• Flow that occurs when two or more
elements either collide or separate out
form each other as if splitting off.

38. Multidirectional
• Flow that expresses complex relationships
- flow charts for instance.
• Often these flows result from a
combination of the preceding types.

40. Abstract: Structure
• Matrices - structures that compare data
with at least two different data sets.
• One set of data can even be a yes / no set
of data as in a checklist.

42. Abstract: Trees
• Structures that indicate clear hierarchy.
• Relationships can be expressed between
any number of objects.

44. Abstract: Layers
• Structures that show elements that stack
or build on each other.
• They can depict both hierarchy and
sequence.

46. Abstract: Cluster
• Overlapping - Clusters that overlap and
indicate shared sets, interest, or
responsibility.
• Sometimes they form a new shape or area
within the overlap.

48. Closure
• Clusters that emerge when shapes combine
to create another shape.
• This principle of Gestalt psychology can be
useful when expressing the idea that “the
sum is greater than the parts.”

50. Enclosed
• Clusters that are enclosed and contain at
least one element that envelops another.
• Grouping in this way indicates which
elements are part of a higher order, and
which stand alone.

52. Linked
• Clusters that are linked as a unifying
element to group items.
• A unifying element links related groups of
items.
• It could be a line, shape, or connector of
any kind.

54. Abstract: Radiate
• From a point radiation occurs when a
single directional “burst” emerges from
either a graphic or point that has a clear
point of origin.

56. With a Core
• creates a parent - child relationship.
• The outer elements connect with a central
element to hold the family together.

58. Without a Core
• Implies that the elements connect through
proximity or mutual attraction.
• They are tied to one central area.

60. Realistic: Pictorial
• Process pictorials are snapshots of how
things work sequentially as a product or
system.

62. Reveal
• An illustration of hidden information shown
by slicing, peeling or otherwise exposing a
thing’s inner workings

64. Direction
• Showing where to go or how to get
somewhere.
• Usually feature a starting location and
destination, and may contain directions.

66. Location
• Showing where something is in the context
of geography, topography, system, or shape.
• These diagrams call attention to a specific
location while providing context.

68. Influence
• Demonstrating the resulting impact of
various interacting elements.

70. Realistic: Displaying Data
• Comparison icons juxtapose two or more
sets of information to illustrate differences.
• Bar graphs, pie charts and other methods
are suitable.

72. Trend
• One parameter of data represents time, to
indicate a trend.
• Change over time is the most important
aspect of these diagrams.

74. Distribution
• Expression of a pattern in seemingly
disparate data.
• Whether a scatter plot, bell curve or other
model, distribution diagrams correlate
singular instances into a larger pattern.