Empowerment Technologies

1
Web Page Design

Web Page Design

By now, you probably have a clear understanding of how the Internet works.
You probably already know that electronic data is stored in computers and
shared with other computers through a massive global network. Now, think
about how this information is presented to you. As a user, you prefer to view
information in a manner that makes sense to you. Information should be
delivered in a way that is organized and easy to locate and understand. This
is achieved through websites. In this chapter, we will learn what makes up a
website and what goes into building one.
What is a website?
In simple terms, a website is a collection of web pages that can be accessed
through the Internet. A website typically serves a single topic or function.
Technically speaking, a website an online location that points to a group of
web pages.
What is a web page?
A web page is an electronic document that is stored in a server and can be
accessed through the Internet using a web browser. Web pages are the
backbone of websites.

Parts of a website
When designing a website, you have to take into consideration the people
who will use it. One of the main goals of a designer is to make the website
simple and easy to use. This is why even though some creative liberties can
be taken in designing a website, it is still important to include features that
the users are familiar with.
The following are the most common components found in websites:
1. Header
Also known as a masthead, the header is usually located at the top of each
web page and contains the website’s name and logo. Its purpose is to display
the websites name and logo in order to make it instantly recognizable to
users.
2. Navigation
The navigation section is an interactive list that contains the names of the
webpages in a website. It can be located anywhere in the webpage but it is
preferable to place it where it can be easily seen. Users can go to another web
page by clicking its name in the navigation.

Course Module
3. Content Section
As you may already know, contents are the main focus of any website.
Contents like texts, images, and videos take up the largest space in websites.
4. Contact Section
The contact section is usually in a separate web page. It contains the
website’s contact information such as phone numbers, email address, and
office address. It is also a common practice to add a message box in the
contact section so that the user can leave a direct message for the website
owners.
5. Call to Action
A call to action is a message or instruction that urges the users to do an
action. It is typically in the form of a command like “Click here”, “Sign our
petition” or “Watch the trailer here.” This is important to websites that are
created to gather public response such as advocacies and commercial
enterprises.
6. About us
“About us” can be a section or a page that tells the users about the persons or
organization that owns the website. The purpose of this page is to establish
the credibility of the website owner. It usually contains a biography or
history of the owner, their achievements and their Mission and Vision.
7. Footer
As the name implies, the footer is always at the bottom of the web page. Its
purpose is to display links to important information. The most common
details that can be accessed through the footer are Terms of Service,
Copyright information, FAQs (frequently asked questions) and personal
information about the creators of the site.
Weebly
It is not surprising to learn that most commercial websites are created and
maintained by skilled and experienced developers. Such skills and
experience are required to come up with unique and groundbreaking designs
and features.
However, there are also ways to design a website even if you are not a
programmer or a designer. There are tools called website builders that can be
used to create websites without having to write code. These tools can either
be native or web-based. For this lesson, we will learn how to build a website
using one of these tools.
We will be creating a website using Weebly. Weebly is a web hosting service
and a website building tool. Weebly relies primarily on its drag-and-drop
feature to place and manipulate design elements.
You can use weebly for free but you can also sign up for a paid membership
to gain access to exclusive features.

Follow these steps to sign up and create your website:

 Empowerment Technologies
3
Web Page Design

Step 1. In your web browser, go to www.weebly.com

Step 2. Click Sign Up. In the Sign Up window, enter you name, email address
and your preferred password then click the Sign Up button at the bottom.

Step 3. Select a theme. The themes are grouped into categories such as
Business, Online Services, Personal, etc.

Course Module
Step 4. Choose Your Website Domain. Type your preferred domain name
under the “Use a Subdomain of Weebly.com” box. As a free user, your address
will have “.weebly.com”

Step 5. Get started. Your website has been created. Now you can start
designing it.

Website Design
Explore the following features to come up with your own designs. Weebly
provides tutorial articles in their help center. Check them out here:
https://hc.weebly.com/hc/en-us
Each design element that we will discuss will include a Youtube video. These
videos were created by Weebly as quick reference materials for first-time
users like you:
Dashboard
The dashboard or home page is the first page that you will see after you log
in. From here, you can access the other features like the page editor. Here,
you can also see statistics related to your website.
 Empowerment Technologies
