Project 2: Grids and Interactions (25%)

This project is an exploration of visual subject matter for display and function as interactive media. Using a set of “found” images and text, students will respond to the inherent graphic qualities of this content as a guiding principle. This project is intended to hone your visual and semantic sensibilities in developing and creating engaging interactive media for web-based experiences.

This project will be dependent on HTML/CSS and associated technologies as the development tools for the web environment. Approaches to web design will be explored with reference to the similarities and differences with other 2-D design processes. CSS introduces the notion of separating content and form. This has resulted in improvements in graphic design on the web with much greater control of layout and typography.

This is process-oriented project and is based on three exercises that provide an introductory framework to designing for the web.

Exercise 1

This exercise is meant to familiarize students with the techniques for designing with CSS for laying out a design in a desired grid.
1. Choose a palette of 9 colours in Illustrator; create squares 200 x 200 pixels of each colour and optimize as gif format (For palette inspiration and fun, visit kuler )
2. Create a 3x3 grid in CSS, each square to hold one coloured square
3. In the first grid, include all the squares
4. In the subsequent grids, vary the image to create 6 layouts within a 3x3 grid. Only images may be used in your compositions.
5. Try different combinations to suggest continuous forms and various patterns
6. You will need to rename the html files – “grid1.html”, "grid2.html", etc
7. Due at the beginning of week 5 in the digital locker with a link from wiki project 2 process page


external image 94.gif

Exercise 2

This exercise is intended to introduce and extend the use of typography in the web medium.

  1. Create five squares of text, each with its own visual texture.
  2. Using CSS rules, produce variations of value, density, and transparency by using different type styles (old style italic serifs, uniformly weighted sans serifs, text set entirely in capital letters, and so on).
  3. Adjust the light to dark value (typographic color) of each square by changing letterspacing, paragraph leading, and other attributes.
  4. Arrange the five blocks of text inside a 960 px wide screen with blocks visible above the fold.
  5. Manipulate the scale and placement of the squares to achieve compositional balance, tension, and depth. Squares can bleed off the edges to reinforce the illusion of amplification and recession.
  6. Create a series of 4 linking HTML documents that are styled by an external CSS document.
  7. Use <a href> tag in interesting and creative way other than the obvious "next page"
  8. Include index.html located in root folder
  9. Due at the beginning of week 6 in the digital locker with a link from wiki project 2 process page


external image 69.gif

Exercise 3

This exercise will involve using found material to create various web layouts and designs.

1. Take a magazine and draw a 2.5”x 2.5” square on the front cover. Using a sharp blade, cut clean through the entire magazine until you have series of squares.
2. Using a flatbed scanner, capture the squares at 200% and save to your computer as individual files.
3. Using the CSS file from Exercise 2, adapt and arrange a new grid 960 px wide.
4. Export images files for the web and arrange new grid according to visual qualities (texture, value, line, etc.) Look for variety and contrast in creating new layouts.
5. Design 5 new html pages that link according to visual cues in images (no text)
6. Due at the beginning of week 8 (after reading week) in the digital locker with a link from wiki project 2 process page

Exercise 4

This exercise will involve the integration of typography to enhance the visual compositions

1. Go to Wikipedia and choose random page as text copy
2. Explore compositions using type and image to create a visual "story" applying magazine images and text copy
3. Create 6 linking pages that connect in a non-linear fashion
4. Due at the beginning of week 9 on the digital locker