Purpose/Audience
Tone/Message
Layout/Design
Site Storyboard
Templates
Great Content
Great Graphics
Multimedia
Universal Design
Quality Control
Reach the World
WebDesign Clinic#4:
Creating a Storyboard for Your Site
You've decided on the goals and audience (Clinic#1), tone (#2), and basic design elements (#3) for your site. Now you're ready for hands-on work planning its overall structure.
Creating a Storyboard for Your Site
You've decided on the goals and audience (Clinic#1), tone (#2), and basic design elements (#3) for your site. Now you're ready for hands-on work planning its overall structure.
Beginning: All sites are composed of nodes or pages, containers for related chunks of information or experience, and links, which establish the relationships between nodes. What structure will support your goals and user needs best?:
- one content-rich page, perhaps supplemented with external links, a feedback form, etc.;
- a linear, book-like sequence;
- a hierarchical or clustered organization;
- a random collection
The Storyboard: Now, the fun part: choose a structure (see next paragraph) and create a storyboard of your site, an overall plan showing structure, sequence and connections. I use big Post-it notes stuck up on a board or wall. Put the function and general theme of each node on its Post-it. Later, when you've developed a page template (Clinic #5), you'll sketch out each page on its Post-it.Now use yarn to connect the nodes to show links, including external links to outside resources. This format lets you move nodes and links around, adding, removing, and combining. Each node should have a good reason for being there.
Alternative Site Structures: Whatever the structure, provide useful content on each page so users don't have to navigate thin pages to get to useful stuff.
- Linear: like a book, the main introductory page is followed sequentially by page 1, 2, 3, etc. This site is an example of this structure, which is good for tutorials, tours, etc. Or offer users 2 sites in one: say a 'lite' path with more generalized, easy-to-digest info. and a 'heavy' path with more technical info. Navigation links should allow users to go back, next, and home. Still make each page stand-alone for random surfers.
- Hierarchical: Here, a main introductory page serves as an index to lead users down different paths, say topics 1, 2, and 3. Each main topic page may lead to sub-pages with more and more detail. A user follows interesting paths as deep or shallow as they want before returning to the index.
Within topics, pages can be arranged hierarchically, linearly, or in clusters with no order. Navigation aids should provide a way back and next within the topic, up to the main topic page, and further up to the home index.
The hierarchical structure is like a film: The plot is your message; the zoom level of a page is how detailed it is: a long shot provides an overview or basic information, a close-up provides specific details. - Random: The main intro. page links to other pages, loosely related, but arranged in no order. Users hop around anywhere that interests them. Help them navigate with maps, menus, and home page links.
Navigation:Always provide a way for users to know "where am I?" Show not just a page title, but its place in your site structure. Navigation bars, maps, logo and title size all can indicate the level of the page and how it relates to others. Always provide a way out.In the NEXT INSTALLMENT, you'll make a page template for the nodes in your site, which you can use with your Post-its to sketch out your pages. And we'll discuss 'special pages', like home, links, 'kickers' and feedback pages.
NEXT: WebDesign Clinic#5: Page Templates & Special Pages
Content ©1999 Dr. Barbara Strand.
All Rights Reserved.
All Rights Reserved.