Week 4: Typography and Style Guide

Lecture notes are posted in the repository.

Reading quiz next week.

Readings:

1. 20 Minute Typography Basics: http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ 
2. Jakob Nielson - Usability Engineering - p119-120 on color in interfaces http://books.google.com/books?id=o1IqPH0a2fYC&lpg=PA119&ots=J-D8DhomKt&dq=jakob%20nielsen%20color%20blind&pg=PA119#v=onepage&q=&f=false 
3. Color Theory for Digital Displays Part I: http://www.uxmatters.com/mt/archives/2006/01/color-theory-for-digital-displays-a-quick-reference-part-i.php 
4. Color Theory for Digital Displays Part II: http://www.uxmatters.com/mt/archives/2006/01/color-theory-for-digital-displays-a-quick-reference-part-ii.php
5. Color Theory for Designers - http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

Resources: 

• Adobe kuler - http://kuler.adobe.com
• Lorem Ipsum generator http://www.lipsum.com

Style Guide Project:

1. Create an elevator pitch for an imaginary game. Use lots of adjectives. This should be 2-3 sentences describing the genre and style of the game.
• Identify the setting your game takes place in;
• Your target audience, especially age;
• And target release platform(s)
• *Include this elevator pitch at the bottom of your style guide 
2. Create a style guide for a dialogue box for your game.
• Your box will need a title area, body copy area, and 2 response areas. 
• Use the Lorem Ipsum generator or your own sample text to fill text areas. 
• You will show a side-by-side design: first, your box without notes (like it would be in game), and also second with the notes overlay. 
• Notes should include: 
• A header: your name, title of the project ("Style Guide"), date, your game description
• main and secondary colors with hex values (draw a few squares for a palette off to the side)
• pixel distances of major visual elements, explain anchor points or 9-slicing
• font name and point size for each the title font and the body font
• line weights 
• additional description or information needed for functionality development or design guide
• your elevator pitch description.
• **Use a gray or medium color background for your layout. Your choice. 
3. Use the style you've started with your icons to inspire you in your larger design. (They should all be in the same game. You can alternatively revise your icons to match your new design if you would like. Hint: your icons + style guide + new screen = your next project.) 
4. Also, check out the resources and homework reading for color palette help and inspiration. 
5. Post a link to your work as a reply comment by next class.