5
Web Page Design

Elements
On the left side of the Editor page, you will see Weebly Elements. Weebly
elements is a collection of design elements that you can add to your website.
These include text, image, slideshow and map. To add an element, click, drag
then drop it to the spot where you want to place it.
Check out this video to learn more about elements: https://youtu.be/CXFZ-
0HHO1I

Course Module
Pages and Navigation
You can add multiple pages in your website through the Pages tab. Here you
can also edit, copy and delete existing web pages.
A navigation feature is automatically included in your website but its design
and location depends on the theme that you use.
For more details, check out Weebly’s how-to video about pages and
navigation: https://youtu.be/a7_LQq1teyo

Themes
You can change the look of your website in the Theme tab. Here you can
select a different color scheme or change your website’s theme and fonts
To select a new theme, click Change Theme, which will bring you to the
Theme Gallery. Browse through the categories to find a theme that you like.
Weebly themes work with computers and mobile devices.
To learn more, follow the instructions on this video:
https://youtu.be/4TZqFc5bDhA
 Empowerment Technologies
7
Web Page Design

Page Layout
Weebly layouts are sets of elements that you can add to your website. By
using a layout, you can immediately fill your pages with matching elements.
You can then edit these elements to add your own details.
To do this click “Choose a Layout” in the middle of a blank page. This will
open the list of layouts grouped by category. Click a layout to see a preview of
it. Click Keep to use this layout or Cancel to go back to the list.
Video reference: https://youtu.be/Vu4lwfbO6ko

Activity: Designing your own website

In this activity, you will use everything that you have learned so far in
designing your own website.
Before we start, you have to think of a purpose for your website. It can be the
official website of an organization, a personal website that features your
portfolio, or a marketing site for selling your products.
For this activity, we will be designing a website for our subject;
Empowerment Technologies.
1. Choose your theme.
By now, you should alreay know how to open the Editor page. To start
building your website, first select a theme. You can use the one that you
selected during signup or if you want to, you can change it in the THEME tab.
Each theme comes with a default image but you can easily change it.

2. Design your home page

By default, your website has one page. We will turn this page into the Home
page. Change the page name to Home. You may notice that the lower part of
the page is blank. Click “Start with a Layout” and select a layout that will fill
this part. Remember that all Elements can be customized. You can move or
delete elements or add new ones in the BUILD tab.
Course Module
3. Add more pages
You can add and design more pages depending on what your website needs.
For the Empower-Tech website, we will add pages for Chapters, References,
and Activities.
To add a new page, click the + sign in the PAGES tab then click Standard Page.
You can experiment with other types of pages like Blog and Store but most of
the time, Standard is what you’ll need. Add a name for your page. The name
of the page will automatically appear in the navigation section.
Like what we did in the Home page, you can customize your header and add
elements either by using a layout or by manually adding them from the
BUILD tab.Activities

4. Add an About Us page

As discussed earlier in this chapter, the “About Us” page or section contains
information about the owner of the website. In this case, the owner is you.
Create a new page named “About Us” if you work in a team or “About the
Author” if you work alone. Add some details about yourself such as your
experience in the website’s topic, your career, and your other projects.
There are Layouts that are designed specially for this purpose. You can
choose one of the “About” layouts and add it to your page.
 Empowerment Technologies
9
Web Page Design

5. Add a Contact Us page

As you already know, it is important to give your readers a way to contact
you. This is accomplished by adding a Contact Us page. For this activity, you
don’t have to include your real contact details. Just add dummy phone
numbers, email addresses, etc.
Just like the “About” page, you can use a layout designed for the Contact page.
You can also build it from scratch from the BUILD tab.

There you go. That’s pretty much all the components that your website will
need. It may look generic now but imagine what you can accomplish if you
spend more time adding contents and improving the design.
To see the website that we created, go to
http://empowertechlessons.weebly.com/. Don’t forget to check out the
mobile version in your phone’s browser

Course Module