Graybox sketches

You should by now have at least a tentative idea for your project for this class.

Your assignment due next week is to "sketch" three different screens from your proposed web app in two different ways (so, a total of 6 sketches).

A graybox page sketch is a web page with little or no attention to design. The idea is to show several 'colored boxes' illustrating the major semantic divisions of a page, and sketch in content indicating:

• What kinds of things are there on a page (content)?
• Which things are grouped together?
• What's the general order of things on a screen?
• How is this page connected with others? Links / buttons might be indicated that take you elsewhere.

Example

Here's a bit of illustration of process for a potential project that would store and distribute results for a weekly race series at Hoke Farm.

1. First, I'd like a fairly generic template. I'll use the one that I started with for the Don Quixote assignment, which has some fairly generic divs... gray1.html
2. Light modifications to make the navigation <ul> horizontal, and create two columns in my main content area. <div>s are labelled with their names... gray2.html
3. Now I'll rough in some site specific things that will be the same for every page. (Using php "includes", if you know them, is an efficient way to be able to put things like menus into an external file and change your mind about them later.)... gray3.html

Now, I'm ready to copy my page template a bunch of times and just change a handful of things in those central two columns. Here are two alternate sets of 'graybox sketches' for the same site, presented as tiny sitelets.

Hoke #1   |   Hoke #2

The pages all use the same stylesheet. Well, actually two stylesheets: the only difference is a handful of background colors to visually identify one as a different set of sketches.