“If one says 'Red' (the name of a color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very different.”
Josef Albers: Interaction of Color


Josef Albers was a German artist/designer who taught at the Bauhaus before emigrating to the US during WWII. Here, he became highly influential to the understanding and teaching of color theory in the US as an instructor first at Black Mountain College (here in North Carolina) and later as head of the Design Department at Yale.

Beginning in 1949, Albers created hundreds of versions of 'Homage to the Square' in a variety of media. 'Homage to the Square' practically investigates the effects of colors upon one another when they are configured in a nested design.

This Assignment

For this assignment, you will create HTML/CSS color studies inspired by Albers’ color theory exercises as a series of 6 linked webpages.

Your first 3 webpages will be based directly on 3 of the Assignments in the 'Mini-Course in Color' reading. Your final 3 pages will be experimental interpretations of the 'Mini-Course in Color' assingments that show complexity of color and shape in the browser.

You will use divs in HTML5 that are styled in CSS3, paying special attention to the size, placement, and color of elements on the page in relation to one another. Links embedded in the page will allow a user to navigate your experimental website.


For this project, you will develop your first 3 page of styled divs using HTML and CSS, including floats. You will then develop a series of 3 subsequent pages through an iterative design process.
  1. Read the text: http://www.rit.edu/~w-rkelly/resources/pdf/04_cou/cou_col.pdf
  2. Select 3 of the exercises that you would like to emulate or interpret for your first webpages (not the free studies yet):
    1. Hue as Value
    2. Boundaries
    3. Transparency
    4. Color Manipulation
    5. How Much to How Much
    6. Color Climate
    7. Visual Mixture
    8. Color Interaction
    9. Leaf Studies
  3. Sketch some designs on paper or in Photoshop/Illustrator. Keep in mind the sizes of elements on webpages from your Wireframing assignment.
  4. Start coding with HTML and CSS to layout the main divs/boxes on your first page (based on the in-class demos and your Duckett chapters about CSS).
  5. Use your divs/boxes as spaces to create color studies, based (loosely) on 3 of the example exercises in the text.
  6. Next, create 3 pages that are experimental interpretations of the 'Mini-Course in Color' assignments.
  7. Creatively embed links into each of your 6 pages so that a viewer/user can navigate through the project and find all 6 pages via links.
  8. Submit this project as a ZIP folder on the Shared Google Drive, under the folder "Albers Final Projects".
  9. Include with your project submission 1 paragraph of text (approx 300 words) describing your idea and concept for the project. This should be an extra html page added to your site.

Suggestions for implementation

Grading Criteria

  1. Meets the criteria in the Instructions section.
  2. Ambitious: Well planned and executed.
  3. Initial 3 color studies adhere to 'Mini-Course in Color'.
  4. Subsequent 3 pages use color in the browser as a creative tool.
  5. Demonstrates an understanding of the html/css box model and coding concepts learned in class.


Intro to Web Page & Interactive Design: NM231