Web%20Design - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Web%20Design

Description:

To plan out in systematic, usually graphic form. ... pages ugly / unreadable. Examples. User-centered. What does a user of the site want? ... – PowerPoint PPT presentation

Number of Views:23
Avg rating:3.0/5.0
Slides: 17
Provided by: rbu
Category:

less

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

Title: Web%20Design


1
Web Design
  • ECT 270
  • Robin Burke

2
What is Design?
  • Design
  • To conceive or fashion in the mind invent.
  • To formulate a plan for devise.
  • To plan out in systematic, usually graphic form.
  • To create or contrive for a particular purpose or
    effect.
  • To have as a goal or purpose intend.
  • To create or execute in an artistic or highly
    skilled manner.
  • American Heritage Dictionary

3
Layers
  • Site design
  • what are the contents of the site?
  • what are the logical units of organization?
  • what kinds of navigation are required?
  • what parts of the site are dynamic/static?
  • what parts of the site change most frequently?
  • Content design
  • what is the audience for each part of the site?
  • what classes of documents exist?
  • what content elements belong on each class of
    document?
  • what design guidelines are relevant to the site?
  • how will the navigation scheme be presented?
  • Page design
  • generate a template for each class of document
  • how should the elements be arranged?
  • what contents need emphasis?
  • for each page, fill in the appropriate template

4
Bad design
  • Can manifest itself at any layer
  • site lacks expected content
  • navigation confusing
  • content inappropriate to audience
  • pages ugly / unreadable

5
Examples
6
User-centered
  • What does a user of the site want?
  • Typical design mistakes
  • internal organization / jargon
  • overemphasis on latest tech
  • clutter
  • Lack of focus on the user

7
Design Process
  • Identifying the goals of the web page(s)
  • Hand drawing the page(s) as prototypes
  • Testing the prototypes with users
  • Iterating the design before writing any code

8
Navigational metaphor
  • Principle
  • web pages have no "natural" organizing principle
  • designer must supply this
  • important content 3 clicks from home page
  • Consequences
  • Navigation is an essential part of content
    organization
  • Must be considered at each layer of design
  • site needs / metaphor
  • content content relationships
  • page placement and organization of elements

9
Site organization
  • Linear
  • Semi-linear
  • Hierarchical
  • Interconnected

10
Page design
  • Presentating information
  • text
  • images
  • media
  • Presenting navigational tools
  • links
  • other controls

11
Information hierarchy
  • Some items on page are more visible
  • more visible more important
  • Contrast establishes visibility
  • font
  • size
  • color
  • background

background
12
  • also, whitespace

13
Free-standing
  • Principle
  • Page may be seen out of context via a third-party
    link
  • Page will usually need enough context to stand
    alone
  • Consequences
  • casual visitors should see basic information
  • who / what / when / where
  • repeating content
  • headers
  • footers
  • navigation elements

14
Consistency
  • Principle
  • understanding a design takes effort
  • designer should amortize this effort
  • Consequences
  • build templates that can accommodate the whole
    range of content
  • design repetition is not boring
  • content changes

15
Simplicity
  • Principle
  • web pages are small
  • don't try to pack everything in
  • Consequence
  • use links to avoid scrolling
  • make links meaningful

16
Exercise
About PowerShow.com