WEB PAGE DESIGN

USING TEMPLATES
AND ONLINE
WYSIWYG
PLATFORMS
 LEARNING COMPETENCY

• apply web design principles and elements

using online creation tools, platforms, and
applications to communicate a message for a
specific purpose in specific professional
tracks
OBJECTIVES
1. define WEB PAGE DESIGN and its basic
elements;
2. identify the different web templates and
WYSIWYG platform; and
3. design a website using an online
WYSIWYG platform.
 WEB PAGE DESIGN

• A website is a collection of publicly accessible,

interlinked web pages that share a single domain name.
Websites can be created and maintained by an
individual, group, business or organization to serve a
variety of purposes. Together, all publicly accessible
websites constitute the World Wide Web.
 1. PURPOSE
Good web design always caters to the needs of the user.

Content - Your site visitors and potential customers want information quickly
such as, is your brand trustworthy? Experienced? Is it capable of delivering
top_x0002_notch products and services? Given people’s short attention spans and
lightning-fast
first impressions, communicating clearly is critical, thus, information should be easy
to read and digest.
2. COMMUNICATION
People on the web tend to want information quickly, so it is important to communicate
clearly, and make your information easy to read and digest.
3. TYPEFACES
Fonts - Your text should be easily readable, which generally
means body copy
should be at least 16 pixels.

In general, Sans Serif fonts such as Arial and Verdana are easier
to read online (Sans Serif fonts are contemporary looking fonts
without decorative finishes).
4. COLOURS
A well thought out colour palette can go a long way to enhance the user experience.
5. IMAGES
A picture can speak a thousand words
6. NAVIGATION
Navigation is about how easy it is for people to take action and move around your
website.
7. GRID BASED
LAYOUTS
Placing content randomly on your web page can end up with a haphazard appearance that
is messy.
8. “F” PATTERN DESIGN
Eye tracking studies have identified that people scan computer screens in an “F” pattern.
9. LOAD TIME
Everybody hates a website that takes ages to load.
10. MOBILE FRIENDLY
It is now commonplace to access websites from multiple devices with multiple screen
sizes, so it is important to consider if your website is mobile friendly.
 WEB TEMPLATE
It is a pre-designed webpage on set of HTML webpages that anyone can use to
“plug_x0002_in”. Website templates allow anyone to setup a website.
• A web design template is a catchall name for several types of templates like;
• 1. HTML templates – website design templates represented with HTML code only
• 2. PSD templates – templates which contain only .psd files, graphics only, with no
• code
• 3. Flash templates – website design templates developed with Flash
• 4. Flash intro templates – templates of an intro clip, developed with Flash only and
• used to represent a company or/and a project.
ONLINE WYSIWYG PLATFORMS
 SHARE YOUR STORY USING
DIGITAL STORYTELLING PT 1
DIRECTIONS:
USING YOUTUBE AND TIKTOK CREATE A
PHOTOGRAPHY GALLERY WEBSITE TO SHOWCASE
YOUR STORIES. INCLUDE TEXTS, DRAWINGS,
PHOTOS, ANIMATIONS, AUDIOS, AND VIDEOS IN
YOUR WORK. STORY IDEAS CAN COME FROM
PERSONAL AND FAMILY EXPERIENCES,
CONNECTIONS TO OTHER CULTURES, AND REAL OR
IMAGINARY PEOPLE, PLACES, OR EVENTS.
 Criteria: 4 3 2 1
25% 20% 15% 10%
1. Very effectively Effectively some ideas clear, unclear, significant
Communication communicated, communicated. some difficulties difficulties
appropriate Appropriate

2. Shows complete Shows nearly Shows some Shows limited or no

Understanding understanding of complete understanding of understanding and
the lesson and understanding of the the lesson and application on the
application on the lesson and application application on performance
presentation. on the presentation. the presentation.

3. Presentation Superior some craftsmanship details were absent/ missing

Quality craftsmanship and and attention to detail overlooked and
attention to detail is evident; proper presentation
is evident; proper materials used for lacks quality ;
materials used for entire presentation proper materials
entire presentation were used on
half of the
presentation

4. Visual Clarity Presentation has an The presentation has a the presentation the presentation needs
and Appeal excellent design nice design and is needs significant
and organized. It is organized. It is neat improvement in improvement in
neat and easy to and easy to design, design, organization
understand understand organization and and neatness
neatness
1. DOES THE DESIGN OF THE WEB PAGE
DELIVER AN APPROPRIATE MESSAGE TO
USERS?

2. WHAT MESSAGE DO YOU THINK IT DELIVERS?

3. THE MAIN GOAL IN WEB DESIGN IS GIVING

USERS WHAT THEY NEED, INSTEAD OF WHAT
THE DEVELOPER THINKS THEY WANT. DO YOU
THINK THIS PAGE ACHIEVES THAT GOAL? WHY
OR WHY NOT?