LANDING PAGE &

WEBSITE BUILDING

LESSON 6
BUILD A BASIC WEBSITE

1
CONTENT
• How to Design a Website

• Design Principles

• How to Build a Simple Website

• Setting Up on WordPress

• Setting Up on Haravan

Landing Page & Website Building - Build a Basic Website 2

HOW TO DESIGN A WEBSITE
The Four Key Components of Effective Website Design

Information
Design Content Optimization
Architecture

Texts, videos,
Look and feel of
and images on Ongoing
Framework of a the website:
the site that adaptation of
website layout, fonts,
users will the website
and colors
engage with

Landing Page & Website Building - Build a Basic Website 3

HOW TO DESIGN A WEBSITE
Information
Architecture

Framework of a
website

Source: Chakrapani, A. et al. (2020). A Pandemic-specific ‘Emergency Essentials Kit’ for Children in the Migrant BoP communities [online], viewed July 10 2022, from:
<https://www.researchgate.net/figure/Information-Architecture-for-a-Smartphone-App-and-b-Website_fig5_345598689>

Landing Page & Website Building - Build a Basic Website 4

HOW TO DESIGN A WEBSITE

Information Architecture

Information Architecture (IA) covers the page structure, navigation levels, user pathways, and
page URLs of the site. This is how you start to map it out:
1. Use a table or an Excel document, map out and plan the pages and URL structure of your
website.
2. Categorize content themes together.
3. Try to avoid having an overly complicated or lengthy URL structure.
4. Use your IA to determine site navigation and wireframe design.

Landing Page & Website Building - Build a Basic Website 5

HOW TO DESIGN A WEBSITE
IA covers the page structure, navigation levels, user pathway, and page URLs of the site.

Source: DMI

Landing Page & Website Building - Build a Basic Website 6

HOW TO DESIGN A WEBSITE

Design

Look and feel of

the website:
layout, fonts,
and colors

Source: Wix. School Website Template [online], viewed July 10 2022, from:
<https://www.wix.com/website-template/view/html/2829?originUrl=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Feducation%2Fschools-universities&tpClick=view_
button&esi=037b647b-84e8-4816-8df5-cb9e8c34e9ec>

Landing Page & Website Building - Build a Basic Website 7

HOW TO DESIGN A WEBSITE

Design

Design is what a website looks like, and the better quality the design, the more likely someone
will want to engage with it. Here are some of the tasks a web designer should do in the initial
phase of a website project:
1. Create a prototype of the website that shows the structure and layout but does not include
graphical elements. This is called a wireframe and it is based on the IA.
2. Design a mockup of the website by adding graphics and colors to the wireframes.
3. Implement changes with the help of a web developer once approved.

Landing Page & Website Building - Build a Basic Website 8

HOW TO DESIGN A WEBSITE

Content

Texts, videos,
and images on
the site that users
will engage with

Source: Lieback, R. (2021). The Ultimate SEO Content Creation Guide [online], viewed July 10 2022, from:
<https://www.searchenginejournal.com/seo-content-creation-guide/412729/>

Landing Page & Website Building - Build a Basic Website 9

HOW TO DESIGN A WEBSITE
Content

How do you start planning or improving your website content?

1. Write website content for each page in your information architecture.
2. Proofread the content.
3. Source images for all pages.
4. Add content to the website once the design has been uploaded.

Landing Page & Website Building - Build a Basic Website 10

HOW TO DESIGN A WEBSITE

Source: Raybould, M. (2022). 14 Tips for Writing Awesome

Website Content [online], viewed July 10 2022, from:
<https://www.semrush.com/blog/14-tips-for-writing-awesom
e-website-content/>

Landing Page & Website Building - Build a Basic Website 11

HOW TO DESIGN A WEBSITE

Optimization

Ongoing
adaptation of
the website

Source: denayune. Website loading speed optimization vector illustration [online], viewed July 10 2022, from:
<https://www.freepik.com/premium-vector/website-loading-speed-optimization-vector-illustration_17957224.htm>

Landing Page & Website Building - Build a Basic Website 12

HOW TO DESIGN A WEBSITE
Optimization

Optimization covers the steps involved in measuring and updating elements of your website to improve
the user experience, conversions, and SEO performance. Here is what you need to do:
1. Include SEO keywords in page title tags, headings and web page content so that search engines
can find your website.
2. Report on visitor engagement using website analytics tools.
3. Try to identify friction points with conversion funnels and goal tracking.
4. Be mindful of traffic spikes, metric changes or other anomalies as they may indicate an opportunity
or a problem.
5. Use data to drive decisions and inform your website optimization strategy.

Landing Page & Website Building - Build a Basic Website 13

HOW TO DESIGN A WEBSITE
● Ideally, you would plan and decide on
the structure of your product pages
and URLs before you build a website
so that you can manage the content as
efficiently as possible.
● Let’s look at a sample IA and URL
structure and see how it drills down
from the top level to an individual
product page.

Source: DMI

Landing Page & Website Building - Build a Basic Website 14

HOW TO DESIGN A WEBSITE
To optimize your website:

