CREATING A WEBSITE

Module 9

I A N J A D E E . L O Z A D A , M B A
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
C E N T R A L P H I L I P P I N E U N I V E R S I T Y 1
 LEARNING

C E N T R A L
COLLEGE OF BUSINESS AND ACCOUNTANCY
I A N
J A D E
OBJECTIVES:

P H I L I P P I N E

E .
L O Z A D A ,
1. Define a website design

U N I V E R S I T Y

M B A
2. Learn how to design a
website
3. Understand what makes a
good website design
4. Discover what are the best
practices for a good website
design and usability

2
I A N J A D E E . L O Z A D A , M B A
C O L L E G E O F B U S I N E S S A N D
A C C O U N T A N C Y
3

C E N T R A L P H I L I P P I N E U N I V E R S I T Y
• What makes a
DISCUSSION

good website
QUESTION:

design?
 C
A
C
I
A
E
C
O
N
N T R A L
C O U N T A N C
L L E G E
J A D E
CREATING A WEBSITE

O F
P H I

E .
B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
4
As technology
advances, it enables
Learning how to design What is web design
us to achieve more and
a website by yourself is and how do you get
more tasks without
one of these. started?
even realizing how
complex they are.
 CENTRAL PHILIPPINE UNIVERSITY
COLLEGE OF BUSINESS AND ACCOUNTANCY
IAN JADE E. LOZADA, MBA
Web design refers to the design
of websites that are displayed on
the internet.

Web design is the process of

planning, conceptualizing, and
arranging content online.
CREATING
Designing a website today goes
A WEBSITE beyond aesthetics to include the
website’s overall functionality.

Web design also includes web

apps, mobile apps, and user
interface design.
5
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
HOW TO DESIGN A WEBSITE
1. Goal Setting
2. Choose a website builder
3. Define your layout
4. Claim the domain name
5. Gather your content
6. Add the right pages
7. Design website elements
8. Pick the professional tools needed

6
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
HOW TO DESIGN A WEBSITE –CONT’D

9. Make it accessible to everyone

[Link] for mobile
[Link] the SEO
[Link] with visitors
[Link] for feedback
14. Publish and update

7
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
Goal setting – being crystal
clear about what to achieve.

Considerations for
designing a website:
1. GOAL SETTING • An online store to sell your
product
• A portfolio website to showcase
your art
• A business website to manage
and grow your business
• A resume website to grab the
attention of potential employers
8
 C E N
A C C
C O L
I A N
L E G E O F B U S I N E S S A N D
O U N T A N C Y
T R A L P H I L I P P I N E U N I V E R S I T Y

J A D E E . L O Z A D A , M B A
e. A blog to share your knowledge with
the world
1. GOAL
f. An event website for weddings, parties SETTING
and company events
g. A photography website to display and
sell prints
h. A fitness website to book new clients
i. A restaurant website to help with
online orders, delivery and payment

9
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
Choose website builder – A
website builder (also known as a
CMS) is a platform on which you
can design, personalize and publish
a website without any knowledge of
coding.
Considerations:
2. CHOOSE
a. Price models
WEBSITE b. Design Customization
BUILDER c. Professional solutions
d. Unique design features
e. Customer service

10
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
3. DEFINE THE LAYOUT

A website layout is the arrangement of all visual elements

on the webpage and the resulting relationships between
them.

It determines the sequence in which page elements are

registered amongst visitors, which elements draw the most
attention, and the overall balance achieved in the design.

A good website layout can lead visitors’ focus in the right

direction.

11
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
3. DEFINE THE LAYOUT

Considerations:

• Accommodate the content

• Content is heavy – multi-site
• Content is less – one page website
• Use common lay-outs
• Z-layouts, F-pattern, Fullscreen image, Split
screen, Asymmetrical layout, single column,
box-based, cards layout, magazine layout and
horizontal strips layouts

12
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Pages that are highly
visual and contain minimal
written copy. 13

• Landing pages that serve a

specific conversion purpose are
usually a perfect fit
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Websites that mainly
revolve around text.
14
• When creating a blog, for example,
this website layout is applicable for
both the homepage and the
individual blog post pages.
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Businesses that want to
highlight a specific niche or product.
15
• For example, restaurant websites can
proudly display a particular dish,
while a wedding website can show
the happy couple.
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Websites that offer two
significantly different types of content,
or websites that want to evenly combine 16

written copy and imagery.

• Online stores that segment users by age,
gender or behavior are a good fit for this
layout.
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Websites that are going for
the contemporary and innovative look,
and are interested in driving user 17

