Project+1

=Project 1: Grids and the Web (25%)= toc This project is an exploration of visual subject matter for display and function as interactive media. Using basic images and text, students will respond to the graphic qualities as a visual guide. 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 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 separation of content and form. This means improved graphic design on the web with much greater control of layout and typography.

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

Project 1A
This part 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 Photoshop/Illustrator/Fireworks; create squares 200 x 200 pixels of each colour and optimize as gif format. Check here for steps (For palette inspiration and fun, visit kuler ) 2. Create a 3x3 grid to hold one coloured square in each cell 3. In the first grid, include all the colours 4. In the subsequent grids, vary the images to create 6 different layouts within the 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. Link grid1.html to the grid2.html, grid2.html to grid3.html as forth; The last screen grid6.html should link back to grid1.html creating a loop. to the third, and so forth. The sixth screen needs to loop back to the first screen.

Due at the beginning of week 2 in the digital locker with a link from the wiki - will cover upload at the beginning of next class.

//A template to help you get started on the assignment can be found here.//



Project 1B
This part 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 - graphic software of your choice.
 * 2) Arrange the //five// blocks of text inside a 960 X 960 pixel screen.
 * 3) 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).
 * 4) Adjust the light to dark value (typographic color) of each square by changing letter spacing, leading, and other attributes.
 * 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 //four different layouts// and export as pdf - due for next class January 19th.
 * 7) Referring to your pdf layouts, create a series of 4 linking HTML documents that are styled by an external CSS document.
 * 8) Use the  tag in interesting and creative way other than the obvious "next page".
 * 9) Include index.html located in root folder.
 * 10) Upload folder to digital locker and link from wiki.



Project 1C
This part 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 B, 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 4 new html pages that link according to visual cues in images (no text) - try repeating, tiling, changing orientation, framing to create variations. 6. To be completed during week 4 class and uploaded to the digital locker with a link from the wiki.



Project 1D
This part will involve the integration of typography to enhance the visual compositions done in Project 1C

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 the last exercise, create 5 different layouts that link in a non-linear fashion 4. To be completed during week 5 class and uploaded to the digital locker with a link from the wiki.