Interface Aesthetics 2009

Homework: Discuss “Aesthetic Quality” (due Feb 1st)

Think about your favorite object (could be a physical thing or a virtual thing) and describe its aesthetic quality based on the three levels of processing — Visceral, Behavioral, Reflective — we have discussed in class. Post your writing here with a photo or a sketch/illustration of the object.

Please submit your post by Sunday evening so that we have a chance to see each other’s entries before the next class on Monday.

Assignment 1: Typography (due February 9 in class)

In this typography assignment, you will integrate positive and negative form by creating a single element out of multiple letters:

a. Download pdfs at http://people.ischool.berkeley.edu/~daniela/type
b. Choose 2 or 3 letters (from the same or different fonts)
c. Cut, crop, shift, turn, repeat, or otherwise transform the letterforms to create your new form.

Preserve the integrity of all letters while creating a single unique form.

Please post your compositions here by Sunday Feb 8th. You will present your design to the class for critique on Monday March 2nd.

Assignment 2: Layout (due on the course website on Sunday February 22)

In this layout assignment, you will explore horizontal, vertical, and diagonal compositions by creating 3 different designs of a possible “project poster”:

I: Horizontal Composition

Create a horizontal composition (i.e., no vertical or diagonal elements). Be sensitive to the positive space and negative space. Try to establish contract by manipulating the visual levels of dominance and subordination.

Hints: Experiment with scales, typographic color (e.g., black, gray), positive and negative space, and grouping.

II: Horizontal/Vertical Composition

Create a composition that involves both horizontal and vertical reading directions. Be sensitive to the reading directions you create with your composition.

III: Diagonal Composition

Create a composition that involves elements that are placed at 45° angles or at 30°/60° angles. Take advantage of the tensions you may create with your diagonal elements.

IV: Free Style (extra credit)

Create a composition that embodies your sense of a visual chord with energy and harmony. While giving the page a sense of liveliness and poise, don’t forget to give the reader a sense of direction.

Please post your compositions by Sunday February 22nd. You will present all 3 designs to the class for critique on Monday March 2nd.

Please post your layout homework below by Sunday, Feb 22.

1. Choose one piece you created for the Layout assignment poster

2. Prepare your an ‘inverse’ copy of your Layout assignment poster
If you are working digitally…
Create a digital color inverse of the original piece.

If you are working with paper…
Create a color inverse of the piece and create several (>30) copies of the inverse and original of that piece.

3. Create two posters
Line Poster: Using a copy of the original piece, create an original composition by adding line (.5–4 pt) to the original copies.

Shape Poster: Using a copy of the original piece, create a new composition by adding the parts of the inverse copy to the original piece.

Create compositions that embody your sense of visual accord with energy and harmony. While giving the page a sense of liveliness and poise, don’t forget to give the reader a sense of direction.

Examples of original, line and shape poster courtesy of Brian Hoffer:

Post your three final compositions (the original, the line and the shape posters) below by March 1.

Be prepared to discuss your compositions. You will present all designs to the class for critique on Monday March 2nd.

Homework: Preparing for the Color Assignment (due March 8 on the course website)

From your favorite art, design, movies, etc, identify a palette of 3-5 colors that expresses your sense of color harmony. Post your color palette here (with one image or multiple images) with a briefly description. Due Sunday night.

Assignment 4: Color (due March 15)

In preparation for this week’s assignment, you identified palettes of 3-5 colors that express your sense of color harmony. Apply these color palettes to one of the compositions you created for the Assignment 2 (Layout) or the Assignment 3 (Deconstructing Type). Using your palette, create at least three different designs that take advantage of your color palette. Hints: Think about interactions and different contracts of colors:

1. Contrast of hue
2. Light-dark contrast
3. Cold-warm contrast
4. Complementary contrast
5. Simultaneous contrast
6. Contrast of saturation
7. Contrast of extension

Please post your assignment here by Sunday, March 15. Be prepared to discuss the type of color contrasts you are creating in each of the three designs. You will present all 3 designs at the workshops on March 30th and April 20th.

Assignment 5: Pictograms, Logos, & Icons Assignment (due Saturday 28th)

In this exercise, you will explore the design of pictogram/logo/icon by creating one of the followings:

1.    A new pictogram/logo/icon for I School
2.    A new pictogram/logo/icon for your school (non-I School)
3.    A pictogram/logo/icon for your own project

Be clear what type of sign you are designing (e.g., pictogram, ideographic logo, type as picture, etc.) and describe how your sign stands for the signified. Post your design and description of your design on the web by Saturday 28th. You will present your design at the workshops on March 30th.

Assignment 6: Print Media (due April 18)

You will create a sketch of a print media. As a group, pick a concept to be presented as a print media. The concept could be one of your course projects or a pseudo project for the sake of this exercise.

1. Format and Material
As a group, pick a format to present your concept. Brainstorm about possibilities offered by the format. Things to consider:

•    Affordance of the format (e.g., How many “faces” does the format have? Does the format stand on its own?)
•    Order in which information about the concept could be revealed
•    Possible effects offered by the material

2. Design the Interaction
Sketch your idea and build it. Use the sample templates, cardstock papers, markers, and cutting tools. Please use the cutting station to cut your materials.

3. In-Class Review (April 20)
Be prepared to discuss how your audiences interact with your print media and the manner in which they learn about the information you intend to present.

Assignment 7: Web Design (due April 19th)

In this assignment you will explore the design of a website by creating a new (a) homepage and (b) sub-page for one of the following:

(1) your school’s website
(2) your personal website
(3) your personal project

We encourage you to create a site map and wireframes for each page before beginning your graphical design. The pages can be designed as html documents or as static images.

Please consider:
- your desired audience
- the persistence of your navigation
- visual hierarchy
- highlighting the most important or useful information
- visual consistency within and across pages (color, layout, type)
- minimizing visual redundancy (if you do not need it, remove it)

Post your designs and description of your designs on the web by Sunday, April 19th.

April 27
In-class critique

Prepare a 3-minute presentation of your ideas for the final course exhibition. Which 3 pieces did you decide to present? Describe how you are planning to polish and create a consistent theme.

Final Project Exhibition - May 11th

Choose 3 out of the 7 assignments you have completed. You will present the three pieces as a set of designed artifacts at the final course exhibition. Try to create a consistent theme across three pieces (which may be in different media). Polish the design of each of the three pieces.