WHAT I NEED TO KNOW

Lesson 3: Principles and Techniques

of Design Using Online Creation Tools,
Platforms, and Applications

Online creation tools and platforms exist for users to utilize in

7 order to create content that correspond to professional tracks such as
academics, sports, arts and design, as well as technical vocational.
They may come in presentation tools, for newsletter writing, photo
editing and sharing, online collaborative tools, cloud computing,
blogging, mapping tools, and file management which are all discussed
in module 1.
In this lesson we will be exploring on the different principles and
techniques of web design.

What are my goals?

By the end of this lesson, you are expected to:

1. 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

1 2
 2. Create an original or derivative ICT content using online D. A re-direction to another website where you will log in.
creation tools, platforms, and applications to effectively
2. Which principle of a good web design refers to the waiting
communicate messages.
time for your web site to load?
3. Evaluate the quality, value, and appropriateness of peer’s A. Navigation C. Load Time
B. Visual Hierarchy D. Grid-based
existing or previously developed ICT content in relation to the
Layout
theme or intended audience/ viewer of an ICT project.
3. The F-shaped reading pattern is designed for what specific
4. Share and showcase existing or previously developed material
type of reading strategy?
in the form of a collaboratively designed newsletter or blog site A. Active Reading C. Skimming
intended for a specific audience or viewer. B. Previewing D. Scanning

4. What principle of a good web design refers to the type of font

WHAT I KNOW used in the web site?
A. Color C. Navigation
B. Grid-based Layout D. Typography
You must be excited to flip over the pages and begin with the
5. Which statement best describes good use of animation on a
lessons. But first, please answer the pre-test to measure what topics
website?
have you known so far.
A. Animation should never be used on a website; it is just
Direction: Read each item carefully and choose the letter of the too distracting.
correct answer. Write your answers on a separate sheet of paper or B. Animation should be used sparingly and to create
in your notebook. impact.
C. Animation should be used as much as possible to attract
1. When a user makes a mistake which of the following would
audience attention.
they expect?
D. Animation should be in small sizes, so they do not get
A. An easily understood error message telling them how
too much space in the website.
to solve the problem.
B. A detailed error message which gives them detailed
instructions on how they can avoid the error next time.
C. To have to log out of the site, log back in and start
again.

3 4
 In this kind of platform, no coding skills are required.

WHAT’S NEW Instead, you manipulate with design components using

an editor window and get the chance to choose what
elements are on your page.

