Draw out Grids for 10 websites

Description

A big part of the design process is to sketch out website layouts and use that before jumping into Photoshop and Illustrator to design them. Sketching inside of your dot-grid notebooks should help you try to stay neat but without feeling you need to use rulers for every part of it. Try to keep sketches neat but not too neat. :)

For this part of the assignment, use 1 page of your sketchbook for each site. Here is an example of Twitter and class site sections, where the class site one is not a good example, and the Twitter one is detailed enough to be a good example of the sketches.

Bad Example

Not a lot of detail, it’s hard to see the grid throughout the whole image, not a lot of labeling of sections.

Good Example

A lot of detail, lots of labeling, including the name or address of the website. Grid columns are noticeable.

Objectives

Learning Objectives

Upon completion of this assignment, you should:

be able create detailed sketches of websites.
be able to analyze a website’s grid system just by looking at it, and determine generally what their grid system is like.

Performance Objectives

After completing this assignment, you be able to effectively

make a set of sketches for a website.

Details

Deliverables

10 one-page sketches for 10 websites listed below, in your sketchbook (in pen, no pencil)
Bring sketches to class and Sam will document them with her camera.

Requirements

One sketch per page, labeled, and organized. Use the key on the side of the Twitter example, as it is common practice to label elements that way (eg. box with x is always known as an image.)
Name or address of the website on the right side
Arrows, labels, and some way to show columns (light pencil lines instead or color pencils/markers)
Bring them to class tomorrow!