engagement.
• A business website or the portfolio of a
design agency are good examples.
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Long-form content
websites, or websites that display
content in chronological order. 18

• These can be anything from blogs to

social media feeds.
 C
A
C
I
A
E
C
O
3. DEFINE THE

N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
LAYOUT

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
• Ideal for: Complex website structures
with several pages.
19
• This layout is a good solution for a
graphic design portfolio, with each
box leading to a different project page.
I A N J A D E E . L O Z A D A , M B A
20

C O L L E G E O F B U S I N E S S A N D
A C C O U N T A N C Y
C E N T R A L P H I L I P P I N E U N I V E R S I T Y
website layout is perfect for a vlog or an
• Ideal for: Content-rich websites. This
3. DEFINE THE
LAYOUT

online store.
I A N J A D E E . L O Z A D A , M B A
21

C O L L E G E O F B U S I N E S S A N D
A C C O U N T A N C Y
C E N T R A L P H I L I P P I N E U N I V E R S I T Y
3. DEFINE THE

• Ideal for: Content-heavy

LAYOUT

websites such as news

publications or blogs.
I A N J A D E E . L O Z A D A , M B A
22

C O L L E G E O F B U S I N E S S A N D
A C C O U N T A N C Y
C E N T R A L P H I L I P P I N E U N I V E R S I T Y
layout is particularly beneficial when it
• Ideal for: Long-scroll websites. This
3. DEFINE THE

comes to one page design.

LAYOUT
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
4. CLAIM THE DOMAIN NAME

Domain name is your address on the internet. It’s what your

visitors will see in the bar of their browser, right after the www.

Considerations:

• Registering the domain name is critical for online success.

• Websites with a customized domain are automatically perceived by
internet users as more professional and trustworthy.
• Picking a domain name also means using the right domain
extension like .org, .com and .net

23
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
4. CLAIM THE DOMAIN NAME

Short: The longer it is, the higher the chances of visitors misspelling it.

Simple: Avoid symbols, special characters and numbers.

Professional: domain name should incorporate own name or business

name, to avoid confusion.

Evocative: incorporate words that are related to your business.

24
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
5. GATHER THE
CONTENT

Gather the content – what the

website is all about includes
images, text, logo, videos, and
more. 25

Considerations:
a. Use own materials as much as
possible to ensure you’re
offering unique and branded
content.
b. Content is fully branded
 CENTRAL PHILIPPINE UNIVERSITY
COLLEGE OF BUSINESS AND ACCOUNTANCY
IAN JADE E. LOZADA, MBA
6. ADD THE RIGHT PAGES
Contact page: When visitors want to reach out, they should be able to get hold of you easily. Make sure to
include your phone number, postal address, business email address and social media accounts.

Product or service page: the product page (or service page, depending on your industry) is where your
visitors discover what you have to offer, and if they’re convinced, take out their credit card and make a
purchase.

A blog: Creating a blog boosts your reputation as an expert, helps you foster a loyal community, and is an
effective way to drive traffic to your website.

Testimonials: An honest testimonials page is a wonderfully effective addition to your website design.

Splash page: A splash page acts as a preview to your site, greeting visitors before they reach your
homepage.

FAQ page: An FAQ page is a dedicated page on your website that provides visitors with quick and simple
answers to common questions in an organized and structured manner. It can save time by providing
automated answers and provide a great experience for users.
Policies, Rules, Regulations and Shipping fees – this is a dedicated page intended for the specific policies,
rules and regulations and shipping or returns. It outlines the company’s shipping options, costs, timelines,
and procedures.
26
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
7. DESIGNING THE WEBSITE
it is all about the details of the website and how to arrange them to
form one cohesive design and must be guided by your brand identity.

Considerations:
• Website architecture
• Menu
• Colors / Themes
• Fonts
• Header & footer
• Motion
• Scroll effects
• Favicon - A favicon is a small icon that will be used in a website browser to “represent”
your website
• Whitespace

27
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
ACCESSIBILITY, OPTIMIZE,
STRENGTHENING SEO
9. Accessibility – making it accessible to everyone

10. Optimize for mobile

11. Strengthen the SEO

Considerations:

• Conduct keyword research

• Include on-page SEO
• Add alt text
• Boost internal linking
28
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
12. ENGAGE WITH VISITORS
- connecting with followers across multiple channels is
a powerful way to build relationships with them - and
will ultimately bring more eyes to your site.
Considerations:
a. Live chat
b. Social media
c. Newsletter
d. Forms

29
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
13. ASK FOR FEEDBACK
Considerations:
a. Check text and spelling
b. Navigation of pages
c. Website is optimized for mobile device
d. Links are working
e. SEO elements are filled out correctly