Web Templates
Lesson 3.1: Web Page Creation
These are unique full-page layout that contains generic
While it's easy to build a web page, it's hard to make it look
information which can be replaced by the users with their
right. If all you want is plain text, everything will be too straightforward.
own personal information.
The tricky part is when you want something more. Most bad web
pages are bad because of their design rather than their contents. The
BASIC WEB DESIGN PRINCIPLES
more stuff on the page, the messier it gets and the less likely you are
Website Purpose
to keep the interest of the visitor
Your website needs to accommodate the needs of the user.
(http://billconner.com/techie/webpages.html).
Having a simple clear intention on all pages will help the user
An effective website design should fulfill its intended function
interact with what you have to offer. Are you imparting practical
by conveying its message while simultaneously engaging the visitor.
information like a ‘How to guide’? Is it an entertainment website
Several factors such as consistency, colors, typography, imagery,
like sports coverage or are you selling a product to the user?
simplicity and functionality all contribute to good website design. A
Below are the common core purposes of websites:
well-designed website can help build trust and guide visitors to act.
✓ Describing Expertise
Creating a great user experience involves making sure your website
✓ Building Your Reputation
design is optimized for usability (form and aesthetics) and how it easy
✓ Generating Leads
is it to use (functionality). (https://www.feelingpeaky.com/9-principles-
✓ Sales and After Care
of-good-web-design/).

WEB TEMPLATES and “WYSIWYG” PLATFORMS

“WYSIWYG” means What You See Is What You Get

5 6
 Simplicity ✓ Imagery is every visual aspect used within
Simplicity is the best way to go when considering the user communications. This includes still photography,
experience and the usability of your website. Below are ways illustration, video and all forms of graphics. All imagery
to achieve simplicity through design. should be expressive and capture the spirit of the
company and act as the embodiment of their brand
Color - it has the power to communicate messages and evoke personality.
emotional responses. Finding a color palette that fits your brand will
allow you to influence your customer’s behavior. Keep the color

✓ selection limited to less than 5 colors. Pleasing color

combinations increase customer engagement and make
the user feel good.
✓ Typography or
the text used.
Typefaces
should be
legible and only
use a maximum
of 3 different Image source: https://www.pinterest.ph/pin/139119075975030809/
fonts on the website.

Navigation
Image source:
Navigation is the way finding system used on websites where
https://www.webfx.com/blog/web-design/big-typography/
visitors interact and find what they are looking for. Website
navigation is key to retaining visitors. If the websites navigation
is confusing visitors will give up and find what they need

7 8
elsewhere. Keeping navigation simple, intuitive and consistent
on every page is key.
F-Shaped Pattern Reading
The F- based pattern is the most
common way visitors scan text on a
website. Eye tracking studies have
found that most of what people see
is in the top and left area of the
screen. The F’ shaped layout mimics
our natural pattern of reading in the
Image source: https://in.pinterest.com/pin/309833649334933654/
West (left to right and top to bottom).
An effective designed website will
Content
work with a reader’s natural pattern
An effective web design has both great design and great
of scanning the page.
content. Using compelling language great content can attract

Image source:
and influence visitors by converting them into customers.
https://www.feelingpeaky.com/9-principles-of-good-web-design/

Visual Hierarchy
The arrangement of elements is order of importance. This is
done either by size, color, imagery, contrast, typographically,
whitespace, texture and style. One of the most important
functions of visual hierarchy is to establish a focal point; this
shows visitors where the most important information is.

9 10
 Grid Based Layout
The grid-based layout arranges content into a clean rigid grid Load Time
structure with columns, sections that line up and feel balanced Waiting for a website to load will
and impose order and results in an aesthetically pleasing lose visitors. Nearly half of web
website. visitors expect a site to load in 2
seconds or less and they will
potentially leave a site that isn’t
loaded within 3 seconds.
Optimizing image sizes will help
load your site faster.
Image source:
https://www.feelingpeaky.com/9-principles-of-good-web-design/

Mobile Friendly
More people are using their phones or other
Image source:
https://www.feelingpeaky.com/9-principles-of-good-web-design/ devices to browse the web. It is important to
consider building your website with a
responsive layout where your website can
adjust to different screens.
Image source:
https://www.feelingpeaky.com/9-principles-of-good-web-design/

11 12
 The website is free from misspelled words
and grammatical errors.
WHAT IS IT Purpose Evaluation
Did the website achieve its purpose of giving
information in accordance to its theme?
3.1: Website Design Quality Check Image and Color Quality Evaluation
The website uses custom images that are in
Direction: Use the Internet to research on the designated consistent size and quality throughout
website.
topics depending on your track:
The primary header image is in high-
resolution.
The colors used are harmoniously and
logically related.
Font Consistency and Readability
The font sizes used for each of the primary
elements of the page is consistent all
throughout.
Once you find the website, evaluate the website using the checklist The font spacing is consistent.
The fonts are readable.
below. Copy the checklist in your notebook.
The website follows the F-shaped pattern.
Name of Website:
Accessibility to Mobile Devices
___________________________________________________ The website can be accessed using
Website URL: smartphones.
The layout in the smartphone is easy to
______________________________________________________ navigate.
_
YES NO CRITERIA
Content Evaluation
The contents of the website valuable and
relevant to my research topic.
The contents are readable.
The information that the website contains is
valid and true.

13 14

WHAT’S NEW
Lesson 3.2: Online Creation Tools
Types of Visual Content
Visual content is great because it powers up your
communication and receives great attention from the target audience.
Infographics are graphic visual representations of information,
data, or knowledge intended to present information quickly and
clearly. They can improve cognition by utilizing graphics to
enhance the human visual system's ability to see patterns and
trends.
Videos are recording of moving pictures and sound, especially
as a digital file.
Presentations use catchy images, videos, and graphics in
your presentation to get into the minds of your target audience.
For Infographics
Piktochart is an infographic creation tool that lets you design
stunning pieces worth sharing in minutes.
15
For Videos
PowToon. The online animation software of PowToon is
perfect for storytelling and creating Flash-style movies. You
don’t have to go through hundreds of tutorials to learn motion
creation as PowToon will do it for you.
YouTube Video Editor is simple and with a single-track
timeline, you get all the basic transitions and effects and a
soundtrack feature. It is easy to learn and quick to use. Users
can edit and remix the YouTube videos that are uploaded in
their YouTube accounts.
For Presentation
Prezi is cloud-based presentation software that is simple to use
as compared to the traditional slideshow makers. It displays
information not as series of slides but as a large board that
zooms in on specific information, text, or an image, giving
presentations a fresh and non-traditional feel.
SlideShare. You can use this to upload and share professional
videos and slide presentations.
For Web Site Creations
Wix you can use this to create your web site or mobile site.
16
For Blogging Rubric for assessing your Blog:
Rubric is adapted from University of Wisconsin
WordPress.org the self-hosted version of WordPress is, by far
https://www2.uwstout.edu/content/profdev/rubrics/blogrubric.html
the most popular blogging platform in the world. WordPress
powers over 90 percent of all the blogs on the Internet. CRITERIA 4 3 2 1
WordPress.com is a blog site hosting service by Automattic. Text Selects and Selects and Selects and Does not
Layout, inserts high inserts inserts many insert any
You can get a free blog with basic features. For advanced Use of quality graphics low-quality graphics, or
Graphics graphics and and graphics uses only
functionality, you need to opt for one of their paid plans. It can and multimedia multimedia and low-quality
be a great starting point for blogging. Multimedia when that are multimedia graphics
appropriate mostly high which do not and
to enhance quality and enhance the multimedia,
Blogger.com This free blog hosting service has been around for a the content’s enhance content. which do
long time. It was founded in 1999 and acquired by Google in 2003. visual appeal and clarify not enhance
You can sign up easily with your existing Google account. and increase the content. Acknowledg the content.
readability. es only a
Acknowledg few Does not
Acknowledge es most multimedia acknowledg
WHAT CAN I DO s all image
and
image and
multimedia
and image
sources and
e any image
or
multimedia sources with uses multimedia
sources with captions. incomplete sources,
captions. captions. either with a
Activity 3.2: It’s My Space caption.

Direction: You are a graduating SHS student and your final task in
your subject is to create a blog. Your teacher asked you to create a
blog on why incoming SHS students must choose your track. Don’t
forget to remember the principles of web and graphic designs when
creating your blog. Choose your own online platform for your blog.
Your work must be published online. Give the URL of your blog to your
teacher for checking.

17 18
Content Postings Postings Postings Postings formatted
and provide provide provide show no citations.
Creativity comprehensi moderate minimal evidence of Quality of Blog entries Blog entries Blog entries Blog entries
ve insight, insight, insight, insight, Writing have no have few show some use
understandin understandi understandi understandi and spelling or spelling or evidence of incorrect
g, and ng and ng and ng or Proofreadi grammatical grammatical correct grammar
reflective reflective reflective reflective ng errors. errors. grammar, and
thought thought thought thought spelling, spelling,
about the about the about the about the punctuation, consistently
topic by topic. topic. topic. etc. making it
...building a difficult for
focused others to
argument follow ideas
around a in entry.
specific issue Blog Blog is easy Blog is easy Blog is clear Blog is
or Organizati to to to read, unorganized
...asking a on understand, understand, neat, and , hard to
new related easy to clear to read presentable follow or
question or navigate, and All links and navigate,
...making an clear to read, navigate, titles are non-working
oppositional aesthetically aesthetically easy to find. links,
statement appealing appealing Blog is fairly visually
supported by and relevant, and easy to dissident.
personal all links are relevant, all navigate.
experience working, and links and
or related titles are titles are
research. easy to find. easy to find.
Citations All images, Most Some of the No images,
media and images, images, media or
text created media or media or text created
by others text created text created by others
display by others by others display
appropriate display does not appropriate
copyright appropriate display copyright
permissions copyright appropriate permissions
and accurate permissions copyright and do not
citations and permissions include
accurate, and does accurate,
properly not include properly
formatted accurate, formatted
citations. properly citations.

19 20
 or bulleted organize, nal
lists to but the structure.
WHAT’S MORE group over-all
related organizatio
material. n of topics
appears
Activity 3.3: Let Me Be the Judge flawed.
10 9-8 7–6 5–1
Direction: Evaluate the quality, value, and appropriateness of a Attractivene Makes Makes Makes Makes use
classmates’ existing developed ICT content. Pay attention to how the ss (10 pts.) excellent good use use of of font,
use of font, of font, font, color, color,
work highlights a given theme or advocacy.
color, color, graphics, graphics,
Rubric for assessing a classmate’s blog: graphics, graphics, and and effects,
Taken from: Empowerment Technologies: Teacher’s Guide p. 25 and effects and effects effects, but these
CRITERIA Scores to enhance to enhance but often
10 9-8 7–6 5–1 the the occasional distract
Content Covers the Includes Includes Content is presentatio presentatio ly these from the
(10 pts.) topic in- essential essential minimal, or n. n. detract the presentatio
depth with knowledge informatio there are presentati n content.
details and about the n about several on
examples. topic. the topic, factual content.
but there errors. 10 9-8 7–6 5–1
Subject Subject are 1-2 Accuracy No Three or Four More than
knowledge knowledge factual (10 pts.) misspelling fewer misspellin five
is appears to errors. s or misspelling gs or misspelling
excellent. be good. grammatic s or grammatic s or
5 4–3 2 1 al errors, grammatic al errors, grammatica
Organizatio Content is Content Content is There was no broken al errors, no more l errors,
n (5 pts.) well- uses logically no clear or links, and no broken than 4 mostly
organized, headings organized logical missing links, and broken broken
using or bulleted for the organizatio images. missing links, and links, and
headings lists to most part. images.

21 22
 missing missing
images. images.
Rubric taken from: Empowerment Technology Teacher’s Guide.
WHAT I HAVE LEARNED
An effective website design should fulfill its intended function by
conveying its message while simultaneously engaging the visitor. Several
factors such as consistency, colors, typography, imagery, simplicity and
functionality all contribute to good website design. A well-designed website
can help build trust and guide visitors to act. Creating a great user
experience involves making sure your website design is optimized for
usability (form and aesthetics) and how it easy is it to use (functionality).
ASSESSMENT
Direction: Read each item carefully and choose the letter of the
correct answer. Write your answers on a separate sheet
1. Which of the following statements is an example of good
website design??
A. Having very detailed instructions to teach the user how to
use the website.
B. Having lots of flashing animation that shows how clever
the designer is.
C. Having navigation which makes it intuitive to use the
website.
D. Having animation should be used as much as possible to
attract audiences’ attention.
2. Which statement best describes good use of animation on a
website?
A. Animation should never be used on a website; it is just
too distracting.
23
B. Animation should be used sparingly and to create impact.
C. Animation should be used as much as possible to attract
audience attention.
D. Animation should be in small sizes, so they do not get too
much space in the website.
3. Which of the following statements describes good website
design?
A. Consistent use of styles and color create a professional
look to a website.
B. Using lots of different styles and colors shows how
23
creative the designer is.
C. Consistent use of styles and color is boring and will make
the user log out.
D. Websites that have background music are a sign of
creativity from the designer.
4. How does the F-shaped reading pattern help visual hierarchy?
A. Users can confirm that the author of the site is an
authority on the subject.
B. Users first read in a horizontal movement, usually across
the upper part of the content area.
C. It enables search engine users to index the website
efficiently when they crawl the web pages.
D. It enables users to enter the site from a number of
different pages.
5. When a user makes a mistake which of the following would
they expect?
A. An easily understood error message telling them how to
solve the problem.
B. A detailed error message which gives them detailed
instructions on how they can avoid the error next time.
C. To have to log out of the site, log back in and start
again.
D. A re-direction to another website where you will log in.
24