Assignments

= ASSIGNMENTS =

Assignment 1. Jump Page

 * Due date: Wednesday, October 20**

Create a jump page that allows the instructor to access all of the assignments you produce in the course. The jump page should include the following:


 * 1) Your name
 * 2) The school’s name
 * 3) Course name, section, number and academic term
 * 4) Instructor’s name
 * 5) Link to each assignment labeled with the assignment number, name, and due date
 * 6) All content should fit in a maximized browser window at 1024 x 768 on Mac or PC in major browsers with no horizontal or vertical scrolling
 * 7) Launch assignments in a new browser window
 * 8) Visual design style or concept of your choice
 * 9) Include the disclaimer in the footer of the page
 * 10) Use Web Standards when building your page (validate XHTML 1.0 Strict, validate CSS)

Marking Criteria
o Class jump page (20 pts) · Requirements (2 pts each)
 * Total Points: 20**

Assignment 2. Thumbnail Compositions

 * Due date: Friday, October 15**

Examples: [] []

Create 4 thumbnail compositions representing 4 different concepts (total of 16 thumbnails, 4 for each word) using only black shapes on a white background (no type, photos, or color). Your shapes should remain simple rather than pictorial. See the example to the right:

Present your thumbnail designs as Gif images on an HTML page, separating each grouping with ample vertical space. Give the page a logical heading, and include a simple bookmark link navigation to jump to each set of designs. Do not reveal the concept illustrated, however for the purpose of critique. Instead, place the concept word in the title attribute of the image as seen below:



Marking Criteria
o Assignment requirements for design (5 pts) o Assignment requirements for delivery (5 pts) o Effective communication of concept (5 pts) o Creative delivery (5 pts) o Presentation (rubric) (25 pts)
 * Total Points: 105 (20 points each set plus 25 presentation points)**

Assignment 3. Research Presentation

 * Due date: Wednesday, October 20**

Create a 5 - 10 minute presentation to be given to the class on one of the designers/topics listed below. Your presentation should be presented in an appropriate format for the content such as PowerPoint, Keynote, or using Eric Meyer’s S5 ([]). Be sure to include footnotes on each slide where you quote or reference a source (see [] for examples of how to use MLA style citation). Include a bibliography slide at the end with all sources plus recommended information sources. Format the presentations slides so they are easy to read from the back of a classroom, and visually relate to the subject. The presentation style should relate to the designer’s work you are presenting. Include screen shots and visual examples where appropriate.

o Walter Gropius o Joseph Albers o Shaun Inman o Joshua Davis o Jeffrey Zeldman o Douglas Bowman o Todd Dominey o Jason Santa Maria o Dan Cederholm o John Hicks o Cameron Moll o Milton Glaser o David Carson o Paula Scher o Stefan Sagmier o Herbert Bayer o Nicholas Jenson o Johannas Itten and color theory o Brief history of Bauhaus at Weimar o Brief history of modern type faces o Interview with a designer (speak with instructor)

Marking Criteria
o Research rubric (25 pts) o Presentation rubric (25 pts)
 * Total Points: 50**

4a. Grayscale Layout

 * Due date: Friday, October 22**

Using the content provided to you, create a one-page layout using XHTML and CSS that effectively presents the content in a usable, attractive layout following web standards. Your design should make use of only black, white, and tones of gray. Create a logo that communicates the concept of the page using shapes and typefaces of your choosing that relate to the content. Your layout should effectively deal with all of the following issues:


 * Line length
 * Leading
 * Copy margins
 * Contrast
 * Information hierarchy (Dominant heading, subdominant heading, etc.)
 * Content grouping
 * Grid alignment
 * Balance
 * Appropriate content entry points
 * Facilitate quick reading
 * Engaging design
 * Usability

You will need to read the copy provided to decide where the logical breaks are in the narrative to begin new paragraphs, and introduce new heading or subheadings. Use runarounds and at least 1 pull quote in your layout. You may use an image for the logo (presented in grayscale) and for headings (use off-left or other image replacement technique).

Choose typefaces that are appropriate for the content and are legible for your readers.

Marking Criteria
o Assignment requirements (5 pts) o Creative approach (5 pts) o Effective use of information architecture design patterns (5 pts) o Effective use of (in-page) navigation design patterns (5 pts) o Effective use of page layout design patterns (5 pts) o Effective use of visual design principles (5 pts) o Effective use of typography and type setting (5 pts) o Informal usability test (5 pts) o Integration of usability feedback and documentation (brief description of testing outcome) (5 pts) o Presentation rubric (25 pts)
 * Total Points: 75**

