BASIC WEB DESIGN

PRINCIPLES
PM Dr.
PM. Dr Jamalludin Harun
Norah Md Noor
Department of Educational Multimedia
Faculty of Education, UTM
 2

WEB SITE DESIGN PRINCIPLES

In truth, almost every site has one flaw or

another,
th whether:
h th

1 It b
1. be confusing
f i accessibility
ibilit
2. Over
Over--ambitious design
3. Poor download time
WEB SITE DESIGN PRINCIPLES
WEB SITE DESIGN PRINCIPLES
WEB SITE DESIGN 

DESIGN FOR THE MEDIUM

DESIGN FOR THE MEDIUM

DESIGN THE WHOLE SITE

DESIGN FOR THE USER

DESIGN FOR THE SCREEN:
3
 DESIGN
DESIGN FOR THE MEDIUM
FOR THE MEDIUM
When designing a Web site, remember :
When designing a Web site remember :
ƒ the destination is a computer, not the printed 
page
ƒ language is hypertext, not linear text
ƒ create Web pages specifically for the 
computer screen
ƒ must consider the layouts, fonts & colors, and 
how they will appears
y pp
4
 DESIGN
DESIGN FOR THE MEDIUM:
FOR THE MEDIUM:
1 Craft the look & feel
1. Craft the look & feel
• the interface, that user must navigate often 
called ‐ the look and feel of a web site
called ‐
called  the look and feel of a web site
• they read text, associate with links, view graphics 
– depends on the freedom of your design Æ
depends on the freedom of your design Æ
depends on the freedom of your design 
create their own path through your information.

5
 DESIGN
DESIGN FOR THE MEDIUM:
FOR THE MEDIUM:
2 Make 
2. Make your design portable
Make your design portable
your design portable
• Be portable & accessible across different 
browsers OS & computer platforms
browsers, OS, & computer platforms
• don’t make mistake of testing in only one 
environment – assume their pages same to all.
environment –
environment  assume their pages same to all

6
 7

DESIGN
DESIGN FOR THE MEDIUM:
FOR THE MEDIUM:
3. Plan for clear presentation & easy access to your
i f
information
ti
• plan for the actions/path that user may
choose
h Æ randomly
d l or specificifi information
i f ti
• Provide direct link to the area – that most
demand
• Present info. – easy to read
• Break
B k ttextt iinto
t reasonable
bl segments t
• Plenty headings – user find content quickly
• Control
C t lh horizontal
i t l length,
l th easy to
t readd
column
 DESIGN FOR THE WHOLE SITE
DESIGN FOR THE 
DESIGN  FOR THE WHOLE
WHOLE SITE
SITE
ƒ Plan unifying themes & structure 
Plan unifying themes & structure that hold 
Plan unifying themes & structure that hold 
that hold
pages together
ƒ Consider 
Consider more
Consider more than each individual page
more than each individual page
than each individual page

8
 DESIGN
DESIGN FOR THE WHOLE SITE
FOR THE WHOLE SITE
1 Create smooth transitions
1. Create smooth transitions
• Plan to create a unified look among the sections 
&
& pages of your Web site
pages of your Web site
• Identifying elements of the sites & create 
smooth transitions from one page to another
smooth transitions from one page to another

9
 DESIGN
DESIGN FOR THE WHOLE SITE
FOR THE WHOLE SITE
2 Use
2. Use a grid to provide visual structure
a grid to provide visual structure
• The grid is a conceptual layout device that 
organizes the page into columns & row
organizes the page into columns & row
• Use table elements to build the grid for pages 
Æ although
although table for tabular data 
table for tabular data – table 
table
elements were used as a tool for building the 
type of columnar grid structure
• Well
Well‐‐designed sites use tables to provide 
structure & consistency of pages.

10
 DESIGN
DESIGN FOR THE WHOLE SITE
FOR THE WHOLE SITE
3 Use of active White Space
3. Use of active White Space
• White spaces are the blank areas of a pages
• White space that is used deliberately Æ called 
White space that is used deliberately Æ
White space that is used deliberately  called
active white space
• Passive
Passive white spaces are blank areas that 
white spaces are blank areas that
border the screen/result of mismatched shapes

11
 DESIGN
DESIGN FOR THE USER
DESIGN FOR THE 
FOR THE USER
ƒ Knowing your audience/user answers almost 
Knowing your audience/user answers almost
all design questions
ƒ Find out what users expect from your web 
Find out what users expect from your web
site

12
 DESIGN
DESIGN FOR THE USER
DESIGN FOR THE 
FOR THE USER
1 Design for the interaction
1. Design for the interaction
• How the user interact with the information on 
your
your Web pages  content type Æ either your 
Web pages – content type 
content type Æ either your
user will read or scan your pages

ƒ Scanning the content
ƒ Scrolling if necessary
Scrolling if necessary
ƒ Pointing to graphics to see if they are 
hyperlinked
ƒ Clicking linked text
13
 DESIGN
DESIGN FOR THE USER
FOR THE USER
2 Design for 
2. Design for location
Design for location

• Difficult to predict the user’s exact viewing path
Diffi lt t di t th ’ t i i th
• Generally, figure below depicts the sections of 
screen real estate ranked in order of
screen real estate ranked in order of 
importance.

14
 DESIGN
DESIGN FOR THE USER
FOR THE USER
3 Guide the users eye
3. Guide the users eye
• Normal reading habits, user’s eye may move 
from left to right and back again
from left to right and back again

Paper--based reading pattern

Paper
15
 DESIGN
DESIGN FOR THE USER
FOR THE USER
3 Guide the users eye
3. Guide the users eye
• In contrast, when viewing landscape
In contrast, when viewing landscape‐‐based 
display,
display, user scan information following a 
user scan information following a
clockwise pattern

Screen--based viewing pattern

Screen
16
 DESIGN
DESIGN FOR THE USER
FOR THE USER
4 Keep 
4. Keep a flat hierarchy
Keep a flat hierarchy
a flat hierarchy
• Do not make users navigate through too many 
layers of your Web site to find the information
layers of your Web site to find the information 
they want
• Structure your web site to include section or 
Structure your web site to include section or
topic‐‐level navigation pages so users quickly 
topic
find their path
• eg
eg/: Standard navigation bar 
/: Standard navigation bar ‐‐ consistently 
placed on every page, reassure users not lost & 
move through the site with flexibility..
move through the site with flexibility
17
 DESIGN
DESIGN FOR THE USER
FOR THE USER
4 Use the power of hypertext linking
4. Use the power of hypertext linking
5. How much content is enough

18
 DESIGN
DESIGN FOR THE SCREEN
DESIGN FOR THE 
FOR THE SCREEN
1. The
The shape of computer screen
shape of computer screen
2. Design pages that provide enough contrast
3 Computer screens use a much lower resolution 
3. Computer screens use a much lower resolution
than the printed page
4. A screen is not a page
A screen is not a page

19