Simple Design Rules for Creating a Web Site - PowerPoint PPT Presentation

Loading...

PPT – Simple Design Rules for Creating a Web Site PowerPoint presentation | free to view - id: 20f1f-MzkyN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Simple Design Rules for Creating a Web Site

Description:

Flash intro (strong bad email on Web design) ... You don't need games on the casket Web site.) Guthrie 2/06. Keep in Mind Site Type ... – PowerPoint PPT presentation

Number of Views:133
Avg rating:3.0/5.0
Slides: 21
Provided by: ragut
Category:
Tags: creating | design | flash | games | rules | simple | site | web

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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.
About PowerShow.com