Week 9: Iterative Design for UI

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!

1. You will create a final screen design by developing your wireframe into a fininshed mockup using your style guide from earlier in the semester. 
2. 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...)
3. 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.
4. 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?
5.  Post links to your deliverables as a reply to this post.