Source: DMI

Landing Page & Website Building - Build a Basic Website 15

DESIGN PRINCIPLES
The Key Aspects of Web Design
The priority of great web design is to make everything self-explanatory and as easy as possible for
website visitors.
Consistent
Simplicity Easy to Navigate Device-friendly Cohesive Design
Information

The site design is Visitors can get the Page information is The website is easy Colors, layout,
not distracting and information or updated and feels to use on different typography, and
makes it easy to complete the like part of the devices. For design are the
use and actions they want same web and example, people same across all
understand. to easily move from brand experience. can access and areas of the site to
one part of the site view the same
Buttons with CTAs help you enjoy the
to the other. pages on mobile as
are easy to click on. experience. This
they can on
includes branding,
desktop. This might
link colors, photo
require adding a
“view as desktop” choice, and
link at the bottom of formatting.
the pages.

Landing Page & Website Building - Build a Basic Website 16

HOW TO BUILD A SIMPLE WEBSITE

Source: DMI

Landing Page & Website Building - Build a Basic Website 17

HOW TO BUILD A SIMPLE WEBSITE

Source: DMI

Landing Page & Website Building - Build a Basic Website 18

HOW TO BUILD A SIMPLE WEBSITE

Source: DMI

Landing Page & Website Building - Build a Basic Website 19

HOW TO BUILD A SIMPLE WEBSITE
Typical Steps for Building a Simple Website:

Source: DMI

Landing Page & Website Building - Build a Basic Website 20

SETTING UP ON WORDPRESS
To start building a website:
1. Select a domain provider such as GoDaddy, LetsHost, Black Knight, etc. We will use WordPress and
Haravan for this lesson.

Source: GoDaddy

Landing Page & Website Building - Build a Basic Website 21

SETTING UP ON WORDPRESS
2. Set up a WordPress account and select a suitable package that meets your requirements using the
following link: https://wordpress.com/home/oldyounewmecom.wordpress.com

Source: WordPress

Landing Page & Website Building - Build a Basic Website 22

SETTING UP ON WORDPRESS
2. Set up a WordPress account and select a suitable package that meets your requirements using the
following link: https://wordpress.com/home/oldyounewmecom.wordpress.com

Source: WordPress

Landing Page & Website Building - Build a Basic Website 23

SETTING UP ON WORDPRESS
3. Log into WordPress You can log into Wordpress Admin directly.

Source: WordPress

Landing Page & Website Building - Build a Basic Website 24

SETTING UP ON WORDPRESS

4. In the backend of
WordPress, you can
customize the appearance
of your website and
modify the theme.

5. Select a theme and

template for your website.

Source: WordPress

Landing Page & Website Building - Build a Basic Website 25

SETTING UP ON WORDPRESS
6. Install the template and fill in your website’s details.

Source: WordPress

Landing Page & Website Building - Build a Basic Website 26

SETTING UP ON WORDPRESS
7. Connect a domain to the Wordpress.com platform.

(1)

Source: WordPress

Landing Page & Website Building - Build a Basic Website 27

SETTING UP ON WORDPRESS

(2)

Source: WordPress

Landing Page & Website Building - Build a Basic Website 28

SETTING UP ON WORDPRESS

(3)

Source: WordPress

Landing Page & Website Building - Build a Basic Website 29

SETTING UP ON WORDPRESS
8. Once you have
finished building a new
page, click Publish to
publish it to your
website.

Source: Phuong Dung

https://penelopesaigon.wordpress.com/

Landing Page & Website Building - Build a Basic Website 30

SETTING UP ON HARAVAN
Haravan is one of the top platforms
for building websites in Vietnam.

Over 20,000 Vietnam top brands

and entrepreneurs have trusted and
used Haravan.

Haravan’s website building process

is similar to WordPress.
Source: Phuong Dung

Landing Page & Website Building - Build a Basic Website 31

SETTING UP ON HARAVAN

You can use the

free trial with full
functions for 14
days.

Source: Haravan

Landing Page & Website Building - Build a Basic Website 32

SETTING UP ON HARAVAN

Compare to other website

platforms, Haravan has these
advantages:
● Very simple and easy to use
● Over 200 designer-made
templates for many
industries
● Can be swiftly customized
as needed
Source: Haravan

Landing Page & Website Building - Build a Basic Website 33

SETTING UP ON HARAVAN

Strong connection
to e-marketplaces
such as Lazada
and Shopee.

Source: Haravan

Landing Page & Website Building - Build a Basic Website 34

SETTING UP ON HARAVAN
Haravan is also integrated with delivery services.

Source: Haravan

Landing Page & Website Building - Build a Basic Website 35

SETTING UP ON HARAVAN
Detailed and Visual Reports

Source: Haravan

Landing Page & Website Building - Build a Basic Website 36

SUMMARY
• After this lesson, students can create their own websites using Wordpress.
The websites must follow all the steps and contain all the elements as the
demo.
• Students are given an exercise where they will build their own websites with
the knowledge learned.
• Students have an overview of the Haravan platform.

Landing Page & Website Building - Build a Basic Website 37

38 38