1. BASIC WEB DESIGN PRINCIPLES
& ELEMENTS

2. WEB DESIGN
 WEB DESIGN is a concept of planning, creating,
updating and maintaining websites.
 A good web design allows the user to understand the
message, contents, and ideas in the most convenient
way.
 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.

3. WEB DESIGN ELEMENTS
 1. TEXT – font family and type must be chosen well, clear and in readable
size.
 2. GRAPHICS/ILLUSTRATIONS – must be with good quality and well
arranged with the text and other elements. Infographics may be used.
 3. SHAPES – can be used to denote an enclosed boundary in the overall
design. Any kind of shapes like geometric or abstract shape that will fit the
user’s design can be placed.
 4. 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 the website to make it look more appealing.

4. WEB DESIGN ELEMENTS
 5. COLOR – must blend well and complement the elements
on the page. Use vibrant and bold colors that will attract but
not too distracting.
 6. VIDEO/AUDIO – will help viewers easily understand what
you are teaching or selling.
 7. LINKS – will allow users to connect another site or page
that is related to the content of your page or site.

5. WEB DESIGN PRINCIPLES
A good web design must contain elements that
are not only appealing but should be
functional, responsive, and useful.
To create a usable and effective website, follow
the basic principles of an effective web design.

6. WEB DESIGN PRINCIPLES
 1. PORTABLE DESIGN
 - must be portable and accessible by users who have different
browsers, operating systems, and computer platforms; test
compatibility
 2. DESIGN FOR LOW BANDWIDTH
 - website design must be accessible at a variety of speeds. Avoid
large graphics or animations as the users may leave the site if
downloading is slow.

7. 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. There should be a consistent layout and
structure.
 4. ACCESSIBILITY
 - when a visitor enters the website, he 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.

8. WEB DESIGN PRINCIPLES
 5. WHITE SPACES
 - use white space deliberately in your design as a breathing
space. May also be used to show division of contents
 6. 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. Remove distracting options and clutter.

9. WEB DESIGN PRINCIPLES 7. CONVENIENCE
 - to allow a visitor to make an action, click buttons should be
conveniently located and accessible. The larger the Share or
Order buttons, the more easily and quickly for the customer
to click them
 8. REGULAR TESTING
 - the website should be regularly upgraded, updated, and tested
so that problems will be quickly resolved. This includes the links
and the loading of images and other elements in the page. Visitors
will not hold on or proceed if they encounter problems in loading
or viewing.

10. WEB PAGE DESIGN USING TEMPLATES AND ONLINE WYSIWYG
PLATFORMS
 WYSIWYG
 - is an acronym for “what you see is what you get”
 - is an editor system in which content (texts and
graphics) can be edited in a form closely resembling
its appearance when printed or displayed as a
finished product

11. EXAMPLES OF WYSIWYG PLATFORMS HTML EDITOR
WIX WEEBLY WORDPRESS JIMDO

23. ACTIVITY FOR YOUR BLOG POST
 Create individually an essay entitled “My Advocacy for
Social Change”
 Guide contents:
● The issue that matters to me is ____________ [CAUSE or
ADVOCACY]
● I could use my talent ____________________ [GIFT]
● To make a difference by _________________ [ACTION]

24. THANK YOU
SOMEONE@EXAMPLE.COM