“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.
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.
- Read the text: http://www.rit.edu/~w-rkelly/resources/pdf/04_cou/cou_col.pdf
- Select 3 of the exercises that you would like to emulate or interpret for your first webpages (not the free studies yet):
- Hue as Value
- Color Manipulation
- How Much to How Much
- Color Climate
- Visual Mixture
- Color Interaction
- Leaf Studies
- Sketch some designs on paper or in Photoshop/Illustrator. Keep in mind the sizes of elements on webpages from your Wireframing assignment.
- 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).
- Use your divs/boxes as spaces to create color studies, based (loosely) on 3 of the example exercises in the text.
- Next, create 3 pages that are experimental interpretations of the 'Mini-Course in Color' assignments.
- 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.
- Submit this project as a ZIP folder on the Shared Google Drive, under the folder "Albers Final Projects".
- 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
- Don't hesitate to be ambitious with your page layouts and designs --- work iteratively, build your divs and boxes until there are an extreme number of pages sections and divisions, work sparingly on one page or meticulously or obessively on another.
- Start in your sketchbook by designing your box model and color studies on paper, or even with colored sheets of paper or with paint.
- Try different sizes of divs/boxes along with colors to make the boxes come forward or recede in space.
- Research Albers further online or acquire the text 'The Interaction of Color' to learn more about his philosophy of color theory. There are books on Albers in the library.
- Meets the criteria in the Instructions section.
- Ambitious: Well planned and executed.
- Initial 3 color studies adhere to 'Mini-Course in Color'.
- Subsequent 3 pages use color in the browser as a creative tool.
- Demonstrates an understanding of the html/css box model and coding concepts learned in class.