Skills

  • Use the Web site development planning process
  • Select a web site’s structure.
  • Visualize the organization of a site’s pages and linking relationships.
  • Organize web pages by level of detail.

Resources

Web Style Guide:

Resource Article

Intro to Web Design: Chapter 4

Examples:

 

Content Inventory ExampleFlowchart Example

Step 3 Web Design Process: Website Structure

Overview

Good web design requires solid site architecture based on the site’s goals and target audience established in the project brief. Time spent planning the intended structure of the site will help you to design a site that users are able to navigate with ease and will help to avoid unnecessary coding and development later in the process.

You will create a flowchart or storyboard that presents a visual structure of the pages.

Objective

To understand how the web development planning process is structured.

Instructions

1. Think about your fictitious website and develop ideas on how many pages your website will have and think about how your ideas can be categorized into underlying pages.

2. From your ideas create a FLOWCHART or STORYBOARD. Using the various examples in the textbook, as well as samples on the web and elsewhere, sketch out a new site map for your redesigned site. You may need to add or delete pages in order to fit your goals that were detailed in the Design Brief.

Once you’ve worked up a good sketch, use a computer application of your choice to create a clean, organized and professional-looking flowchart or storyboard. Create the visual on an 8.5” x 11” document (Word, Google Docs, or even Photoshop). Utilize consistently sized rectangles to represent pages, and lines to link them and show connections. You could also incorporate color-coding. Also use consistent typography to label the map.

3. Save and Submit your work in the shared drive.

Assessment

You will be graded according to the following criteria for a total of 10 Points:

  • You created a sitemap in a storyboard or flowchart form that indicates the new pages your site will have.  This includes the page titles. (5 pts)
  • You have a professional looking word document for each step that clearly indicates the pages.(5 pts)