This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.


Web Projects: Graphic Design and Storyboards

Graphic Design and Storyboards

Designing how the pages will look is not just a matter of making them pretty. In Web site design, graphic designers use colors, images, and other graphical elements to support the navigational structure of the site. For example, as shown in the illustration below , images that look like buttons are usually used to indicate a link to another page. Visual depictions of a house might be used to indicate a link back to the home page. The graphic design also captures the mood and tone of the site.

Web page that says, "Welcome to our home page" with graphics
This site, designed with students at West Paris Family Learning in West Paris Maine, has clear navigation buttons on every page.

One way to help your students arrive at decisions regarding the graphic design is to bring in examples for them to choose from. One teacher suggests bringing colored paper into class to show choices of background color, and printouts of some design choices, and asking the class to vote on which to use and how to place them. Again, using examples from existing Web sites may help with this process.

Many factors regarding your site's intended audience come in to play when designing the look and feel of the site. Consider:

  • How can color, contrast, and font size affect the readability of the site?
  • Does the background color make the text less readable?
  • How difficult will it be for people with certain disabilities to navigate the site?
  • Is the site too busy or complicated for your intended audience?
  • Are there any cultural considerations to consider regarding colors, graphics, or word choices?

When the time comes to design pages, don't start off using your HTML editor, pick up a pad of paper and some pencils or markers. Drawing out your design ideas makes it easier to try out and edit ideas, and it can be a fun activity too, especially for those students who are not that comfortable with computers. This process is sometimes referred to as "storyboarding"--much like how film directors draw storyboards of key scenes before they shoot a movie. After your group has agreed on a design based on the storyboards, then you can plan how you will create these designs on the computer using your HTML and graphic design software programs.

Next »

Last Updated October 23, 2003