Interface Design For Games

Final Grades Posted

2010-05-22T23:59:00.004-04:00

Final grades have been posted and approved. You can check them via myub.

Best of luck to all of you, and thank you for an excellent semester.
-Brit

Final Exam

2010-05-11T17:53:00.000-04:00

Exam is posted here.
Follow the directions and email your completed exam

Your Final Grade Hail Mary Pass

2010-05-04T19:43:00.001-04:00

If you have anything that you want to resubmit to me, you can send me one email containing all of your issues by midnight Friday, May 7th. (I will be grading Saturday morning.)

I will dock late for for 10% off the top for being late.

I am grading with an iron fist. Make your updates count.

Also: test your links or file attachments. If I can not get to it, then I can not grade it.

Week 14: Heuristics & Usability

2010-05-04T12:57:00.002-04:00

Lecture slides are in the repository.

Final Exam is next week. Study up! This will cover the entire course.

Readings:

Melissa Federoff thesis on heuristics - http://melissafederoff.com/heuristics_usability_games.html
Jakob Nielson "10 Heuristics for User Interface" - http://www.useit.com/papers/heuristic/heuristic_list.html
Jakob Nielson "Usability 101"- http://www.useit.com/alertbox/20030825.html
Medlock et al. "Using the RITE method to improve products; a definition and a case study" - html version or download the doc

Usability Project:

Fill in the Critiques document in the repository: summarize what your classmates said, and describe your thoughts and plans for the revision.
Revise your screen mockup based on the feedback.

This does NOT mean rebuild your entire screen; this means make an update based on feedback to improve the usability of what you have started.

Post your critiques document and your updated mockup to the blog.

DEEM Directory Flyer

2010-04-28T09:15:00.000-04:00

At the IGDA meeting, a flyer was handed out about the Digital Entertainment and Emerging Media diectory for Maryland. If you'd like a copy of the fly or more info, I've posted a scan in the repository: DEEM Directory Info.

Assignments Clarification for Weeks 12 & 13

2010-04-28T07:57:00.000-04:00

If you are missing something, get it to me asap.
If you have questions, email me so I can help.

Week 12:
Everyone needs to do the week 12 animation homework assignment.

Week 13:

If you came to the IGDA meeting on 4/27 and signed in with me, then you get credit for week 13.You have no other assignments for week 13.
If you did not attend the meeting, you need to send me the week 13 alternate assignment for class credit.

There is no other homework for week 13.

Week 13: Alternate Assignment

2010-04-27T16:43:00.000-04:00

If you opt not to attend the IGDA meeting, please complete the short assignment below today 4/27/10 and email it to me.

Assignment:

Last week's homework reading selected by Mr. Medina examined the rise and fall of sprite quality of several classic 2D sprite characters.
In just a few sentences, what are some of the characteristic differences between good sprites and sloppy/bad sprites? (Tell me "what went wrong" with the later development of some of those 2D sprites.)
This is in place of the quiz and so I will decline any late work for this assignment. Also, in fairness, this is not available as extra credit if you also attend the IGDA meeting.
Please email your response to me today, 4/27/10.

Homework:
There is no homework assignment for this week.

Prep for next week:
Next class will be 5/4/10 on Usability in UI. Please have your skinned mockup assignment available online for easy access in class, as we will be doing an in-class activity with usability testing them.

Week 13: (4/27/10) IGDA Meeting or Assignment

2010-04-26T20:56:00.001-04:00

EDIT: 9:00 pm 4/26/10: Soda, beer, and food at the meeting are generally reserved for IGDA members, but since there will be many non-members and students at this meeting, the president has allowed food and beverage for this meeting to anyone who donates $10 to the IGDA (to cover themselves for the night, since IGDA members pay dues to cover costs).

So, if you'd like food and beverage with the meeting, bring $10 cash, exact change. Also, there are soda and snack machines available in the meeting area.

There will be no official class meeting for the week of 4/27. You may select one of the following options:

Option A:
Attend the IGDA meeting this week at Firaxis Games at 7pm. You MUST sign in with me thatnight to get credit for coming to the meeting.
Dan Baker will be giving his talk from GDC on the tech behind CivV.

Firaxis Games
10 Loveton Circle,
Sparks, MD 21152

Please post a reply with email contact info to this post if you have spare seats for carpooling or are interested carpooling, so hopefully you all can connect.

Option B:
If you can't make it to the IGDA meeting or decide not to come to the meeting, you will be writing a short essay and emailing it to me on 4/27. (I'm expecting you to use our regular class time to complete the short assignment.) I will update this post with the assignment on that afternoon.

Homework Activity:
There is no homework activity for this week.

I will see you all back in class 5/4/10. We'll be working on critiques and usability reviews of the skinned mockup screens you worked on.

Week 12: Animation with El Medina

2010-04-20T16:01:00.001-04:00

Readings:

Mario development: http://nfggames.com/games/mariosprites/
Sonic development: http://nfggames.com/games/SonicSprites/
Bonk development: http://nfgworld.com/mb/thread/724

Sprite Sheet Resources:

Animation Critique Activity:

Select a game with interesting visual effects.
Write a short essay discussing the animation and visual effects in this game, generally but please focus on the user interface:

Describe the animation and effects.
How do these or some of these effects help to enrich the game experience? What works well?
What aspects or effects detract from the game? How do they detract from the experience?

Post a link to your essay.

Reminder: guest lecture tonight with El Medina

2010-04-20T09:58:00.001-04:00

Tonight's guest lecturer will be El Medina. Here is El's resume in the repository.

BHG Open House for Art & Animation Students

2010-04-14T14:52:00.000-04:00

Thought some of you might be interested in this public service announcement.

Big Huge Games is pleased to invite Art and Animation students from local colleges and universities to their Spring 2010 Art Open House. The event will be held on Wednesday, April 21st from 6-9pm at their studio in Timonium, MD. Join them for a tour that includes free food and plenty of game art creation discussions. In addition, Big Huge Artists will be available for student portfolio reviews and feedback. Portfolio reviews will be first come, first serve. We kindly ask that you RSVP below or via email to RSVP@bighugegames.com by April 20th. In your RSVP please note if you'd like to reserve a portfolio review slot and specify your primary area of interest (concept, character, environment, animation, modeling, texturing, etc...). Review sessions are limited and during past Open Houses have filled up quickly.

Week 11: Implementation

2010-04-13T16:58:00.001-04:00

Starter files and in-class activity guide located in the repository.

Readings:

Ben Fry & Casey Reas "Getting Started with Processing" - http://processing.org/learning/gettingstarted/
Wiki: "Polling (computer science)" - http://en.wikipedia.org/wiki/Polling_%28computer_science%29
Wiki: "Event-Driven Programming" - http://en.wikipedia.org/wiki/Event-driven_programming

Homework: Implementation Project

Download the starter file from the repository. This file has a simple simulation running of a bouncing ball.
Create at least two displays of data in this file, describing interesting data that is changing. Examples of data you could show:

The current location (x,y) of the ball
The direction of the ball as a vector
The current angle of the ball
The color of the ball
The number of times the ball has bounced
The total distance that the ball has traveled while the simulation has been running.
and so on...

For your font to display, use either your font from your style guide, or another font that we did not use in the class activities. (You will need to create your own font using the Sketchbook.)
Create a text file in your script folder called writeup.txt . Give me a short writeup of your experience with this project answering these questions:

What was easy?
What was difficult?
What was new to you?
What was most interesting / enjoyable?
What would you change or do differently if you were to redo this project?

Pack your final script folder up as a zip file. Be sure to put YOUR NAME in the zip file name. (I will dock you for this! Easy points! Do it!!!)
Post a link to your zip in this blog post.
I will be running your project from the code, not from any exported files. Your code must compile and run.
OPTIONAL because your brain just wants a challenge / an interesting portfolio piece:

add user interface controls to your project such as a slider to change colors or speed
create multiple balls and have them reflect off of each other / improve the bounce physics and create interesting data display
investigate other ways to show data visually in the simulation beyond text

Resources:

Dan Chudnov - video on learning to code with processing http://vimeo.com/1031578

Week 10: UML

2010-04-06T15:50:00.003-04:00

UPDATE: 4/13/2010 12:22pm: Comments turned on.

The topics in the class schedule have been modified. Check the repository for updated topic order.

Lecture notes and in-class activity worksheets are in the repository.

Readings:

UML reference sheet: http://www.holub.com/goodies/uml/
Practical UML: http://edn.embarcadero.com/article/31863
Programming concepts: http://www.landofcode.com/programming-intro/computer-programming-concepts.php
Object-Oriented Game Design: http://www.devmaster.net/articles/oo-game-design/

Resources / optional reading:

UML Diagram references: http://www.vinci.org/uml/
UML Basics from IBM: http://www.ibm.com/developerworks/rational/library/769.html
Description of the parts of a UML Diagram (the arrows, dots, etc.): http://www.agilemodeling.com/artifacts/activityDiagram.htm

UML Diagram Project:

Decide on a classic arcade game to design. (You can play flash version of many arcade games here: http://www.classicgamesarcade.com )
Write a textual description of the game, a few sentences describing the primary mechanic.
Use your description to come up with an initial class diagram. You are modeling at the conceptual level.
Create an object diagram by using post-it notes or movieclips etc to create instances of your objects.
Move the objects around in to create scenarios that the objects need to interact. Develop an activity diagram for your simple game logic. Does this modify your design? If so, modify your design.
You may work however you are most comfortable, using a whiteboard, pen & paper, post-it notes, drawing software, etc., but you will need to digitize your final submission (photo, scan, or render as bitmap). As long as it's legible, it's fine.
Deliverables: place the text and diagrams on a single web page, in a doc, or in a folder so you can post one link to all of your materials.

A description of your classic arcade game. Include a link to a flash version or a screenshot if handy.
A high-level class diagram.
A activity diagram for a sample interaction between the objects.

Week 9: Iterative Design for UI

2010-03-29T20:00:00.001-04:00

Lecture notes are posted in the repository.

Reading quiz next week.

Note about class next week: we will be usability testing your mockups as an in-class activity next week. You need to show up with your Mockup P2 completed and easily accessible in-class to participate in the testing for your next project. Check your links before class so that you are prepared with your deliverables!

Readings:

Jakob Nielson - "Iterative Design of User Interface" Introduction & Benefits of Iteration (stop at Usability Metrics) http://www.useit.com/papers/iterative_design/
Jakob Nielson - "Parallel Design" http://www.useit.com/papers/parallel_design/
Anders Ramsay - "Three Reasons to Start Designing Iteratively" http://www.andersramsay.com/2009/03/01/three-reasons-to-start-designing-iteratively
Mike Rhode - "Embracing Iterative Design" http://www.graphicdefine.org/issue1/iterativedesign
Wikipedia: User-Centered Design http://en.wikipedia.org/wiki/User-centered_design
IBM - "Transitioning from Waterfall to Iterative Design" (read the intro and Advantages of Iterative Design sections, stop at Four Steps) http://www.ibm.com/developerworks/rational/library/4243.html

Mockup, Part DEUX!

You will create a final screen design by developing your wireframe into a fininshed mockup using your style guide from earlier in the semester.
Using your style guide notes, apply your style design to your basic wireframe skeleton.

There is no specific way to do this process, it varies by designer. You can break down the steps into manageable chunks of style application in whatever order makes the most sense for you: create your text fields, add temp text, apply font styles to fields, add basic containers/buttons/widgets, add any temp/stock art to fill in "game assets" if necessary.
You will likely need to adjust placement of wireframe items slightly as you apply styles and begin to follow your guides for sizing.
As you design and answer new design questions, consider if they make sense to add to your style guide. Would your new answers apply to other screens in the game? Add them to the guide! (See next item below...)

Create a copy of your "style guide with notes" for this assignment. (You can call it style guide v.2 or some such.) As you apply your styles to your screen, you will find additional standardizable information that you need for your design which you've missed in your original style guide. Using a different color, add these notes to your style guide overlays.
Deliverables:

Screen layout: a bitmap of your screen design.
Style guide v2.0: a copy of your style guide with your additional notes from this project added in a new color.
Discussion/log: a paragraph or two discussing your experience with this assignment. Thoughts to keep in mind: what did you find surprisingly easy/difficult? What information did you need in your style guide that you hadn't planned for initially? What proportion of your design questions were naturally answered by the guide and its improvements vs what proportion of your design is specific to this screen? What technical skills, if any, did you pick up while creating this screen?

Post links to your deliverables as a reply to this post.

Week 8: Visual Information Design; What is 'intuitive'?; Wireframing

2010-03-29T09:00:00.000-04:00

EDITED - 3/29/10 - 9:00am: Added resource link to grid templates.

Lecture notes are posted in the repository.

Reading quiz next week. I enjoy them too much to forget about them.

Readings:

Jared Spool - "What makes a design 'intuitive'?" - http://www.uie.com/articles/design_intuitive/
"Visual Hierarchy" - http://gd.tuwien.ac.at/languages/html/webstyle/wsg2/page/hierarchy.html
"Occam's Interface" - http://finegamedesign.com/ui/index.html#occam
Klaus B. Bærentsen - Intuitive User Interfaces (pages 1-5) http://www.daimi.au.dk/~olavb/sjis12/2-KB_p29-60pre.PDF
5 Ways to Make a User Interface Intuitive - http://www.rikcatindustries.com/2007/10/16/5-ways-to-make-a-user-interface-intuitive/
Usability first definition of affordance: http://www.usabilityfirst.com/glossary/affordance/

Mockup Assignment: Part 1
You will create a wireframe design for a character creation screen.

Start with your mini game pitch that you developed from the style guide project. Imagine that, in your game, you have a character creation screen. I
Imagine this screen as appropriate for your game's theme.

ex. Military Sim = "Customize Soldier", Racing = "Upgrade Car", Sci-fi Adventure = "Customize Spaceship", and so on. Figure out what is appropriate for your game.

Brainstorm what information this screen will need to show.
Organize your information on the screen into a visual hierarchy.

Consider what info is most important and what is least important.
Consider what info is similar and should be grouped, as well as what info is different and should be emphasized by separation.
How you organize this is up to you, but I suggest either a simple indented outline or highlighting colors.

As you start to think about translating the list of info into a visual layout:

Consider the affordances needed on your screen: of the information that will be shown, what information can the player change? What UI elements will you provide for this? (buttons, dropdowns, checkboxes, etc.)
Consider overall screen navigation, especially as it related to common heuristics on your target platform.

Create several wireframe thumbnail sketches showing blocks of info and major screen elements. (This is like the demo in class.) These are small in size, large squares of info, just a few labels if necessary.
Of your sketches, choose your strongest layout and keep developing it into your wireframe. Add text and simple shapes to describe your screen.
Your screen should be the correct proportion and screen res for your final game.

If you don't know what to use, here are defaults: ps3 or xbox or PC = 1024x768.
Other systems are fine (DS, PSP, Wii, etc.), you need to go look up the info or ask me.
Also, you can use another appropriate resolution for your system but you *must* explain it in your writeup. (A smaller PC res for a web game because of standard browser bars. Or, maybe letterboxed console because you want the cinema ultra widescreen feel.)

Create a writeup for this project. You have the option of creating this writeup as a written text description; or, you can create a copy of your wireframe with notes written on it.
You will have 4 delivarables for this project:

Two thumbnail sketches. These are simple and show stages from your brainstorming process.
One final wireframe. This does not need to be cleaned or remapped, it just needs to be legible.
One writeup. Either as a copy of the wireframe with notes, or as a chunk of text.

Post a link to your work in the comments. You can post a set of links to your deliverables, or put them all on a single webpage and link to it.

Resources:

Free printable sketching and wireframing pdf templates, different platforms and layout styles: http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/

Midterm Grades Posted

2010-03-27T21:18:00.000-04:00

I've emailed a copy of your midterm back to each of your with your grade and highlight notes.
Nice job, guys!

If you did not receive an email from me with your midterm attached, please let me know.
If you have any questions, please email me your questions or email set up time to talk before or after class on Tuesday.

And: if you're going to argue, you had better be well-prepared for it:
'How to Argue for a Better Grade' slides: http://docs.google.com/present/view?id=df5zxmb2_127xnvqjw

-Brittany

Recap: Week 6 & 7

2010-03-21T11:50:00.000-04:00

Just to recap and keep the week numbers clear:
Week 6 was the midterm.
Week 7 was Spring Break - no class held.

The Critiquing UIs term paper is due posted and linked on Tuesday, 3/23/10.
See you all on Tuesday.

Week 5: Critiquing UIs

2010-03-02T15:58:00.003-05:00

Lecture slides are in the repository.

Midterm is next week. Review your readings, quizzes, and the lecture slides to prepare.

Homework Readings:

Ridiculous UI in film http://gizmodo.com/5418342/ridiculous-user-interfaces-in-film-and-the-man-who-designs-them/
Summary of Principles of UI Design http://www.sylvantech.com/~talin/projects/ui_design.html
GameSpy - Designing a good interface editorial (strategy games) http://www.gamespy.com/articles/491/491801p1.html
Usability First defines "User Interface Critique" http://www.usabilityfirst.com/glossary/term_440.txl

Term paper: due 3/23/10

From the Usability First definition of a UI Critique: http://www.usabilityfirst.com/glossary/term_440.txl

A user interface critique may come from any number of theoretical perspectives, including historical, psychological, sociological, ethical, philosophical, economic, and artistic concerns. Deeper criticisms are often meant to be part of a long-term dialogue with society about the various impacts of our design decisions. Practical critiques are often intended simply for quickly improving our design of software and improving our purchasing decisions, based on the practical expertise of the critic, and in a more cost-effective fashion than most formal evaluation methods.

From UNC Art History handout http://www.unc.edu/depts/wcweb/handouts/arthistory.html

Instructors may want you to talk about how the formal or stylistic qualities of the object reflect or affect the time in which they were made. More specifically, you may be asked to look at the object's relationship to ideas about gender, class, artistic creation, culture, or politics associated with that time. Or you may be asked to connect artworks with the theories of a particular person.

Deep criticisms are often meant to be part of a long-term dialogue with society about the various impacts of our design decision. Criticism can be framed from different perspectives, such as:

Historical
Psychological
Sociological
Ethical
Historical
Psychological
Sociological
>Ethical

Criteria:

Write a deep criticism about 2 games focusing primarily on the UI. Use at least 2 of the Perspectives to frame your discussion. You may include practical criticisms or art history-style critiques as well, but be sure to focus on the perspectives commentary.
You must include 2 screenshots for each game. If you can not get these screenshots (screen cap, photo from tv, internet reference), you can not use the game in your essay. I need to have a visual reference on what you are discussing. Cite any images you include.
You may turn this in as a MLA style paper or you can create a web page for your text and images. Present it however you wish, focusing on a professional style.
Your essay will probably be between 750 and 1,000 words, but let the content be your guide in thoroughness.
Include a MLA style citation for any references or images you include in your paper. Also, use the References section for help with Modern Language Association citations.

References:
Cornell: MLA Citation Style: http://www.library.cornell.edu/resrch/citmanage/mla#list
MLA citation generator: http://www.palomar.edu/dsps/actc/mla/
BibMe http://www.bibme.org/

Week 4: Typography and Style Guide

2010-02-22T21:29:00.001-05:00

Lecture notes are posted in the repository.

Reading quiz next week.

Readings:

20 Minute Typography Basics: http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
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
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
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
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:

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

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.

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.)
Also, check out the resources and homework reading for color palette help and inspiration.
Post a link to your work as a reply comment by next class.

