ITU 07204: Fundamentals of Web

Technologies
Lecture 5: Web Design

Dr. Lupiana, D
FCM, InsFtute 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
interacFng with a system, in this case a
website or web applicaFon
• So UX design is a process of designing a
website or a web applicaFon to enhance user
saFsfacFon when interacFng with it
• UX designers try to anFcipate what could
possibly make users dissaFsfied so as to
improve the design
4

Design Process: UX Design

• In parFcular, UX design focuses on usability,
accessibility, performance and percepFon of
the value of a website or web applicaFon
– 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 organizaFon
iii. Web page design

2
Design Process: UX Design
• In accomplishing task (i), among other things,
a designer should focus on jusFfying the value
of a website or a web applicaFon 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 (iii), a designer
should focus on a\aining ease of use and
accessibility of a website or a web applicaFon
• Usability issues that need to be considered
include, but not limited to;
– Complexity of navigaFon 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 disabiliFes,
• Users with screen readers
• Users with non-tradiFonal input devices
– Users who do not have broadband connecFon
– Users with older mobile devices

3
Design Process: UX Design
• In accomplish task (v), a designer should focus
on making a website or web applicaFon
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

Design Process: UX Design: Researching on users

• QuesFons 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 informaFon is relevant to the target
audience?
– In what depth the informaFon should be
presented and in what ‘language’?

11

Design Process: UX Design: Website OrganizaFon

• A website or web applicaFon, in many cases
represent an organizaFon or a business, which
has a lot of informaFon and/or features
• This informaFon and/or features need to be
well organized to enable visitors (users) to
easily move around your website or web
applicaFon

12

4
:: Website OrganizaFon: IdenFfy Web Pages

• To make organizaFon’s informaFon and/or

features easily accessible on a website or web
applicaFon, there is a need of grouping them
into key web pages
• Thus, informaFon about an organizaFon, for
instance, can be grouped into ‘About’ page

13

:: Website OrganizaFon: IdenFfy Web Pages

• Depending on an organizaFon and the goal of

the website, you may end up with many page
Past Events Travel Info
Speakers RegistraFon

Contacts
Programme
Home LocaFon
About Why A\end?
Submission
Venue
Schedule
AccommodaFon
Sponsors Commi\ee

14

:: Website OrganizaFon: Pages RelaFonships

• Once the pages have been idenFfied, a

designer shall idenFfy the relaFonships
between the pages, regardless of their order

Submission
About Programme LocaFon
RegistraFon
Past Events Speakers Venue
Commi\ee AccommodaFon
Schedule Home
Travel Info
Sponsors
Contacts
Why A\end?

15

5
:: Website OrganizaFon: Website NavigaFon

• Ajer having a clear picture of how the web

pages relate, a designer shall decide on a
navigaFon structure to use
• A designer can select one of the following
navigaFon structures;
– Hierarchical navigaFon structure
– Linear navigaFon structure
– Random (Webbed) navigaFon structure

16

:: Website NavigaFon: Hierarchical Structure

17

:: Website NavigaFon: Hierarchical Structure

• Looks like a family tree
• Used to organize large amounts of
informaFon
with categories and subcategories
• It is characterized by a clearly defined home
page with links to major website secFons
• Best way to organize complex bodies of
informaFon.

18

6
:: Website NavigaFon: Linear Structure

• Visitors to the website view pages one at a

Fme in a specific order

• Web pages are arranged in chronological,

alphabeFcal, or series of a specific order.
19

:: Website NavigaFon: 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
– PresentaFons
– Online orders

20

:: NavigaFon Structures: Random Structure

21

7
:: NavigaFon Structures: Random Structure
• Ojen 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 ma\er.

• Must be consistent or user will get confused

22

:: NavigaFon Structures: Random Structure

• Random structure is not as common as
hierarchical or linear structures

• Random structure usually found on arFsFc

websites or sites that strive to be especially
different and original

• This structure is typically not used for

commercial websites

23

Design Process: UX Design: Page Layout

• Ajer deciding how the enFre 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

24

8
:: Page Layout: Wireframes

• Organizing content of a web page can be well

supported by building wireframes
– A wireframe is a visual representaFon of a page
layout

25

:: Page Layout: Wireframes

• Wireframes are used to communicate page

layouts with clients and potenFal 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 opFons
– Since a home page carries weight of a website or
web applicaFon, it is therefore a good idea to
build at least 3 wireframes for the page

26

:: 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

27

9
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 organizaFon e.g. corporate
colors, logo, font style etc
• UI design is about the look and feel
(presentaFon and interacFvity) of a website or
a web applicaFon

28

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

29

Design Process: UI Design

• Color scheme: choosing a relevant color
scheme based on client’s preference or
organizaFon’s corporate colors
– The color scheme should send an immediate
message to a website visitor

30

10
Design Process: UI Design
• Logo is a unique symbol that idenFfies an
organizaFon
– Thus if an organizaFon has no logo then a
designer needs to advise clients to design one
– CombinaFon of a logo, color scheme and other
branding elements such as personality and
posiFoning forms a basis of the company’s visual
idenFty and may influence how the visitors
perceive the brand

31

Design Process: UI Design

• Typography: choosing appropriate font
families, sizes and other properFes
• Artwork: design artwork such as sliders (photo
sliders) and header images such as site
banners
• Visual elements: design visual elements such
as bu\ons, informaFon boxes, search boxes
and menu boxes (formal, sharp edged or
round edged boxes) 32

Design Process: CreaFng Mockups

• A mockup is an explicit representaFon of a
designer’s internal (or mental) images of a
web page
• In other words, a mockup is a ‘live’
representaFon of a wireframe
– Puong all visual elements, colors, fonts etc

33

11
Design Process: CreaFng Mockups

34

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

35

The “do’s” of good web design

• Use white space
• Design for interacFon
• Use hypertext linking effecFvely
• Design for accessibility

36

12
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

37

Things to avoid, aka, the “don’ts”

• Don’t forget to Ftle everything: images and
pages
• Don’t assume that your users know where to
go

38

13