Project 2: Grids and the Web (25%)

This project is an exploration of visual subject matter for display and function as interactive media. Using "found" images and text, students will respond to the inherent graphic qualities of this content as guiding design principles. This project is intended to hone your visual and conceptual sensibilities for designing in the web medium .

This project will be dependent on HTML/CSS and associated technologies 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 four 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/Photoshop; create squares 200 x 200 pixels of each colour and optimize as gif format Click here for steps (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 images to create 6 different layouts within a 3x3 grid. Only these 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 6 in the digital locker with a link from the wiki - will cover upload next class

external image 94.gif

Exercise 2

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

  1. Using this source 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.
    Click here for a list of CSS Properties
  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 7 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) - try repeating, tiling, changing orientation, framing to create variations
6. Due at the beginning of week 9 (after reading week) in the digital locker with a link from wiki

external image mag1.jpg

Exercise 4

This exercise will involve the integration of typography to enhance the visual compositions done in Exercise 3

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. Building upon the layouts created in Exercise 3, create 6 linking pages that connect in a non-linear fashion
4. Due at the beginning of week 10 on the digital locker