Week 3: Critiques

2010-02-16T16:13:00.000-05:00

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:

Escaping Realism - http://finegamedesign.com/ui/index.html#realism
10 Mistakes in Icon Design - http://turbomilk.com/blog/cookbook/criticism/10_mistakes_in_icon_design/
Scott Berkun - How to Give and Receive Criticism - http://www.scottberkun.com/essays/35-how-to-give-and-receive-criticism/
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.

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

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.

Export your final filled-in template as an image and upload it.
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

2010-02-15T09:25:00.001-05:00

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!

2010-02-08T17:10:00.000-05:00

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

2010-02-02T16:02:00.000-05:00

Lecture slides are posted in the repository.

Reading quiz next week.

Homework Readings:

Gamasutra - Cross-Platform UI Development http://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml
Designing for Television: http://herrklein.com/2006/09/designing-for-television/
Watch the first 3 minutes of this video on cross-platform development: http://software.intel.com/en-us/videos/cross-platform-game-devt-Part2/
Ernest Adams - Fundamentals of Game Design, "Input Devices" p233-238 & 240-241: Google book exerpt
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

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? ...?)
For each icon, sketch several ideas. Include two sketch ideas for each icon in the top boxes of the template.
For each icon, select one of your ideas and create a clean final icon.
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.
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.
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!)

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

