1. WEB PAGE and ICT

2. OBJECTIVE
• Apply web design principles and
element using online creation
tools , platforms, and
application to communicate a
message for a specific purpose
in a specific professional tracks.

3. WEB PAGE
A Web Page is a document which is
designed for the World Wide Web
and is accessible using a web browser
such as Firefox, Google Chrome,
Microsoft internet Explorer, or Apple
Safari

4. There are so many available software that you can use to
design a web page. Example of website builders are:
 Adobe Dreamweaver
 MS Publisher
 Squarespace
 Weebly
 Wix
 Xprs, etc.

5. Importance of Website in Business
The world wide web has become the
means of generating more business
than any other advertising medium. It
can give your costumer a detailed
description about ypur company and
its latest offers.

6. In addition it can be used as brochure
to advertise your product. And its
biggest advantage is its availability for
viewing daily for 24 hours.

7. Basic
WEB
Design
Principle
and
Elements
TEXT
GRAPHICS/ ILLUSTRATIONS
SHAPES
BACKGROUND
COLOR
VIDEO/AUDIO
LINKS

8. T
E
X
T
Font family and type
must be chosen well,
clear, and in readable
text.

9. Graphics/
Illustration
Must be with good
quality and well
arranged with the text
and other elements.
Infographics may be
used.

10. S
H
A
P
E
S
Can be used to denote an
enclosed boundary in the
overall design. Any kind of
shapes , like regular
geometric or abstract shapes
that will fit the user’s design
can be placed.

11. Background
Background or texture can help
provide your website with a
feeling of a surface underneath.
This element must be used to
bring out the content given on a
website to make it look more
appealing.

12. C
O
L
O
R
Must blend well and
complement the elements on
the page. Use vibrant and
bold colors that will attract
but not too distracting

13. Video/Audio
Will help viewers easily
understand what you
are teaching or selling.

14. L
I
N
K
S
Will allow users to
connect to another site
or page that is related
to the content of your
page or site.

15. WEB
Design
Principles
PORTABLE DESIGN
DESIGN FOR LOW BANDWIDTH
DIRECTION
ACCESSIBILITY
WHITE SPACE
SIMPLIFY
CONVINIENCE
REGULAR TESTING

16. Portable
Design.
Website design must be portable
and accessible by users who have
different browsers, operating
systems,and computing
platforms. You should always test
for compatibility by viewing your
pages in other browsers.

17. DESIGN
FOR
LOW
BANDWIDTH
Website design must be
accessible at a variety bof
speeds. Avoid large graphics
or animations as the users
may leave the site if
downloading is slow.

18. Identify the order of
importance of the various
elements and place them in a
sequence where the eye moves
and percieves the things it sees.
There should be consistent
layout and structure.
DIRECTION

19. ACCESSI-
BILITY
When a visitor enters the website,
he/she must be able to easily
access the information. This
means that the text must be
legible / readable, the colors must
create visual harmony and
balance, and images should be of
high quality.

20. WHITE
SPACE
Use white space
deliberately in your design
as a breathing space . White
space may also use to show
division of contents.

21. S
I
M
P
L
I
F
Y.
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. To simplify it, remove
options and clutter.

22. Conve-
nience
To allow visitor to make an
action, the larger the Share or
Order buttons, the more
easily and quickly for the
costumer to click them.

23. Regular
Testing
The website should be regularly
upgraded, updated, and tested
so that the problems will be
quickly resolved. This includes
the links and the loading of
images and other elements in
the page.

24. Web page
Design
Using
Templates
and Online
WYSIWYG
platforms
Wix
Weebly
Drupal
Wordpress
EXAMPLES OF WYSIWYG PLATFORMS HTML EDITOR

25. WYSIWYG
An acronym for “what you see is
what you get”. A WYSIWYG editor is
a system in which content(text and
graphics) can be edited in a form
closely resembling its appearance
when printed document, web page,
or slide presentation

26. W
I
X
Is a pure WYSIWYG, free cloud-based
web development platform that
allows users to create HTML5,
website and mobile sites. Users may
add functions such as plug-ins, e-
commerce, contact forms, email
marketing, and community forums to
their websites using different Wix and
third party applications.

27. W
E
E
B
L
Y
Is a free website builder , blog,
and web-hosting services .

28. D
R
U
P
A
L
Is a free and open-source
content management
system(CMS) based on PHP and
MySQL.

29. w
o
r
d
p
r
e
s
s
Is a free and open-source
content management
system(CMS) based on PHP and
MySQL.