4b. Color Layout

 * Due date: Wednesday, October 27**

Using the content provided to you, create a one-page layout using XHTML and CSS that effectively presents the content in a usable, attractive layout following web standards. Your design should make use of color. Create a logo that communicates the concept of the page using shapes and typefaces of your choosing that relate to the content. Your layout should effectively deal with all of the following issues:


 * Line length
 * Leading
 * Copy margins
 * Contrast
 * Information hierarchy (Dominant heading, subdominant heading, etc.)
 * Content grouping
 * Grid alignment
 * Balance
 * Appropriate content entry points
 * Facilitate quick reading
 * Engaging design
 * Usability

You will need to read the copy provided to decide where the logical breaks are in the narrative to begin new paragraphs, and introduce new heading or subheadings. Use runarounds and at least 1 pull quote in your layout. You may use an image for the logo (presented in color) and for headings (use off-left or other image replacement technique).

Choose typefaces that are appropriate for the content and are legible for your readers.

Marking Criteria
o Assignment requirements (5 pts) o Creative approach (5 pts) o Effective use of information architecture design patterns (5 pts) o Effective use of (in-page) navigation design patterns (5 pts) o Effective use of page layout design patterns (5 pts) o Effective use of visual design principles (5 pts) o Effective use of typography and type setting (5 pts) o Informal usability test (5 points) o Integration of usability feedback documentation (5 pts) o Overall usable design (5 pts) o Presentation (rubric) (25 pts)
 * Total Points: 75**

4c. Print Layout

 * Due date: Friday, October 29**

Using the content from your grayscale and or color layout, create a one-page layout using XHTML and CSS that effectively presents the content in a usable, attractive layout for print following web standards. Your design should make use of grayscale and/or color that will print on a black and white printer. Create a logo that communicates the concept of the page using shapes and typefaces of your choosing that relate to the content. Your layout should effectively deal with all of the following issues:


 * Line length
 * Leading
 * Copy margins
 * Contrast
 * Information hierarchy (Dominant heading, subdominant heading, etc.)
 * Content grouping
 * Grid alignment
 * Balance
 * Appropriate content entry points
 * Facilitate quick reading
 * Engaging design
 * Usability

o Assignment requirements (5 pts) o Creative approach (5 points) o Effective use of information architecture design patterns (5 pts) o Effective use of (in-page) navigation design patterns (5 pts) o Effective use of page layout design patterns (5 pts) o Effective use of visual design principles (5 pts) o Effective use of typography and type setting (5 pts) o Informal usability test (5 pts) o Integration of usability feedback documentation (5 pts) o Overall usable design (5 pts) o Presentation (rubric) (25 pts)
 * Total Points: 75**

Assignment 5. Usability Analysis of Chosen Website for User-Centered Interface Design

 * Due date: Wednesday, November 10**

Create a 5 - 10 minute presentation to be given to the class on a usability analysis of a web site or similar web sites as per the project you are to design. Your presentation should be presented in an appropriate format such as PowerPoint, Keynote, or using Eric Meyer’s S5 ( [] ). Be sure to include footnotes on each slide where you quote or reference a source (see [] for examples of how to use MLA style citation). Include a bibliography slide at the end with all sources plus recommended information sources. Format the presentations slides so they are easy to read from the back of a classroom, and visually relate to the subject. Include screen shots and visual examples where appropriate.

Marking Criteria
o Assignment requirements (5pts) o Appropriate identification of information architecture design patterns/antipatterns (5 pts) o Appropriate identification of (global) navigation design patterns/antipatterns (5 pts) o Appropriate identification of (in-page) navigation design patterns/antipatterns (5 pts) o Appropriate identification of page layout design patterns/antipatterns (5 pts) o Appropriate identification of information graphics design patterns/antipatterns (5 pts) o Appropriate identification of control choice design patterns/antipatterns (5 pts) o Appropriate identification of editor design design patterns/antipatterns (5 pts) o Appropriate identification of visual design principles (5 pts) o Appropriate identification regarding use of color (5pts) o Appropriate identification regarding typography and type setting (5 pts) o Citation of sources (5 pts) o Presentation (rubric) (25 pts)
 * Total Points: 85**

Assignment 6. Site Design
6a. Creative/Communication Brief
 * Due date: Friday, November 12**