UB Inclement Weather Notifications

2010-02-01T21:00:00.000-05:00

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

Week 1: What is User Interface?

2010-01-27T09:24:00.002-05:00

UPDATE: 8:10pm 1/26/10 - Comments have been fixed - you should be able to use any OpenID login to make a comment to this blog! Email me if you have any issues posting.
UPDATE: 9:22am 1/27/10 - Added link to how to set up your student web space.

In the repository: lecture slides

Reminder: there will be a reading quiz at the beginning of class next week.

Homework Reading:

"It's the User Interface, Stupid" - http://www.technicat.com/writing/ui.html
"What reading Tufte won’t teach you: Interface design guidelines" - http://glyphobet.net/blog/essay/269
Looney Labs Harry Teasly - "Game Interface Design" - http://www.loonygames.com/content/1.16/guest/
PC Mag - "User Interface Defined" - http://www.pcmag.com/encyclopedia_term/0,2542,t=user+interface&i=53558,00.asp

Homework Activities:

Take a look at the class syllabus and schedule in the class documents.
Set up a basic web page where you will link and upload your assignments. You have student web space, same as you've used for other classes; or you may use your own private space. Ask a classmate if you need help setting this up, or let me know. Login info and guide to setting up your site in our class document repository.Alternatively, you may also use Google Docs and share a folder of docs for your work for this class. (You are welcome to digitally post your work in whatever format, as long as you provide the link in the comments to turn your work in each week.)
Join this class blog. (Do this early in the week.)
Once you've joined the blog, post a brief hello reply to this message. Include your name, email address, and home website url.This is how I am collecting your contact info!

Welcome and Logistics

2010-01-21T10:00:00.004-05:00

This is the class blog and site for Interface Design for Games, Spring 2010 at the University of Baltimore.

Instructor:
Brittany Steiner
britsteiner+ub@gmail.com

Course Info:
Topics in Computer Science - User Interface in Games
COSC.497.102
Spring, 2010
Tuesdays, 5:30-8:00 pm
AC 219

Documents:
Link to Class Document Repository
Link to Class Syllabus
Link to Class Schedule