.: BARCLAY BARRIOS | WEB AUTHORING | RUTGERS UNIVERSITY | M 4,5 :.











home | email

Site Design: Start Sketching

STEP FOUR: STORYBOARD AND SKETCHING

Once you've found your inspirations, it's time to start sketching and storyboarding. Just as making quick notes about the content areas was a kind of outline or rough draft, so too sotryboarding is a kind of drafting process for the site as a whole.

Storyboards can be rough. In fact, they almost should be. Start with a plain old sheet of 8.5" x 11" paper, but turn it on its side so that it's in a landscape orientation, which roughly approximates the aspect ratio of the browser window, giving you a quick and dirty sense of how your vertical, horizontal, and white space will play out. Generally, the main pages on the sites I design don't have anything below the fold, but if you think yours will you can also take that plain sheet of paper in portrait orientation and then just fold it in half. That way you get a similar aspect ratio, but you also get (literally) "the fold."

Let's take this site for an example. After surfing and surfing, I found inspiration in the site for 4th cube. I liked the spare and subdued color palette and really liked the way the horizontal gray bar created a sense of expansive horizontal space. Working from that site, I sketched out the design for this site:

You can see how rough the sketch was, and you can even see how I went on to change things as I developed the design. But this simple storyboard is how this site began.

As you rough out your storyboard, you also want to be taking notes on color. Go back to the sites that had color schemes that appealed to you and find out what those colors are. Here are some tips to help you with that:

  • Start with the source code by selecting View --> Source or View --> Page Source. That will open a window showing the HTML for the page. Scroll down and look for the <BODY> tag (remember that one?). See if it has the attributes set: COLOR="#xxxxxx", BGCOLOR="#xxxxxx", LINK="#xxxxxx." If you see these numbers, jot them down. COLOR specifies font color, BGCOLOR is the color of the background, and LINK is the color of the links. The values should be in Hex, which is what you need.
  • If you don't find that information in the source code, it may be that it's all specified in the style sheet. But you can grab the style sheet. Look at the source and find the <LINK> tag in the head of the page. It will look something like: <link rel="stylesheet" href="stylesheet.css">. Take that href value and add it to the URL you're looking at and you'll fetch the style sheet. So, for example, to get the stylesheet for this site just plug in http://www.barclaybarrios.com/courses/425/style.css.
  • If you're drawn to the color of a particular element, let's imagine for example an image that's just a big orange box, save the image, open it in a graphics editor like Photoshop, use the color picker tool (looks like an eye dropper) to grab the color, and then get the Hex value. Not an ideal solution, because of dithering (long story).
  • Finally, if nothing else works, take a screen shot, open a program like Photoshop, dump the screen shop, and use the color picker. Again, not ideal.

OK, so by the end of this step you should have a sheet of paper with a rough design for the main page and a list of Hex values for your colors. Once you have all that, it's time to start thinking about layout.
return to assignments