For the web site design, create a basic creative brief to define the goals, objectives and target audience. Your design can and should be as creative, cutting edge, and technically savvy as possible. Your job as the designer is to identify anitpatterns and come up with a unique concept and design that integrates good user interaction design patterns. You will not be doing the technical build out so shoot for the stars with your ideas. Consider the needs of the primary target audiences.

The design process will be iterative, allowing for group critique, and refinement of your ideas. You will prevent your first iteration of your designs in class. Based on class feedback, refine your designs and present them again. Make final revisions based on class discussion and present them in the last class. Below is a listing of what you will be presenting for each of the design iterations:

1. **Wireframe Sketches** : executed in class showing home, any secondary navigation page, any tertiary navigation page 2. **Iteration 1** : Illustrator or Photoshop comps showing **2 unique designs** for home and any interior page 3. **Iteration 2** : Illustrator or Photoshop comps showing **1 design** for home, any secondary navigation page, any tertiary navigation page 4. **Final Design** : Fully refined Illustrator or Photoshop comps showing **1 design** for home, any secondary navigation page, any tertiary navigation page

Make your design modular, flexible, scalable, and practical.

Create a concept note document communicating (in clear simple language for someone not familiar with web design) and selling your design. Make sure to address the following:


 * The issues (anitpatterns) that necessitated the design
 * The rational for choosing the design patterns used in the design

Marking Criteria
o Creative Brief (1st 5 items of project contract rubric 15 pts) and Presentation (rubric) (25 pts) (40 pts) o Iteration 1 (2 sets of 3 comps) (350 pts) Each set of comps (25 pts) · Assignment requirements (5 pts) · Effective use of (global) navigation design patterns (5 pts) · Overall usable design (5 pts) · Informal usability test (5 pts) · Integration of usability feedback and documentation (brief description of testing outcome) (5 pts) Each comp (50 pts) · Creative approach (5 pts) · Effective use of information architecture design patterns (5 pts) · Effective use of (in-page) navigation design patterns (5 pts) · Effective use of page layout design patterns (5 pts) · Effective use of information graphics design patterns (5 pts) · Effective use of control choice patterns (5 pts) · Effective use of editor design patterns (5 pts) · Effective use of visual design principles (5 pts) · Effective use of color (5pts) · Effective use of typography and type setting (5 pts)
 * Total Points: 790**

o Iteration 2 (1 set of 3 comps) (175 pts) o Final Design (1 set of 3 comps) (175 pts) o Concept Note Document (project document rubric) and Presentation (rubric) (50 pts)

Assignment 7. Initial Site Buildout

 * Note: This was initially for a project that got delayed. Remove assignment.**

Build out the agreed-upon pages for the site and present to the client.

Marking Criteria
o Web site design rubric (160 pts) Client goals (32 pts) User experience (32 pts) Visual design (32 pts) Technical (40 pts) Archive (24 pts) o Presentation rubric (25 pts)
 * Total Points: 185**

Mid-Curriculum Review 1.

 * Note: Move this to beginning of Winter Quarter.**

Submit the URL for your mid-curriculum review project to the instructor by the due date as posted on the class Wiki.


 * Your review should include the following:**

· Jump page · Career goals · Resource library · Visual design project · Information architecture project · Interaction design project · Other work

Marking Criteria
**Total Points: /80**

o Jump page requirements 5pts each (40) o Overall usability (5) o Quality assurance (5) o Career goals (5) o Resource library (5) o Visual design project (5) o Information architecture project (5) o Interaction design project (5) o Other work (5)

The final grade will be based on the following scheduled activities: b. Color Layout c. Print Layout || 75 75 75 || 16.5 || a. Creative Brief Presentation b. Iteration 1 Presentation c. Iteration 2 Presentation e. Concept Note Presentation || 40 350  175  50 || 45 ||
 * **Activity / Assignment** || **Title** || **Points** || **%** ||
 * Assignment 1. || Jump Page || 20 || 1.5 ||
 * Assignment 2. || Thumbnail Compositions || 105 || 7.8 ||
 * Assignment 3. || Research Presentation || 50 || 3.7 ||
 * Assignment 4. || a. Grayscale Layout
 * Assignment 5. || Usability Analysis of Chosen Website Design || 85 || 6.2 ||
 * Assignment 6. || Site Design
 * Assignment 7. || Initial Site Buildout || 185 || 13.5 ||
 * Mid-Curriculum Assessment 1 ||  || 80 || 5.8 ||

.