26
Chapter 3 Planning the Site inciples of Web Design, Third Edition

Chapter 3 Planning the Site

  • Upload
    wan

  • View
    38

  • Download
    4

Embed Size (px)

DESCRIPTION

Chapter 3 Planning the Site. Principles of Web Design, Third Edition. Objectives. Create a site specification Identify the content goal Analyze your audience Build a Web site development team Create conventions for filenames and URLs Set a directory structure Create a site storyboard. - PowerPoint PPT Presentation

Citation preview

Page 1: Chapter 3 Planning the Site

Chapter 3

Planning the Site

Principles of Web Design, Third Edition

Page 2: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 2

Objectives

• Create a site specification • Identify the content goal• Analyze your audience• Build a Web site development team• Create conventions for filenames and URLs• Set a directory structure• Create a site storyboard

Page 3: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 3

Create a Site Specification

Answer the following questions:• Why are you building the Web site? Can you

write a two or three-paragraph mission statement that briefly states the site’s goals?

• What do you envision as the goal of the site? What do you (or your company or organization) hope to gain from creating and maintaining a Web site?

Page 4: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 4

Create a Site Specification

Answer the following questions:• How will you judge the success of the site?

What are the measuring factors you can use to assess the effectiveness of the site?

• Who is the target audience(S)? What characteristics do they share? How will you find out more about them?

• What are the limiting technical factors affecting your site?

Page 5: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 5

Identify the Content Goal

• Adopt your user’s perspective • Examine closely what type of site you are

building• Your objectives and your users’ objectives

may be quite different • Think about the type of content you’re

presenting and look to the Web for examples of how best to present it

Page 6: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 6

Identify the Content Goal

Types of web sites:• Billboard• Publishing (Newspaper/Magazine)• Portal• Special interest (usually non-profit)• Blog• Virtual gallery• E-commerce, catalog, online shopping• Product support• Intranet/Extranet

Page 7: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 7

Analyze Your Audience

Produce an audience definition:• What is it that users want when they come to

your site? • How can you attract them and entice them to

return for repeat visits? • What type of computer and connection

speed does your typical visitor have?

Page 8: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 14

Build a Web Site Development Team

The following roles are necessary:• Server Administrators• XHTML Coders• Designers• Writers and Information Designers• Software Programmers• Database Administrators• Marketing

Page 9: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 15

Create Conventions for Filenames and URLs

• Plan your file-naming conventions for your site

• Talk to your system administrator and find out what type of operating system your Web server uses

• Typically you’ll develop your Web site locally on a PC or Macintosh. You will upload the files to the Web server as the last step in the publishing process.

Page 10: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 18

Naming Files

• Case Sensitivity - Use lowercase for all file names and in the HTML code

• Character Exceptions - Leave out special characters such as /, \, &, and *

• File Extensions - Use the correct three-letter extension

Page 11: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 19

Solving the Filename Dilemma

The International Standards Organization (ISO) standard specifies a maximum of eight letters followed by a period and a three-letter extension. Allowed characters are letters, numbers, and the underscore character.

Page 12: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 21

The Default Main Page Name

• Every Web site has a default main page that displays when the browser requests the directory of the site rather than a specific file

• Before you start coding, check with your system administrator to verify the main page file name

• index.htm is the most common default main page name

• At UTD the default page is index.html

Page 13: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 23

Example URL

http://www.utdallas.edu/~rfisher/ba4320/schedule.htm

Protocol/Domain/Path/Page(file)

Page 14: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 24

Set a Directory Structure

• A typical Web server has a user area that contains folders for each user

• Your files are stored in your user area, along with other files from other Web sites stored in their respective user areas

• The directory structure of the Web server affects the format of your site’s URL

Page 15: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 28

Build a Relative File Structure• You will most likely build your Web site on a

computer that is different from the computer that will be hosting your site. Keep this in mind when you are designing the directory and file structure.

• Because your files will be transferred to another computer, any URLs you specify to link to other pages in your site must include paths that are transferable

• Relative paths tell the browser where a file is located relative to the document the browser is currently viewing

Page 16: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 30

Page 17: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 31

Page 18: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 32

Create a Site Storyboard

• Plan your site by creating a flowchart that shows the structure and logic behind the content presentation and navigation choices

• This preliminary step is one of the most important that you take in planning your site

Page 19: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 38

Page 20: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 39

Hierarchical Structure

• The hierarchical structure is probably the most common information design. It lends itself to larger content collections because the section pages break up and organize the content at different levels throughout the site.

Page 21: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 40

Page 22: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 43

Catalog Structure

• The catalog structure accommodates electronic shopping. The user can browse or search for items and view specific information about each product on the item pages.

Page 23: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 44

Page 24: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 45

Summary

• Start with pencil and paper. Your ideas will be less restricted and you can easily revise and recast without recoding.

• Write a site specification document. You’ll find it invaluable as a reference while building your site.

Page 25: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 46

Summary

• Analyze your audience and try to create an audience profile. Focus your site on the user’s needs, and continue to meet those needs by adapting the site based on user feedback.

• An effective site is more commonly the result of a team effort. Leverage different skill sets and experience to build a Web site team.

Page 26: Chapter 3 Planning the Site

Principles of Web Design, Third Edition 47

Summary

• Plan for successful implementation of your site by creating portable file naming conventions. Build a relative file structure that can be transferred to your Web server without a hitch.

• Use a pencil and paper to diagram your site. Even if the design changes, you’ll save a lot of time and effort by visually detailing the structure of your content.