1. Planning a Web Site Determining Your Site’s Structure

2. Planning the Structure Determine the audience and purpose and then design the structure “Form follows function” Design the functions first, the form will follow naturally

3. Planning the Structure A flow chart is a useful tool for structuring a Web site. It should: Describe WHAT is in the site Explain HOW some of the functions will work Use a written description of the function of the page/site Explain the purpose/function of each page Each page should serve a purpose

4. Describe Site Functions Begin with a written description of the site’s functions These statements flow from the site’s statement of purpose List your Goals and Objectives Then write a Statement of Functionality for each one (See the next page for an example)

5. Site Structure Template

6. Planning the Structure Avoid meaningless generalities Be concrete Be detailed Use action verbs Consider the user’s perspective

7. Planning the Structure Flow charts Bring the site to life Enable the designer to “see” the site’s structure and the user’s path Map the navigation for the site Documents the web site Complex sites may need details broken into more than one sheet

8. Simple Flow Chart Example

9. Planning the Structure Specifications (speccing out) List all of the items to be included in the site Filename Text Images Links Menus

10. Speccing the Site Once you’ve defined the specs, building the site is a breeze Don’t worry about visual design or color or the “look and feel” of the Web site Focus on the functions – these are the ESSENCE of a Web site

11. Speccing the Site “Form follows function” Design the functions first, describing them from the user’s perspective Then create the form (structure) of the site to fulfill these functions Colors, designs, logos and technologies are all forms which must come later They are subservient to the functional needs of the user.

12. Specced out Page From the Flow Chart: Filename: func1det1st2.htm Images: none Multimedia: none Text: Do step 2 here Links: home, http://link1, http://link2 Menu Items: next, back Function1 Detail1 Step 2