Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

3,440 views

Published on

We look at how to take advantage of domain literacy to 'shortcut' the communication process.

  • If you are looking for trusted essay writing service I highly recommend ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ The service I received was great. I got an A on my final paper which really helped my grade. Knowing that I can count on them in the future has really helped relieve the stress, anxiety and workload. I recommend everyone to give them a try. You'll be glad you did.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • To get professional research papers you must go for experts like ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • To get professional essay you must go for experts like HelpWriting.net
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design

  1. 1. 2013 Game Design 2 Lecture 6: Semiotics & Icons http://gcugd2.com Sunday, 3 November 13 david.farrell@gcu.ac.uk
  2. 2. Reading • Duarte p44 - p61 (icon stuff) • These two short articles: • http://bit.ly/t5CK8s (Bejewelled 1) • http://bit.ly/tEfaaC (Bewjewlled 2) Sunday, 3 November 13
  3. 3. Semiotics A sign is “something that stands for something to someone in some capacity” Sunday, 3 November 13
  4. 4. Sunday, 3 November 13
  5. 5. Literacy • Literacy is normally thought of as the ability to read and write. • But - you can interpret meaning from other stimuli than just text. • art, music, film, fashion, advertising • Many mediums convey more through images than text Sunday, 3 November 13
  6. 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 Sunday, 3 November 13
  7. 7. What does this mean? “The guard dribbled down court, held up two fingers and passed to the open man.” Sunday, 3 November 13
  8. 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 Sunday, 3 November 13
  9. 9. Games Literacy Sunday, 3 November 13
  10. 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 Sunday, 3 November 13
  11. 11. Sunday, 3 November 13
  12. 12. Short Cut • By understanding the meaning of symbols, the designer can avoid the need to explain or teach the player what something does. Sunday, 3 November 13
  13. 13. Sunday, 3 November 13
  14. 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. Sunday, 3 November 13
  15. 15. Sunday, 3 November 13
  16. 16. Sunday, 3 November 13
  17. 17. • Escapist discussed train • http://bit.ly/18QuKV9 • can watch Brenda Brathwaite’s talk on the GDC Vault • http://bit.ly/1aV95jj Sunday, 3 November 13
  18. 18. Game Tells • The decisions you make about your game’s art style convey information to the potential player. • This is not aesthetics this is games design. Sunday, 3 November 13
  19. 19. Sunday, 3 November 13
  20. 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. Sunday, 3 November 13
  21. 21. Sunday, 3 November 13
  22. 22. Association • People associate and identify themselves with certain things. • Blue for boys, pink for girls • Brands like Apple, The Hundreds have a lot of meaning for people. • The visual style of a game is important. Sunday, 3 November 13
  23. 23. Sunday, 3 November 13
  24. 24. Sunday, 3 November 13
  25. 25. Part 2: Icons • Reading: • Duarte • 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 Sunday, 3 November 13
  26. 26. Rules of Icon Design • 1: An icon should suggest its function. • 2: Icons shouldn’t suggest the name Sunday, 3 November 13
  27. 27. Rules of Icon Design • 3: Avoid text in icons • text provides no metaphor and requires more effort to scan than a good icon. • 4: Don’t rely on information users won’t have • users should be able to predict outcome Sunday, 3 November 13
  28. 28. Rules of Icon Design • 5: Avoid useless information • if you have an icon for the game’s help files, having a pen would mislead implying the creation of documents. Sunday, 3 November 13
  29. 29. Rules of Icon Design • 6: Icons which work as silhouettes work better than those which require detail • 7: Avoid ambiguity • if two icons could represent same function, one should be redesigned Sunday, 3 November 13
  30. 30. Abstract Vs Realistic • It is challenging to design visual representations of some concepts. • 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. Sunday, 3 November 13
  31. 31. Abstract • Abstract icons are usually shapes that combine to show relationships. Sunday, 3 November 13
  32. 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. Sunday, 3 November 13
  33. 33. Sunday, 3 November 13
  34. 34. Circular Flow • Flow that represents a continuous process without an end point. • Any closed loop shape could work. Sunday, 3 November 13
  35. 35. Sunday, 3 November 13
  36. 36. Divergent and Convergent • Flow that occurs when two or more elements either collide or separate out form each other as if splitting off. Sunday, 3 November 13
  37. 37. Sunday, 3 November 13
  38. 38. Multidirectional • Flow that expresses complex relationships - flow charts for instance. • Often these flows result from a combination of the preceding types. Sunday, 3 November 13
  39. 39. Sunday, 3 November 13
  40. 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. Sunday, 3 November 13
  41. 41. Sunday, 3 November 13
  42. 42. Abstract: Trees • Structures that indicate clear hierarchy. • Relationships can be expressed between any number of objects. Sunday, 3 November 13
  43. 43. Sunday, 3 November 13
  44. 44. Abstract: Layers • Structures that show elements that stack or build on each other. • They can depict both hierarchy and sequence. Sunday, 3 November 13
  45. 45. Sunday, 3 November 13
  46. 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. Sunday, 3 November 13
  47. 47. Sunday, 3 November 13
  48. 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.” Sunday, 3 November 13
  49. 49. Sunday, 3 November 13
  50. 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. Sunday, 3 November 13
  51. 51. Sunday, 3 November 13
  52. 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. Sunday, 3 November 13
  53. 53. Sunday, 3 November 13
  54. 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. Sunday, 3 November 13
  55. 55. Sunday, 3 November 13
  56. 56. With a Core • creates a parent - child relationship. • The outer elements connect with a central element to hold the family together. Sunday, 3 November 13
  57. 57. Sunday, 3 November 13
  58. 58. Without a Core • Implies that the elements connect through proximity or mutual attraction. • They are tied to one central area. Sunday, 3 November 13
  59. 59. Sunday, 3 November 13
  60. 60. Realistic: Pictorial • Process pictorials are snapshots of how things work sequentially as a product or system. Sunday, 3 November 13
  61. 61. Sunday, 3 November 13
  62. 62. Reveal • An illustration of hidden information shown by slicing, peeling or otherwise exposing a thing’s inner workings Sunday, 3 November 13
  63. 63. Sunday, 3 November 13
  64. 64. Direction • Showing where to go or how to get somewhere. • Usually feature a starting location and destination, and may contain directions. Sunday, 3 November 13
  65. 65. Sunday, 3 November 13
  66. 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. Sunday, 3 November 13
  67. 67. Sunday, 3 November 13
  68. 68. Influence • Demonstrating the resulting impact of various interacting elements. Sunday, 3 November 13
  69. 69. Sunday, 3 November 13
  70. 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. Sunday, 3 November 13
  71. 71. Sunday, 3 November 13
  72. 72. Trend • One parameter of data represents time, to indicate a trend. • Change over time is the most important aspect of these diagrams. Sunday, 3 November 13
  73. 73. Sunday, 3 November 13
  74. 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. Sunday, 3 November 13
  75. 75. Sunday, 3 November 13

×