Storyboard Tutorial (of sorts)
Since you've seen my graphics for that site, you'll recognize where I want them to go. We'll see this design realized pretty soon.
Storyboard 1 (below) is a rough sketch of the overall layout, with basic graphics indicated. This image is also available as a PDF scan of my original sketch of the Mike's Bikes sample website (PDF of Mike's Bikes, Storyboard 1, in new window).
Storyboard 2 reproduces a smaller version of Storyboard 1, but adds a lot more detail. In effect, the image below is a basic design schematic. I have drawn some gridlines onto the storyboard, and marked TR and TD to indicate rows and columns. Storyboard 2 is also a PDF. (Opens in new window.)
The small screenshot doesn't have enough detail, it is hard to read my handwriting, and the scan isn't so great, but I have three general issues mapped out here: structure (to the right of the storyboard itself); images (just below storyboard, on left); and palette (below storyboard). While these pieces will likely evolve as the project unfolds, it is a good idea to have some sense of what you want to do before you start writing markup. (How do I know my first column should be 150px wide? The buttons I made are 150px wide, and my design calls for them to be in the first column. This kind of information takes only a few minutes to write down and can save a lot of time.)
The structure gives me information about my table, about each row and each column, and indicates such attributes as alignment, vertical alignment, width/height, and background color. I could just start coding and get to this point, but why not begin with a plan? If we get the structural set right early, we can easily add content in the right places.
Images help me remember key information about my images, and their purpose. I want to name the image size as attributes of my image in the code, so it will help to have that information right here on paper.
And the Palette is critical. We can't just write "tangerine orange" for a background color, no one walks around with the entire hex color palette in her head, and you don't want to guess about these things (one letter or number makes a real difference to the eye). Write down the hexadecimal values you'll use on your site!