Simple Design Rules for Creating a Web Site

1
Simple Design Rulesfor Creating a Web Site

• C.R.A.P.

2
What is Good

• Subjective I may like something, you may hate
  it.
• Color
• Menu location
• Flash intro (strong bad email on Web design)
• Think about your audience and what their
  characteristics and expectations are. (Kids,
  Older people, Technology junkiesetc.)
• Think about the objective of your site. (ex. You
  dont need games on the casket Web site.)

3
Keep in Mind Site Type

• Personal Sites
• Event Sites
• Agency Sites
• B2C (Ecommerce sites)like Amazon
• B2B (Extranet)
• Training and Educational Sites
• News Sites
• Intranet Sites
• Entertainment Sites
• Portal Sites
• On-Line Communities

4
Design Checklists

• Text
• Graphics
• Page Design
• Structure
• Navigation
• Content
• Operational Considerations Does it work?
• See This Weeks Lecture Page for a sample
  Checklist.

5
Williams

• Who is Robin Williams
• C Contrast If things are different, make them
  look different.
• R Repetition Repeat things throughout the
  page. Menus, Buttons, Shapes, Themesetc.
• A Alignment Align everything. It makes it
  easier for your eyes to follow.
• P - Proximity Group like things so that people
  can easily chunk information blocks.more later.

6
Contrast

• Good Contrast Ex.
• Dexters Lab 2/06
• Busy page anyway. Make things stand out so it is
  easier to use.
• Featured game is big with stylized text.
• Shows and TV Nav Bar is black.
• Upper menu looks distinctly different.
• Green tab menus look really different, they are
  for specific show information. Nice graphic
  feature the drop triangle.
• Other games, smaller and less prominent text.
• Logo doesnt stand out too much.

7

• Bad Contrast Ex.
• Lots of information, none of it stands out.
  Everything is that blue background bar.
• Top nav and feature items look exactly the same.
• No visual cue telling me what I might want to do.

8

• Good Use of Repetition
• Cal Poly 2/06
• Nav Bar has identical text for links, rollovers.
• Nav Bar is same no matter where you go on this
  site.
• Contrast is appartent here too (people feature
  vs. media menu items vs. CP info)

9

• Bad use of Repetition
• Next 3 Slides
• Natural History Museum of LA 2/06
• Home Page

10

• NHM News Page
• Links are different
• Headers are different
• Nav is different
• Is this a different site?
• Outsourced?

11
Education page Again everything is
different. Different Department? remember
though, CIA had tremendous repetition and the
page was awful!
12

• Bad Alignment
• Balt. Sun 2/06
• Nav bar has slight indent of sub items.
• Text in story is center aligned.

13
Like this one better?
14

• Good Alignment
• People 2/06
• All over this site.

15
Aligning a Nav Bar
Which is easier for your eyes to follow?
16
http//elgoog.rb-hosting.de/index.cgi
17
(No Transcript)
18
Proximity

• Amazon 2/6
• Hard to comprehend menu on the left you have to
  read a lot.
• Menu on the right is seen as 4 items. Easier to
  use.

19
Proximity Miller

• George Miller (Harvard, 50s)
• Only present information in small, digestible
  chunks so that people can retain them.
• To chunk things the magic number is 7/-2.
• Reduce the cognitive load.

20
Summary

• Contrast
• Repetition
• Alignment
• Proximity
• What if the rules contradict each other?
• Make a design trade. You decide how your users
  are better served.