14. Publish and update

30
 WHAT MAKES A

C
A
C
I
GREAT

A
E
C
O
N
N T R A L
C O U N T A N C
L L E G E
J A D E
O F
P H I

E .
ECOMMERCE SITE?

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
U N I V E R S I T Y

M B A
A N D
1. Beautifully designed
2. Fast. Fast. Fast
3. Many products to choose
from
4. Mobile-friendly
5. User-generated reviews

31
 CENTRAL PHILIPPINE UNIVERSITY
COLLEGE OF BUSINESS AND ACCOUNTANCY
IAN JADE E. LOZADA, MBA
1. BEAUTIFULLY
DESIGNED

Great ecommerce website design should:

• Use a color scheme and typography that matches
your brand.
• Include a lot of white space to make it easier on
the eyes.
• Have eye-catching call-to-action (CTA) buttons.
Bright colors work best.
• Follow the best conversion rate optimization
practices.
• SEO (search engine optimization) friendly.
• Easy to share on social media.

32
 C
A
C
I
A
E
C
O
N
N T R A L
C O U N T A N C
L L E G E
Ensuring fast website one

J A D E
O F
P H I

E .
must:

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
• Choose a reliable ecommerce

U N I V E R S I T Y

M B A
A N D
platform.
• Install a content delivery network
(CDN) if you publish a lot of content.
33
• Compress product images and
videos.
• Remember, when it comes to site
2. IT MUST BE speed, every second matters.
Literally.
FAST
 C
A
C
I
A
E
C
O
N
N T R A L
C O U N T A N C
L L E G E
Set up an easy-to-browse

J A D E
O F
P H I

E .
product catalog featuring:

B U S I N E S S
Y
L I P P I N E

L O Z A D A ,
• Clear navigation — categories, tags,

U N I V E R S I T Y

M B A
A N D
filters
• Advanced functionality — filters,
search by size, color, material
• Attractive visuals — clean design,
beautiful color palette, product
photography

3. MANY • Almost complete description of the

product – size, materials and design
PRODUCTS TO
CHOOSE FROM 34
 C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
4. MOBILE
FRIENDLY
Apart from using a responsive,
mobile-friendly website theme,
be sure to:
• Adapt your layout for finger scrolling.
• Use crisp pop-up product images.
• Reduce the number of fields on the
checkout page.
• Include big call-to-action buttons (e.g.,
add-to-cart button).

35
 CENTRAL PHILIPPINE UNIVERSITY
COLLEGE OF BUSINESS AND ACCOUNTANCY
IAN JADE E. LOZADA, MBA
5. USER
GENERATED
REVIEWS
• User-generated content (UGC)
such as customer reviews are a
must-have for an ecommerce
store.
• The volume of product reviews
increases the conversion rates.

36
 BEST PRACTICES FOR WEB DESIGN

C E N T R A L P H I L I P P I N E U N I V E R S I T Y
C O L L E G E O F B U S I N E S S A N D A C C O U N T A N C Y
I A N J A D E E . L O Z A D A , M B A
AND USABILITY
Practices Purpose
❑ Simplicity (Colors, Typefaces, Remove unnecessary design elements
Graphics)
❑ Visual Hierarchy Arranging and organizing website elements so that visitors naturally
gravitate toward the most important elements first.
❑ Navigability Help visitors find what they're looking for.
❑ Consistency (Content, Mobile Overall look and feel of your site should be similar across all of your
Friendly) site's pages
❑ Responsivity (Load Time) Investing in a highly flexible website structure
❑ Accessibility Goal of web accessibility is to make a website that anyone can use,
including people with disabilities or limitations that affect their
browsing experience.
❑ Conventionality Balancing originality with your expectations
❑ Credibility Increase the level of trust your site conveys
❑ User-Centricity Conduct user testing, gather feedback, and implement changes
37
 1. Homepage
2. Landing page

CENTRAL PHILIPPINE UNIVERSITY

COLLEGE OF BUSINESS AND ACCOUNTANCY
IAN JADE E. LOZADA, MBA
3. Category pages
4. Product pages
5. Checkout page
6. About us page / Contact us page
7. Search bar and search results
page
8. Account registration and login
E-COMMERCE forms
WEBSITE DESIGN 9. Email subscription form
10. Blogs
CHECKLIST 11. Customer feedbacks / reviews
12. Set-up live chat box or help desk
13. Policy for shipping, refunds,
returns
14. Frequently asked questions
(FAQ) page
15. Test run website
38