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.

Week 3: Critiques

Lecture slides are in the repository. 

Documents from in-class activities are also posted in the repository:
Critiques Guide
Critiques In-Class Worksheet

Reading quiz next week.

Homework Readings:

1. Escaping Realism -  http://finegamedesign.com/ui/index.html#realism
2. 10 Mistakes in Icon Design - http://turbomilk.com/blog/cookbook/criticism/10_mistakes_in_icon_design/ 
3. Scott Berkun - How to Give and Receive Criticism - http://www.scottberkun.com/essays/35-how-to-give-and-receive-criticism/
4. Andrew Follett - How to Respond Effectively to Design Criticism - http://www.smashingmagazine.com/2009/10/01/how-to-respond-effectively-to-design-criticism/

Homework Activity: Icon Design Assignment Part 2
We will be continuing the design process by critiquing and revising your icon set that you created for Icon Design Part 1.

1. Gather constructive criticism about your icon set. We will do this in groups in class as an activity using the worksheet. (If you miss class, you will need to use the worksheet and volunteers to give you feedback.) 
2. For each icon, summarize the feedback that you wrote on the in-class worksheet in the Critical Analysis document in the repository. The minimum is 2 reviewers (each person looks at all 3 of your icons and provides feedback), but you may add additional reviewer summaries if you wish to gather additional feedback.
3. Using the feedback on your icons, create a plan for your revision for each icon. 
• Write your plans for each icon in the appropriate section of the document. (A few sentences per icon is sufficient.) 
• Write an overall goal for your revision at the bottom of the document.
4. Now that you have your Critical Analysis document complete, you can revise your icons according to your plan.
• Update your template to version 2  from the repository (psd or png) which has 2 additional slots. (Swap your background layer.)
• For each icon, place a work in progress sample of your icon in the first slot. Place your final icon in the second slot.
5. Export your final filled-in template as an image and upload it. 
6. Post a link to your final image and your Critical Analysis in this thread. 

Notes: 

• I am focusing on the written part of this project. Successful projects will show thorough analysis and planning based on gathered feedback, followed by clear execution in the visual updates. 

Schedule Updated

I've updated the class schedule in the repository to account for the snow day last week.

Icon assignment Part 1 should be completed at latest by class tomorrow. (You'll be using it in the in-class activity.) Thanks to everyone who has posted links to their assignments already: I've been looking through them as they come in and they are really good starts.

Also, you might want to skim the readings from last week to refresh your memory for the reading quiz.

Here's hoping we have class and not another Snowmageddon Part III tonight!

No Class 2/9 - UB Campus is Closed!

No class tomorrow night (2/9) as the UB campus will remain closed tomorrow: http://www.ubalt.edu/news/index.cfm?id=667 

The snowpocalypse continues!

Week 2: PC vs. Console Development; Resolutions; Input

Lecture slides are posted in the repository.

Reading quiz next week.

Homework Readings:

1. Gamasutra - Cross-Platform UI Development http://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml
2. Designing for Television: http://herrklein.com/2006/09/designing-for-television/
3. Watch the first 3 minutes of this video on cross-platform development: http://software.intel.com/en-us/videos/cross-platform-game-devt-Part2/  
4. Ernest Adams - Fundamentals of Game Design, "Input Devices" p233-238 & 240-241:  Google book exerpt
5. Understanding Comics Realism in UI: http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/ (This is helpful with your homework activity)

Homework Activity: Icon Design Assignment Part 1
We will be working through a simple design and revision process with a set of icons.

You will create 3 final icons:

• home or main menu
• store or market
• download additional content

1. Choose 2-3 adjectives that will guide your overall icon style. Type these into the adjectives area of the template. (Fun and cartoony? Clean and modern? Gritty and industrial? Sci-fi and futuristic? ...?)
2. For each icon, sketch several ideas. Include two sketch ideas for each icon in the top boxes of the template.
3. For each icon, select one of your ideas and create a clean final icon. 
4. Final icons must be 32px x 32px. I suggest working larger than the final icon size, and reduce down to your final size when you are finished.
5. Download the template from the repository (psd or png). Add your name and adjectives to the top of the template. Arrange your icons into the slots of template.
6. Export your final filled-in template as an image; upload it; and post a link to it in this thread.

Notes: 

• Use your adjectives to help guide your style. You want the set of 3 icons to be cohesive and consistent.
• Sample and template files are available in the repository under Week 2.
• You may hide the the gray boxes of the template if you wish.
• This project is software agnostic: you can use pencil & paper and scan your drawings, or you may use the drawing program of your choice to design the icons. (A psd is provided, or use the png as a background in any graphics program.) Just be sure your final icons are clean and professional.

Additional resources: These links are here to help you with the homework activity.
Skim and see if any of the tutorials might help you. (Do not try to read all 50 icon design tutorials. Seriously, nobody needs all that!)

1. 50 Excellent Icon Design Tutorials - http://sixrevisions.com/graphics-design/50-excellent-icon-design-tutorials/

UB Inclement Weather Notifications

Just a reminder that class will be held unless the university closes for inclement weather. (Possible snowfall is predicted for tomorrow afternoon/evening.)

You can keep an eye on the ubalt.edu homepage, or sign up for the handy campus text message system. 

UB weather and other emergencies info:
http://www.ubalt.edu/template.cfm?page=2300