Course: Web-based Information Systems Development
Course Code: IS333
Principles of Web Design
Presented by Dr. Shaimaa Mohamed Galal
Prepared by Dr. Dina Ezzat
1
Outline
• Principles of Web Design
• Defining Good Design
• Usability
• Factors that Affect Web Design
• Web Page Structure
• Good and Bad Designs
2
Defining Good Design
• There are main standpoints from which most people determine
whether a website design is “good” or “bad.”
• There’s a strict usability angle, which focuses on functionality,
the effective presentation of information and efficiency.
• What is usability?
• Usability can be described as the capacity of a system to
provide a condition for its users to perform the tasks
effectively and efficiently while enjoying the experience.
3
Usability
Composed of:
• Learnability: how easy is it for users to accomplish basic
tasks the first time they encounter the design?
• Efficiency: once users have learned the design, how quickly
can they perform tasks?
• Memorability: when users return to the design after a period
of not using it, how easily can they re-establish proficiency?
• Errors: how many errors do users make, how severe are these
errors, and how easily can they recover from the errors?
• Satisfaction: how pleasant is it to use the design?
4
Usability Involves
6
Defining Good Design (Cont.)
• Good design requires balancing visual appeal with usability,
because focusing on only one and ignoring the other reduces
user engagement and interest.
• The elements and functionality of a website design should
work as a single cohesive unit, so that:
1. Users are pleased by the design but also drawn to the
content.
6
Good or Bad?
• With respect to visual appeal?
• Is it usable?
7
Defining Good Design (Cont.)
2. Users can move easily via intuitive navigation.
• The main navigation block should be clearly visible on the
page.
• Each link should have a descriptive title.
• A navigation structure that not only changes appearance when
hovered over with the cursor, but also indicates the active page
or section helps users to recognize where they are, and how to
get where they want to go.
8
Good or Bad?
With respect to navigation
9
Defining Good Design (Cont.)
3. Users recognize each page as belonging to the site.
• Even if there’s a difference between the layout of the home
page and the rest of the web application/information system, a
cohesive theme or style should exist across all web application
pages to help hold the design together.
10
Good or Bad?
Same Web Application?
11
Web Page Structure
• Is the structure fixed/same or
vary across different web
applications?
• The number of the necessary
blocks depends on the size and
subject of the site.
• However, most web applications
have these components.
15
Web Page Components
• A web page must have a Containing Block . (The page’s
body tag).
• Logo and Company name: mostly sit at the top of each page of
the website.
• Navigation: use vertical menus down the side of the page, or
a horizontal menu across the page, the navigation should
be as close to the top of the layout as possible.
• Content: main core of the application, consists of text, images
or videos.
• Footer: Located at the bottom of the page, usually contains
copyright, contact and legal information, as well as a
few links to the main sections of the site.
• Whitespace refers to any area of a page without text or
illustrations. 13
Footer Examples
14
Balanced vs Cluttered Web Page
15
Factors that Affect Web Design
• Structure: visual hierarchy
• Colors
• Font type and size
• Contrast between background and text
• Clarity
• Consistency
• Navigation
16
Web Page Structure
• The Rule of Thirds
• Just draw a rectangle, divide it into thirds horizontally and
vertically.
• Then draw a line between each vertical line to create six
columns to work within.
17
Possible Layout Arrangements
18
Balance
• The concept of visual balance is similar to that of physical
balance.
• If the elements on either side of a layout are of equal weight,
they balance one another.
• There are two main forms of visual balance:
1. Symmetrical
2. Asymmetrical
19
Symmetrical Balance
• Symmetrical balance occurs when the elements of a
composition are the same on either side of an axis line.
20
Symmetrical Balance: Example 1
21
Symmetrical Balance: Example 2
22
Asymmetrical Balance
• Asymmetrical balance involves objects of differing size, shape
or placement.
• These objects are arranged so that, despite their differences,
they equalize the weight of the page; for instance, if you have
a large object on one side of a page, and partner it with several
smaller items on the other side, the composition can still feel
balanced.
23
Asymmetrical Balance (Cont.)
12
Asymmetrical Balance: Example 1
25
Asymmetrical Balance: Example 2
26
Unity
• The way in which the different elements of a composition
interact with one another.
• A unified layout is one that works as a whole rather than being
identified as separate pieces.
27
Good or Bad?
• With respect to unity?
28
Good or Bad?
• With respect to unity?
29
Good or Bad?
The whole design
30
Good or Bad?
The whole design
• The design lacks contrast
31
Good or Bad?
The whole design
• Proper contrast
32
Good or Bad?
The whole design
33
Good or Bad?
The whole design
• Inconsistent style
• What else?
34
Good or Bad?
The whole design
35
References
• The Principles of Beautiful Web Design, Jason Beaird and
James George, SitePoint Pty Ltd, Third Edition.
36