Game Design 2: Lecture 8 - Semiotics and Icon Design

75
Game Design 2 Lecture 8: Semiotics & Icons http://www.comu346. com [email protected]. uk 2011

description

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.

Transcript of Game Design 2: Lecture 8 - Semiotics and Icon Design

Page 1: Game Design 2: Lecture 8 - Semiotics and Icon Design

Game Design 2Lecture 8: Semiotics & Icons

http://www.comu346.com

[email protected]

2011

Page 2: Game Design 2: Lecture 8 - Semiotics and Icon Design

Reading

•Duarte p44 - p61 (icon stuff)

•These two short articles:

•http://bit.ly/t5CK8s

•http://bit.ly/tEfaaC

Page 3: Game Design 2: Lecture 8 - Semiotics and Icon Design

Semiotics

A sign is “something that stands for something to someone in some

capacity”

Page 4: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 5: Game Design 2: Lecture 8 - Semiotics and Icon Design

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

Page 6: Game Design 2: Lecture 8 - Semiotics and Icon Design

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

Page 7: Game Design 2: Lecture 8 - Semiotics and Icon Design

What does this mean?

“The guard dribbled down court, held up two fingers and passed to

the open man.”

Page 8: Game Design 2: Lecture 8 - Semiotics and Icon Design

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

Page 9: Game Design 2: Lecture 8 - Semiotics and Icon Design

Games Literacy

Page 10: Game Design 2: Lecture 8 - Semiotics and Icon Design

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

Page 11: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 12: Game Design 2: Lecture 8 - Semiotics and Icon Design

Short Cut

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

Page 13: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 14: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 15: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 16: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 17: Game Design 2: Lecture 8 - Semiotics and Icon Design

•Escapist discussed train

•can watch Brenda Brathwaite’s talk on gdcvault.com

Page 18: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 19: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 20: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 21: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 22: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 23: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 24: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 25: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html

Page 26: Game Design 2: Lecture 8 - Semiotics and Icon Design

Functionally Suggestive

•An icon should suggest its function.

•Icons shouldn’t suggest the name of its function.

Page 27: Game Design 2: Lecture 8 - Semiotics and Icon Design

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

Page 28: Game Design 2: Lecture 8 - Semiotics and Icon Design

•Avoid useless information

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

Page 29: Game Design 2: Lecture 8 - Semiotics and Icon Design

•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

Page 30: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 31: Game Design 2: Lecture 8 - Semiotics and Icon Design

Abstract

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

Page 32: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 33: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 34: Game Design 2: Lecture 8 - Semiotics and Icon Design

Circular Flow

•Flow that represents a continuous process without an end point.

•Any closed loop shape could work.

Page 35: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 36: Game Design 2: Lecture 8 - Semiotics and Icon Design

Divergent and Convergent

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

Page 37: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 38: Game Design 2: Lecture 8 - Semiotics and Icon Design

Multidirectional

•Flow that expresses complex relationships - flow charts for instance.

•Often these flows result from a combination of the preceding types.

Page 39: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 40: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 41: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 42: Game Design 2: Lecture 8 - Semiotics and Icon Design

Abstract: Trees

•Structures that indicate clear hierarchy.

•Relationships can be expressed between any number of objects.

Page 43: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 44: Game Design 2: Lecture 8 - Semiotics and Icon Design

Abstract: Layers

•Structures that show elements that stack or build on each other.

•They can depict both hierarchy and sequence.

Page 45: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 46: Game Design 2: Lecture 8 - Semiotics and Icon Design

Abstract: Cluster

•Overlapping - Clusters that overlap and indicate shared sets, interest, or responsibility.

•Sometimes they form a new shape or area within the overlap.

Page 47: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 48: Game Design 2: Lecture 8 - Semiotics and Icon Design

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

Page 49: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 50: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 51: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 52: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 53: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 54: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 55: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 56: Game Design 2: Lecture 8 - Semiotics and Icon Design

With a Core

•creates a parent - child relationship.

•The outer elements connect with a central element to hold the family together.

Page 57: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 58: Game Design 2: Lecture 8 - Semiotics and Icon Design

Without a Core

•Implies that the elements connect through proximity or mutual attraction.

•They are tied to one central area.

Page 59: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 60: Game Design 2: Lecture 8 - Semiotics and Icon Design

Realistic: Pictorial

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

Page 61: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 62: Game Design 2: Lecture 8 - Semiotics and Icon Design

Reveal

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

Page 63: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 64: Game Design 2: Lecture 8 - Semiotics and Icon Design

Direction

•Showing where to go or how to get somewhere.

•Usually feature a starting location and destination, and may contain directions.

Page 65: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 66: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 67: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 68: Game Design 2: Lecture 8 - Semiotics and Icon Design

Influence

•Demonstrating the resulting impact of various interacting elements.

Page 69: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 70: Game Design 2: Lecture 8 - Semiotics and Icon Design

Realistic: Displaying Data

•Comparison icons juxtapose two or more sets of information to illustrate differences.

•Bar graphs, pie charts and other methods are suitable.

Page 71: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 72: Game Design 2: Lecture 8 - Semiotics and Icon Design

Trend

•One parameter of data represents time, to indicate a trend.

•Change over time is the most important aspect of these diagrams.

Page 73: Game Design 2: Lecture 8 - Semiotics and Icon Design
Page 74: Game Design 2: Lecture 8 - Semiotics and Icon Design

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.

Page 75: Game Design 2: Lecture 8 - Semiotics and Icon Design