11/14/2024

GOOD DAY!
Ayame Productions

EMPOWERMENT TECHNOLOGIES

WEB PAGE


It is a document which is designed for the

WWW and is accessible using a web browser.
It may contain many kinds of data or resources
which you can see, hear, and interact.
It may contain text, graphics, sound, video, and
animation.

1
 11/14/2024

WEBSITE


It is a collection of Web Pages accessible

through a single domain.

What is the
Importance of
having a Website?

2
 11/14/2024

Parts of a Website

Parts of a Website


1. HOME PAGE

It is the opening page.

It is usually located at your main
website URL.

3
 11/14/2024

Parts of a Website


1. HOME PAGE
Goals:
- Welcome visitors
- Help them realize they’re in the right place.
- Immediately make it clear what to do.
- Guide visitors further into the website.

4
 11/14/2024

10

5
 11/14/2024

11

12

6
 11/14/2024

Parts of a Website


2. HEADER / BANNER
The header or banner is located on top of a
website.
It includes the logo of the company, the
publisher, or owner of the website.
This automatically informs website visitors
what the website is about.

13

Parts of a Website


2. HEADER / BANNER
Trends:
- Logos - Navigation Menu
- Page-sized images - Tagline
- Videos - Phone Number
- User Interface Elements - Address
- Search Box - Buttons
- Login or My Account Link - Opt-in box

14

7
 11/14/2024

15

16

8
 11/14/2024

17

18

9
 11/14/2024

Parts of a Website


3. NAVIGATION BAR
The navigation bar/menu tab allows the
visitors to check other pages of the website.
It appears in all pages within a website for
more convenient navigation.
Navigation bars are usually placed just
below the banner/header for convenient access.

19

Parts of a Website


3. NAVIGATION BAR
Trends:
 Sidebar – refers to the placement of the
primary navigation and not the usual content of
a regular sidebar (Usually on the left.)
 Navicon – This is common in FB apps. It is
practically hidden until you tap the icon.

20

10
 11/14/2024

21

22

11
 11/14/2024

23

Parts of a Website


4. SIDEBAR
 Social media buttons – these buttons serve as links to
the social media profiles of the website owner or the
company.
 Widgets – these widgets could be in a form of feeds
(usually social media), polls, contact us forms,
subscription boxes, etc.
 Archives – this content allows users to read your
previous posts or entries.

24

12
 11/14/2024

Parts of a Website


5. Content
 Social media buttons – these buttons serve as links to
the social media profiles of the website owner or the
company.
 Widgets – these widgets could be in a form of feeds
(usually social media), polls, contact us forms,
subscription boxes, etc.
 Archives – this content allows users to read your
previous posts or entries.

25

Parts of a Website


6. Footer
The users will reach the footer if they were
engaged with the website’s content. And the purpose
of engaging them is to make sure they convert into
clients.

26

13
 11/14/2024

Parts of a Website


6. Footer
Trends:
- About us link - Contact us Link
- Contact Us Link - Terms of Service
- Privacy Policy - Sitemap
- Social Media Buttons - Address
- Email Address - Related Links
- Subscription boxes

27

28

14
 11/14/2024

Navicon

Header / Banner Navigation Bar

Sidebar

Content

Widgets / Archives
Footer

29

30

15
 11/14/2024

Basic Web Design

Principles and
Elements

31

Web Design Elements



In order to come up with a technically and

visually good appealing and effective web
design, elements must be arranged in a way
that is pleasing to the eye, well-coordinated,
and maintaining good balance among the
elements.

32

16
 11/14/2024

Web Design Elements



1. Text – The font family and type must be chosen

well, clear, and in readable size.
2. Graphics / Illustration – It must be of good
quality and well arranged with the text and other
elements. Infographics may be used.
3. Shapes – It can be used to denote an enclosed
boundary in the overall design.

33

Web Design Elements



4. Background – or texture can help provide your

website with a feeling of a surface underneath.
This must be used to bring out the content
given on the website to make it look more
appealing.
5. Color – It must blend well and complement the
elements on the page. Use vibrant and bold
colors hat will attract but not too distracting.

34

17
 11/14/2024

Web Design Elements



6. Video / Audio – This will help viewers easily

understand what you are teaching or selling.
7. Links – It will allow users to connect to
another site or page that is related to the
content of your page.

35

Web Design Principles



1. Portable Design – It must be portable and

accessible by users who have different
browsers, operating systems, and computer
platforms (test it).
2. Design for Low Bandwidth – It be accessible
at a variety of internet speeds (loading time).

36

18
 11/14/2024

Web Design Principles



3. Direction – Identify the order of importance of

the various elements and place them in a
sequence where the eye moves and perceives
the things it sees (consistency in structure).
4. Accessibility – When the visitor enters the
website, he/she must be able to easily access
the information.

37

Web Design Principles



4. White Spaces – Use white spaces deliberately

in your design as a breathing space (Division).
5. Simplify – The more options you place in your
site, the more difficult it is for a visitor to make a
decision and more time is required to browse
through them.

38

19
 11/14/2024

Web Design Principles



7. Convenience – To allow a visitor to make an

action, the click buttons should be conveniently
located and accessible. The larger the buttons,
the easier and quicker it could be clicked.
8. Regular Testing – The website should be
regularly upgraded, updated, and tested so that
problems will be quickly resolved (links).

39

WYSIWYG


It is an acronym for What You See Is What

You Get.
A WYSIWYG editor is a system in which
content can be edited in a form closely
resembling its appearance when printed or
displayed as a finished product.

40

20
 11/14/2024

WYSIWYG Platforms


Editor
1. Wix – It is a pure WYSIWYG, free cloud-based web
development platform that allows users to create HTML5
Websites and mobile sites.
2. Weebly – It is a free website builder, blog, and web-
hosting service.
3. Drupal – It is a free and open-source content
management system (CMS) based on PHP and MySQL.
4. Wordpress

41

42

21
 11/14/2024

If you were to create a

website, what content
will it have?

What will it look like?

43

22