6-Step Process Site Design Plan

advertisement

Name:

Hour:

Developing a Design Plan for a Web Site

Steps 1-6

First, let’s recap the six steps of developing a design plan for a Web site:

Step 1—Define the purpose

Step 2—Identify the audience

Step 3—Plan the content

Step 4—Plan the structure

Step 5—Plan the Web Pages

Step 6—Plan the Navigation

Company Portion

(Steps 1-3, with color input in Step 5 )

Step 1—Define the Purpose

A. List the Goals and Objectives of the Website by listing a page-by-page outline of the exact topics/subjects/content you plan to cover:

Step 2—Identify the Audience

A. Identify your audience and develop a preliminary audience profile:

1. Who would be most interested in your message, and why would

they be interested?

2. Are they seeking entertainment? Answers? Interaction?

Products/Services?

1

Name:

Hour:

Step 3—Plan the Content

A. Value-Added Content: Must add value, not merely volume. Reminder:

text is the PRIMARY component of a Web site!

1. What accurate, high-quality content should you add that would

relate well to the site objectives, as well as be informative and timely?

Make sure to fill this section out in detail! Using different pages in Word, write out all of the content for each of your pages.

Write in 3 rd person objective voice. If you intend to create a table for any portion of a page, create the table, showing all

content but omitting pictures. Please attach all your content pages to this completed 6-Step Design Process.

2. Study your audience profile—what content would they want and

could they use? Any links, forms, or charts needed?

B. Photographs & Multimedia: (A combination of text, graphic images, animation, audio, or video.)

What animations, audio, video, or dynamically generated content can be added that relates to the site objectives?

Student Section Begins—Only need Step 4 if 3+ Page Site

Step 4—Plan the Structure How will the information be organized and linked from page to page? On a sheet of paper, draw a flowchart showing

the button names and the flow of the Web site.

2

Name:

Hour:

Step 5—Plan the Web Pages

Establish a visual connection between the home (default) page and secondary pages. For the most part, it is recommended that a white background is best for readability. Your site should be very professional; therefore, maintain the same color scheme throughout the site. Go to this site http://wellstyled.com/tools/colorscheme2/index-en.html

to checkout different color schemes.

Is there color on an existing business card, letterhead, logo, or Web site?

1.

Color Scheme : (Remember limit colors in your scheme to 3.)

Just indicate using words (light blue, dark blue, teal, etc.)

Background:

Headings:

Text color:

Color Scheme

Other:

Navigation bar:

Subheadings:

Accent color:

2. Layout—Create unity and consistency : Sketch out on a sheet of paper a layout for both a home (default) page and ONE secondary page, using the table below as a guide as to what to label.

Layout Rubric

Make sure to include all items below in your layout sketch!

1. Logo placement (if applicable)

2. Heading placement

3. Subheading placement

4. Buttons —Specific wording

5. Text placement

6. Navigation bar

7. Graphics placement

8. Bottom links (for if scrollable page)

9. Top of Page (for if scrollable page)

10. Co pyright notation and Contact info. (per customer’s request)

3

Name:

Hour:

Step 6—Plan the Navigation

A. Exactly what will your navigation design be? Please state the format of your navigational links, for example: vertical bars, horizontal placement in a button (table) bar, images separated by borders, etc.

1.

Main Navigational links

Reminders/Hints

Use CSS (tables or divs) to control page layout.

 Set up a “template” page complete with navigation links from which all secondary pages can be constructed.

4

Download