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