The elements of
web design

Duality
• Technology
• Semester 1
• Design
• Semester 2

Design

A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Web as software interface Concrete Completion Web as hypertext system
Visual Design: visual treatment of text,
Visual Design: graphic treatment of interface
elements (the \"look\" in \"look-and-feel\") Visual Design graphic page elements and navigational
components
Interface Design: as in traditional HCI: Navigation Design: design of interface
design of interface elements to facilitate elements to facilitate the user's movement
user interaction with functionality
Interface Design Navigation Design through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information Information Design Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding to facilitate understanding
Interaction Design: development of Interaction Information Information Architecture: structural design
time
application flows to facilitate user tasks,
defining how the user interacts with
Design Architecture of the information space to facilitate
intuitive access to content
site functionality
Functional Specifications: \"feature set\":
detailed descriptions of functionality the site
Functional Content Content Requirements: definition of
content elements required in the site
must include in order to meet user needs Specifications Requirements in order to meet user needs
User Needs: externally derived goals User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc. User Needs for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site Site Objectives Site Objectives: business, creative, or other
internally derived goals for the site
task-oriented Abstract Conception information-oriented
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
© 2000 Jesse James Garrett http://www.jjg.net/ia/
JJG - elements of web design

JJG - elements of web design

Web as hypertext
• Information oriented

Web as software
• Task oriented

The surface - visual design
• Colour
• Typography
• Visual elements
• Branding
➡ Emotion

Skeleton - layout
• Interface design
• Navigation design
• Information design
➡ Readability
➡ Understandability

Structure
• Information
Architecture
• Interaction Design

Scope - requirements
NCE • Functional specification
• What will it do?
• Content requirements
• What information does it
hold?
in which the various features and
Just what those features and func-

Just what those features and func-
Strategy
of the site. Some sites that sell books
s to save previously used addresses
uestion of whether that feature—or
• User needs
te is a question of scope.
• Who will be using it and why?
• Site objectives
• Who is creating it and why?
ermined by the strategy of the site.
nly what the people running the site

Exercise
• Get into pairs
• Look at exercise 1 on Blackboard

Technology

Technology
• HTTP
• Servers & Browsers
• (X)HTML
• CSS
• Document Object Model
• Javascript
• AJAX

Standards
• HTTP
• (X)HTML
• CSS
• ECMAscript (javascript)

Servers & Browsers
• Web Servers
• Web Clients
• Browsers, RSS readers, other sites
• Proxies and Firewalls

HTML
• HyperText Markup Language
• Structurally describes content
•

XML
• Data exchange
SGML
• Description
XML HTML
• Dynamic RSS 2.0 XHTML
formats

(X)HTML
<ul id=\"oParent\">
<li>Node 1</li>
<li id=\"oNode\">Node 2</li>
<ul>
<li>Child 1</li>
<li ID=\"oChild2\">Child 2</li>
<li>Child 3</li>
</ul>
<li>Node 3</li>
</ul>

Document Object Model

Document Object Model
• Use for Javascript
• Use for CSS
• DOM scripting is NOT DHTML

CSS
• Cascading Style Sheets
• Separate style from
content
• Cascade
• Inherit

Standards based design
• Using XHTML, CSS and javascript to
deliver usable, accessible and beautiful
sites
• Open, and understandable to other
designers and developers

Javascript

AJAX

Validation
• HTML
• http://validator.w3.org/
• CSS
• http://jigsaw.w3.org/css-validator/
• Javascript
• Tools > Console
• FIREWALLS & PROXIES

View Source
• View Source
• View Source
• View Source
• View Source
• View Source
• View Source
• View Source

Exercise
• Get into pairs again
• Look at exercise 2 on Blackboard

Exam question
• Explain the differences between web
sites as hypertext systems or as
software applications. What are the key
differences between designing for these
two different kinds of sites?

Images
JJ Garrett, Elements of Web Design
Wikimedia, creative commons images
ICHC for the image above.