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 Content design Page 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 Presenting navigational tools
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 Consequences
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 Consequences 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 Consequence web pages are small
don't try to pack everything in
Consequence
use links to avoid scrolling
make links meaningful

16. Exercise