ITU 07204: Fundamentals of Web
Technologies
Lecture 3: Web Design
Dr. Lupiana, D
FCIM, Institute of Finance Management
Semester 2
Agenda:
• User Experience Design
• User Interface Design
Design Process
• The process of designing a website can be
broken into 2 phases;
– User Experience Design (UX Design)
– User Interface Design (UI Design)
1
Design Process: UX Design
• User experience is how a person feels when
interacting with a system, in this case a
website or web application
• So UX design is a process of designing a
website or a web application to enhance user
satisfaction when interacting with it
• UX designers try to anticipate what could
possibly make users dissatisfied so as to
improve the design
4
Design Process: UX Design
• In particular, UX design focuses on usability,
accessibility, performance and perception of
the value of a website or web application
– How shall the content be structured
– How shall visitors access the content
– What content type shall be included or excluded
– How shall the content be displayed on print mode
– How shall the content be displayed on different
display sizes
Design Process: UX Design
• In a nutshell, UX design involves the following
key tasks;
i. Researching on users
ii. Website organization
iii. Web page design
2
Design Process: UX Design
• In accomplishing task (i), among other things,
a designer should focus on justifying the value
of a website or a web application to users
• User related issues that need to be considered
when designing a website include, but not
limited to;
– Age group
– Computer literacy
– Special needs
Design Process: UX Design
• In accomplishing tasks (ii) to (iv), a designer
should focus on attaining ease of use and
accessibility of a website or a web application
• Usability issues that need to be considered
include, but not limited to;
– Complexity of navigation structures
– Readability i.e. avoid “forest” of texts
– Complexity of interfaces (page layouts)
– Credibility and relevance of content
8
Design Process: UX Design
• Accessibility issues that need to be considered
include, but not limited to;
– Different display sizes
– Users with special requirements
• Users with disabilities,
• Users with screen readers
• Users with non-traditional input devices
– Users who do not have broadband connection
– Users with older mobile devices
3
Design Process: UX Design
• In accomplish task (v), a designer should focus
on making a website or web application
perform good on different bandwidths
• Performance issues that need to be
considered include, but not limited to;
– Usage of too much images
– Usage of large image file sizes
– Usage of too many widgets and plugins
10
10
Design Process: UX Design: Researching on users
• Questions designers need to ask themselves
include, but not limited to;
– What is the purpose of my website?
– Who is my main audience?
– Who is my secondary audience?
– What information is relevant to the target
audience?
– In what depth the information should be
presented and in what ‘language’?
11
11
Design Process: UX Design: Website Organization
• A website or web application, in many cases
represent an organization or a business, which
has a lot of information and/or features
• This information and/or features need to be
well organized to enable visitors (users) to
easily move around your website or web
application
12
12
4
:: Website Organization: Identify Web Pages
• To make organization’s information and/or
features easily accessible on a website or web
application, there is a need of grouping them
into key web pages
• Thus, information about an organization, for
instance, can be grouped into ‘About’ page
13
13
:: Website Organization: Identify Web Pages
• Depending on an organization and the goal of
the website, you may end up with many page
Past Events Travel Info
Speakers Registration
Contacts
Programme
Home Location
About Why Attend?
Submission
Venue
Schedule
Accommodation
Sponsors Committee
14
14
:: Website Organization: Pages Relationships
• Once the pages have been identified, a
designer shall identify the relationships
between the pages, regardless of their order
Submission
About Programme Location
Registration
Past Events Speakers Venue
Committee Accommodation
Schedule Home
Travel Info
Sponsors
Contacts
Why Attend?
15
15
5
:: Website Organization: Website Navigation
• After having a clear picture of how the web
pages relate, a designer shall decide on a
navigation structure to use
• A designer can select one of the following
navigation structures;
– Hierarchical navigation structure
– Linear navigation structure
– Random (Webbed) navigation structure
16
16
:: Website Navigation: Hierarchical Structure
17
17
:: Website Navigation: Hierarchical Structure
• Looks like a family tree
• Used to organize large amounts of information
with categories and subcategories
• It is characterized by a clearly defined home
page with links to major website sections
• Best way to organize complex bodies of
information.
18
18
6
:: Website Navigation: Linear Structure
• Visitors to the website view pages one at a
time in a specific order
• Web pages are arranged in chronological,
alphabetical, or series of a specific order.
19
19
:: Website Navigation: Linear Structure
• Pages have links to the next page and back to
previous or index page only.
• Used for pages that need to be read or
completed in a specific order.
– Step-by-step learning
– Presentations
– Online orders
20
20
:: Navigation Structures: Random Structure
21
21
7
:: Navigation Structures: Random Structure
• Often there is no clear home page
• Allows users to jump to any page of a Website
• Used for sites with a few inter-related pages
– The order of the viewing does not matter.
• Must be consistent or user will get confused
22
22
:: Navigation Structures: Random Structure
• Random structure is not as common as
hierarchical or linear structures
• Random structure usually found on artistic
websites or sites that strive to be especially
different and original
• This structure is typically not used for
commercial websites
23
23
:: Navigation Structures: Sitemaps
• What you end up with after arranging your
pages as specified by the selected navigation
structure is called a sitemap
– A sitemap is a visual representation of
relationships of web pages which shows a path to
and/or from a certain web page
• A site map guides end users who are lost in
the structure or need to find a piece of
information quickly
24
24
8
Design Process: UX Design: Page Layout
• After deciding how the entire content will be
divided and ordered, a designer should start
focusing on layouts of individual pages
• Basically, this is focusing on how the content
of each web page is going to be organized
– If two or more pages have similar layouts then a
layout of only one page can be designed
25
25
:: Page Layout: Wireframes
• Organizing content of a web page can be well
supported by building wireframes
– A wireframe is a visual representation of a page
layout
26
26
:: Page Layout: Wireframes
• Wireframes are used to communicate page
layouts with clients and potential users
• It is therefore a good idea to build at least 3
wireframes for each of key web pages for a
client or users to have options
– Since a home page carries weight of a website or
web application, it is therefore a good idea to
build at least 3 wireframes for the page
27
27
9
:: Page Layout: Wireframes
• You can simply use pen or pencil to build a
wireframe but there are so many tools for
building wireframes;
– Balsamiq – Webflow
– Moqups – Slickplan
– Sketch – Writemaps
– Axure – Mindnode
28
28
Design Process: UI Design
• UI design compliments EX design
– It builds on EX design and specifically wireframes
to provide visual design of the same
– In most cases the visual design is determined by
visual brand of an organization e.g. corporate
colors, logo, font style etc
• UI design is about the look and feel
(presentation and interactivity) of a website or
a web application
29
29
Design Process: UI Design
• UI design involves the following;
– Choosing appropriate color scheme
– Designing or using appropriate logo and other
branding elements
– Choosing appropriate typography
– Design appropriate artwork
– Design visual elements
30
30
10
Design Process: UI Design
• Color scheme: choosing a relevant color
scheme based on client’s preference or
organization’s corporate colors
– The color scheme should send an immediate
message to a website visitor
31
31
Design Process: UI Design
• Logo is a unique symbol that identifies an
organization
– Thus if an organization has no logo then a
designer needs to advise clients to design one
– Combination of a logo, color scheme and other
branding elements such as personality and
positioning forms a basis of the company’s visual
identity and may influence how the visitors
perceive the brand
32
32
Design Process: UI Design
• Typography: choosing appropriate font
families, sizes and other properties
• Artwork: design artwork such as sliders (photo
sliders) and header images such as site
banners
• Visual elements: design visual elements such
as buttons, information boxes, search boxes
and menu boxes (formal, sharp edged or
round edged boxes) 33
33
11
Design Process: Creating Mockups
• A mockup is an explicit representation of a
designer’s internal (or mental) images of a
web page
• In other words, a mockup is a ‘live’
representation of a wireframe
– Putting all visual elements, colors, fonts etc
34
34
Design Process: Creating Mockups
35
35
The “do’s” of good web design
• Name files consistently and logically
• Keep a consistent look and feel (theme)
• Use colors that are high in contrast
• Design for low bandwidth
36
36
12
The “do’s” of good web design
• Use white space
• Design for interaction
• Use hypertext linking effectively
• Design for accessibility
37
37
Things to avoid, aka, the “don’ts”
• Do not overuse media
•
• Do not make users scroll too much
•
• Do not flood pages with content
•
• Do not choose colors or images that make the
page hard to read
38
38
Things to avoid, aka, the “don’ts”
• Don’t forget to title everything: images and
pages
• Don’t assume that your users know where to
go
39
39
13
