Web Design ECT 270 Robin Burke

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

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

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

Examples

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

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

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

Site organization Linear Semi-linear Hierarchical Interconnected

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

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

also, whitespace

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

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

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

Exercise