Game Design 2: Lecture 8 - Semiotics and Icon Design
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Game Design 2: Lecture 8 - Semiotics and Icon Design

Uploaded on

This talk looks at how an understanding of meaning can help us communicate in game design. It also looks at some guidelines for good icon design.

This talk looks at how an understanding of meaning can help us communicate in game design. It also looks at some guidelines for good icon design.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 837 827 9 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Talk about how you read from non-text Conveying more through images than text: Multimodal texts include: comics > 1/2 the story posters & teeshirts > more about defining one’s identity than conveying the literal info advertisements > brands want you to read meaning into their symbolism associate chocolate or beer with sports This is how brands can get around their being unhealthy - yes the TEXT might read “this will make you fat” - but the rest of the meaning of the piece screams “mars bars are healthy!” the text often says something different to the imagery You need to combine the two (or more) types of information you are receiving to get the full message.
  • This leads to this concept - you don’t just read... context... The act of absorbing info from a news paper - totally differs from a hip hop song. Essays and fiction have different kinds of truth but can both be truthful. You need to understand the context of consumption - and each domain has its own rules and requirements.
  • So what does this mean? Everyone knows what all the WORDS mean. Basketball - but to know that, you need to already understand the domain. What does ‘two fingers’ mean? Swearing? The same text means something different depending on your domain knowledge.
  • Each type of music can be considered as a separate sub domain - each is a semiotic domain. Musical literacy is DIFFERENT in classical music and in hip hop and in rock guitar etc..
  • So here is a screenshot from the e-Bug game. The wee soap things spin. Everything else in this screen (except avatar) is static. What does soap do? What keys would you use? What direction should you try to go? Timer? Score? Expectations? Left to right is traditionally western - but is a gaming convention (mario, little big planet) Space bar vs CTRL Box?
  • After discussing this, move to next slide
  • How absurd is it that we have this trope of ammo crates? The sub domain literacy makes this acceptable.
  • When a standard reaches acceptance, designers no longer need to worry as much about communication. They can assume things about their audience (if they believe the audience has this literacy) So - Red barrels blowing up (jon) So - what is necessary to communicate health pack? (ask them)
  • all it takes is the cross! not red or white L4D hasw red boxes wtih pills in them. GTA has health boxes - even though it’s a supposedly real-world game. __ Not always about ‘real world in a game’ - crate & health packs are not ‘realism’ - symbols communicate a function.
  • Yes, a Swastika has special meaning in certain eastern religions - hinduism, buddhism, janism - but if your audience has a different cultural understanding, you risk offence!
  • Puerto Rico Background... controversy... probably not a mistake that the ‘workers’ were brown. But they didn’t want to say that and it caused huge debate.
  • Brenda Brathwaite - 20 years in industry - Jagged Alliance... Wizardry... now social games for Loot Drop with Romero. She co-authored the board game book with Ian Shreiber Train... semotic meaning - Kristalnacht typewriter people who play the game twice often find themselves trying to rules-lawyer out of allowing the game to progress...
  • Chocolate bars aimed at boys and girls Lemonade story
  • Mis en Scene - the scene dressing communicates. You REALLY think in the future, we won’t have rectangular corridors?
  • So here is a shot from Quake 4 Angled Corridors desaturated colour scheme this isn’t just “art” this is communication
  • pink used to be for boys programming used to be for girls people wear teeshirts to say things about themselves
  • Bejewelled is one of the most successful games of all time. 25 million sold 150 million downloads (these numbers are 3 years old!)
  • Contrast this with bejewelled - same game mechanics - but it communicates in a very different way. Your expectations are significantly different.
  • The ‘save’ icon could lose its meaning in the future - my wife’s pupils know it is a save icon but they’ve never seen a floppy disk. Quick time is clever. Firefox represents name - transmission is a bittorrent tool. VLC is a bloody traffic cone!!!
  • The 5th icon is of a shield. The penultimate icon is of a clenched fist. One refers to one’s army. The other to victory conditions. However, the player could confuse the two - the fist could certain pertain to fighting.
  • What follows from here is a list of concepts and some suggestions for ways to represent them. These are difficult concepts to icon and would make a good starting point. There are MANY icons here - you should check out Duarte for them as a reference.


  • 1. Game Design 2
    • Lecture 8: Semiotics & Icons [email_address] 2011
  • 2. Reading
    • Duarte p44 - p61 (icon stuff)
    • These two short articles:
  • 3. Semiotics A sign is “something that stands for something to someone in some capacity”
  • 4.  
  • 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
  • 11.  
  • 12. Short Cut
    • By understanding the meaning of symbols, the designer can avoid the need to explain or teach the player what something does.
  • 13.  
  • 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.
  • 15.  
  • 16.  
  • 17.
    • Escapist discussed train
    • can watch Brenda Brathwaite’s talk on
  • 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.
  • 19.  
  • 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.
  • 21.  
  • 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.
  • 23.  
  • 24.  
  • 25. Part 2: Icons
    • Duarte and Gnome Project
    • Rule of thumb: If you have to think about an icon to ‘get it’, the metaphor is too complex.
  • 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.
  • 33.  
  • 34. Circular Flow
    • Flow that represents a continuous process without an end point.
    • Any closed loop shape could work.
  • 35.  
  • 36. Divergent and Convergent
    • Flow that occurs when two or more elements either collide or separate out form each other as if splitting off.
  • 37.  
  • 38. Multidirectional
    • Flow that expresses complex relationships - flow charts for instance.
    • Often these flows result from a combination of the preceding types.
  • 39.  
  • 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.
  • 41.  
  • 42. Abstract: Trees
    • Structures that indicate clear hierarchy.
    • Relationships can be expressed between any number of objects.
  • 43.  
  • 44. Abstract: Layers
    • Structures that show elements that stack or build on each other.
    • They can depict both hierarchy and sequence.
  • 45.  
  • 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.
  • 47.  
  • 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.”
  • 49.  
  • 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.
  • 51.  
  • 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.
  • 53.  
  • 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.
  • 55.  
  • 56. With a Core
    • creates a parent - child relationship.
    • The outer elements connect with a central element to hold the family together.
  • 57.  
  • 58. Without a Core
    • Implies that the elements connect through proximity or mutual attraction.
    • They are tied to one central area.
  • 59.  
  • 60. Realistic: Pictorial
    • Process pictorials are snapshots of how things work sequentially as a product or system.
  • 61.  
  • 62. Reveal
    • An illustration of hidden information shown by slicing, peeling or otherwise exposing a thing’s inner workings
  • 63.  
  • 64. Direction
    • Showing where to go or how to get somewhere.
    • Usually feature a starting location and destination, and may contain directions.
  • 65.  
  • 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.
  • 67.  
  • 68. Influence
    • Demonstrating the resulting impact of various interacting elements.
  • 69.  
  • 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.
  • 71.  
  • 72. Trend
    • One parameter of data represents time, to indicate a trend.
    • Change over time is the most important aspect of these diagrams.
  • 73.  
  • 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.
  • 75.