Layout Samples and Forms
You can plan the layout of your course Web site template pages using one or more of the following techniques. You also might want to create forms on which to draw your paper sketches.
Paper Sketches or Wireframes
Technique
Using pen and paper, draw and label areas where standard content will appear on a computer screen. Include areas for elements such as the following:
- page title,
- navigation systems,
- content,
- graphics,
- footer, and
- University-required Web site elements.
Uses
This technique works well for initial brainstorming. However, you probably will have to supplement these sketches with more detailed screen sketches to check if the colors, fonts, graphics, and text are readable.
Screen Sketches or Wireframes
Technique
Using graphics software such as Adobe Photoshop or Adobe Illustrator, draw and label areas where standard content will appear on your course Web site pages. Include areas for elements such as the following:
- page title,
- navigation systems,
- content,
- graphics,
- footer, and
- University-required Web site elements.
Uses
This technique enables you to see how your color, font, graphic, and other layout choices will look on a computer screen with the same resolution. However, it may take too much time to draw ideas during the initial brainstorming phase.
Storyboards
Technique
Sketch the elements that will appear on a single screen in the box on the form, then list the media assets that will appear on the screen and what the "results" will be (i.e., which new element or screen will appear) based on the user's actions.
Uses
This technique can help you design the movement and timing of self-running multimedia and interactive segments. However, it probably won't help you design static Web pages.
Paper Prototypes
Technique
- Draw a paper or screen sketch of your course Web site pages as described above.
- Cut out each element that a student could change.
- Move and change these pieces to simulate what would happen when a student selects each option.
Uses
This technique enables you to test quickly the functionality of your navigation and interactive elements by yourself or with other people. It also can be use for more formal usability tests. However, you probably will have to supplement these prototypes with more detailed screen sketches to check if the colors, fonts, graphics, and text are readable.
