11

Basic Web site DesignBasic Web site Design

PMEHS Web DesignPMEHS Web Design

Dr. KerbyDr. Kerby

22

Designing for the UserDesigning for the UserWho is your audience ...Who is your audience ...

Who will read these pages?Who will read these pages?• Young people?Young people?• Old people?Old people?• Muscians?Muscians?• Politicians?Politicians?• Athletes?Athletes?

What is the purpose of the site?What is the purpose of the site?

33

Consistent, Unified LookConsistent, Unified Look

ColorsColors GraphicsGraphics LayoutLayout

• NavigationNavigation

44

Color scheme examples:Color scheme examples: Army Web site Nick Jr. Web site

55

AlignmentAlignment ConsistentConsistent

• Horizontal ORHorizontal OR• VerticalVertical

Left (easier to read)Left (easier to read) RightRight Center (eyes draw down the center)Center (eyes draw down the center)

66

White SpaceWhite Space Types:Types:

• Active – separates content/imagesActive – separates content/images• Passive – blank areas that result in incomplete Passive – blank areas that result in incomplete

or mismatched shapesor mismatched shapes Well placed white space makes a Web Well placed white space makes a Web

page easier to follow/read.page easier to follow/read. Recommended - 2:1Recommended - 2:1 Lycos Web page

77

White space sampleWhite space sampleBanner

Navigation

Text blockImage

Footer

Active White Space

Passive White Space

88

Organize long lists of information Organize long lists of information and links.and links.

Microsoft Web site

Or use a navigation bar . . .Or use a navigation bar . . . Adobe Web site

99

Organize NavigationOrganize Navigation

User friendlyUser friendly Group like links togetherGroup like links together Give links specific namesGive links specific names

1010

Use of ColorUse of Color Red – stimulates emotion Green – inspires involvement or interaction Gray – indicates lack of commitment or

neutrality Blue – shows calm and conservative Yellow – shows cheerfulness and hope for

the future, restlessness and change, feelings of anxiety

Purple – implies mystical quality Black – indicates power and sophistication

1111

Online ResourcesOnline Resources Usability First Web page design tipsUsability First Web page design tips Web evaluation form for secondary Web evaluation form for secondary

gradesgrades Ten Good Deeds in Web DesignTen Good Deeds in Web Design

1212

Web site Design Rubric CRITERIA YES

(2 pts.)

ATTEMPTED (1 point)

NO (0

pts.) Page: is easy to read: consider white space, background, text/link colors/size, moving parts

is attractive: balanced layout between text and graphics has a reasonable load time contains correct spelling, grammar, punctuation, accuracy is written well, clear/understandable, organized (good headings/subheadings)

contains working links contains good navigation between pages contains working images observes copyrights and citations Total Points of Possible 18

1313

Ten Good Deeds in Web Ten Good Deeds in Web DesignDesign

1.1. Place Name and Logo on every pagePlace Name and Logo on every page2.2. Provide a search box if Web site has Provide a search box if Web site has

over 100 pages.over 100 pages.3.3. Clear headings and page titles.Clear headings and page titles.4.4. Use grouping and sections to make Use grouping and sections to make

pages easy to scan.pages easy to scan.

1414

5.5. Use hypertext links for navigation.Use hypertext links for navigation.6.6. Use thumbnails for catalogue Use thumbnails for catalogue

pages.pages.7.7. Create relevant thumbnails.Create relevant thumbnails.8.8. Write clear link titles.Write clear link titles.9.9. Add accessibility to users with Add accessibility to users with

disabilities.disabilities.10.10. Design sites in a way viewer will Design sites in a way viewer will

expect.expect.

1515

Ten Good Mistakes in Web Ten Good Mistakes in Web DesignDesign

Original Top Ten MistakesOriginal Top Ten Mistakes Top Ten New MistakesTop Ten New Mistakes The REALLY Bad Web Page guideThe REALLY Bad Web Page guide

1616

Basic Web site DesignBasic Web site Design

PMEHS Web DesignPMEHS Web Design

Mrs. KerbyMrs. Kerby