WHAT I NEED TO KNOW

Senior High School 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 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.

EMPOWERMENT LEARNING COMPETENCIES

By the end of this lesson, you are expected to:
1. Evaluate existing websites and online resources based on the principles of layout, graphic,
and visual message design.

TECHNOLOGIES 2. Use image manipulation techniques on existing images to change or enhance their current
state to communicate a message for a specific purpose
3. Create an original or derivative ICT content to effectively communicate a visual message
in an online environment.

Quarter 1- Week 6 WHAT I KNOW

You must be excited to flip over the pages and begin with the lessons. But first, please answer
the pre-test to measure what topics have you known so far.

Principles and Techniques Direction: Read each item carefully and choose the letter of the correct answer. Write your
answers on a separate sheet of paper or in your notebook.
of Design Using Online What are my goals?
1. When a user makes a mistake which of the following would they expect?

Creation Tools, Platforms,

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.
and Applications 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.

2. Which principle of a good web design refers to the waiting time for your web site to load?
A. Navigation C. Load Time
B. Visual Hierarchy D. Grid-based Layout ➢ Web Templates - These are unique full-page layout that contains generic information
which can be replaced by the users with their own personal information.
3. The F-shaped reading pattern is designed for what specific type of reading strategy?
A. Active Reading C. Skimming BASIC WEB DESIGN PRINCIPLES
B. Previewing D. Scanning
➢ Website Purpose Your website needs to accommodate the needs of the user. Having a
simple clear intention on all pages will help the user interact with what you have to offer.
4. What principle of a good web design refers to the type of font used in the web site?
Are you imparting practical information like a ‘How to guide’? Is it an entertainment
A. Color C. Navigation website like sports coverage or are you selling a product to the user? Below are the
B. Grid-based Layout D. Typography common core purposes of websites:
Describing Expertise
5. Which statement best describes good use of animation on a website? Building Your Reputation
A. Animation should never be used on a website; it is just too distracting.
Generating Leads
B. Animation should be used sparingly and to create impact. Sales and After Care
C. Animation should be used as much as possible to attract audience attention.
➢ Simplicity is the best way to go when considering the user experience and the usability
D. Animation should be in small sizes, so they do not get too much space in the website. of your website. Below are ways to achieve simplicity through design.
Color - it has the power to communicate messages and evoke emotional responses.
WHAT’S NEW
Finding a color palette that fits your brand will allow you to influence your customer’s
Lesson 3.1: Web Page Creation behavior. Keep the color selection limited to less than 5 colors. Pleasing color
While it's easy to build a web page, it's hard to make it look right. If all you want is plain text,
combinations increase customer engagement and make the user feel good.
everything will be too straightforward. The tricky part is when you want something more. Most Typography or the text used. Typefaces should be legible and only use a maximum
bad web pages are bad because of their design rather than their contents. The more stuff on of 3 different fonts on the website.
the page, the messier it gets and the less likely you are to keep the interest of the visitor
Imagery is every visual aspect used within communications. This includes still
(http://billconner.com/techie/webpages.html). An effective website design should fulfill its photography, illustration, video and all forms of graphics. All imagery should be
intended function by conveying its message while simultaneously engaging the visitor.
expressive and capture the spirit of the company and act as the embodiment of their
Several factors such as consistency, colors, typography, imagery, simplicity and functionality brand personality.
all contribute to good website design. A well-designed website can help build trust and guide
Navigation is the way finding system used on websites where visitors interact and find
visitors to act. Creating a great user experience involves making sure your website design is what they are looking for. Website navigation is key to retaining visitors. If the websites
optimized for usability (form and aesthetics) and how it easy is it to use (functionality). navigation is confusing visitors will give up and find what they need elsewhere. Keeping
(https://www.feelingpeaky.com/9-principles-of-good-web-design/).
navigation simple, intuitive and consistent on every page is key.
F-Shaped Pattern Reading
WEB TEMPLATES and “WYSIWYG” PLATFORMS
The F- based pattern is the most common way visitors scan text on a website. Eye
➢ “WYSIWYG” - means What You See Is What You Get In this kind of platform, no coding tracking studies have found that most of what people see is in the top and left area
skills are required. Instead, you manipulate with design components using an editor of the screen. The F’ shaped layout mimics our natural pattern of reading in the West
window and get the chance to choose what elements are on your page. (left to right and top to bottom). An effective designed website will work with a
reader’s natural pattern of scanning the page.
 Visual Hierarchy Mobile Friendly
The arrangement of elements is order of importance. This is done either by size, More people are using their phones or other
color, imagery, contrast, typographically, whitespace, texture and style. One of the devices to browse the web. It is important to
most important functions of visual hierarchy is to establish a focal point; this shows consider building your website with a
visitors where the most important information is. responsive layout where your website can
Content adjust to different screens.
Image
An effective web design has both great design and great content. Using compelling language source:https://www.feelingpeaky.com/9-
great content can attract and influence visitors by converting them into customers. principles-of-good-web- design/
Grid Based Layout - The
grid-based layout arranges Activity 3.1: Website Design Quality Check
content into a clean rigid grid
structure with columns, Direction: Use the Internet to research on the designated topics depending on your track:
sections that line up and feel
balanced and impose order A. Stem cell research (STEM students)
and results in an aesthetically B. Strategies on Putting up a Business (ABM students)
pleasing website. Image C. Online Dating among Teens (HUMSS students)
source: D. Types of Sports Injuries (SPORTS track students)
E. Folk dances in the Philippines (ARTS and DESIGN students)
https://www.feelingpeaky.com/9-principles-of-good-web-design/ F. Vocational Education in the Philippines (TVL students)

Once you find the website, evaluate the website using the checklist below. Copy the checklist
in your notebook.
Load Time- Waiting for a website to load will
lose visitors. Nearly half of web visitors Name of Website: ___________________________________________________
expect a site to load in 2 seconds or less and Website URL: _______________________________________________________
they will potentially leave a site that isn’t
loaded within 3 seconds. Optimizing image
YES NO CRITERIA
sizes will help load your site faster.
Content Evaluation
Image The contents of the website valuable and relevant to my research topic.
source:https://www.feelingpeaky.com/9- The contents are readable.
principles-of-good-web-design/ The information that the website contains is valid and true.
The website is free from misspelled words and grammatical errors.
Purpose Evaluation
Did the website achieve its purpose of giving information in accordance
to its theme?
 Image and Color Quality Evaluation Piktochart is an infographic creation tool that lets you design stunning pieces worth
The website uses custom images that are in consistent size and quality sharing in minutes.
throughout website.
The primary header image is in high-resolution. For Videos

The colors used are harmoniously and logically related. 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
Font Consistency and Readability motion creation as PowToon will do it for you.
The font sizes used for each of the primary elements of the page is YouTube Video Editor is simple and with a single-track timeline, you get all the basic
consistent all throughout. transitions and effects and a soundtrack feature. It is easy to learn and quick to use.
The font spacing is consistent.
Users can edit and remix the YouTube videos that are uploaded in their YouTube
The fonts are readable. accounts.

For Presentation
The website follows the F-shaped pattern.
Prezi is cloud-based presentation software that is simple to use as compared to the
Accessibility to Mobile Devices
traditional slideshow makers. It displays information not as series of slides but as a large
The website can be accessed using smartphones.
The layout in the smartphone is easy to navigate. 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
WHAT’S NEW presentations.

Lesson 3.2: Online Creation Tools For Web Site Creations

Types of Visual Content Wix you can use this to create your web site or mobile site.
Visual content is great because it powers up your communication and receives great attention
from the target audience. For Blogging

Infographics are graphic visual representations of information, data, or knowledge WordPress.org the self-hosted version of WordPress is, by far the most popular
intended to present information quickly and clearly. They can improve cognition by blogging platform in the world. WordPress powers over 90 percent of all the blogs on the
utilizing graphics to enhance the human visual system's ability to see patterns and Internet.
trends. WordPress.com is a blog site hosting service by Automattic. You can get a free blog
Videos are recording of moving pictures and sound, especially as a digital file. with basic features. For advanced functionality, you need to opt for one of their paid
Presentations use catchy images, videos, and graphics in your presentation to get into plans. It can be a great starting point for blogging.
the minds of your target audience. Blogger.com This free blog hosting service has been around for a long time. It was
founded in 1999 and acquired by Google in 2003. You can sign up easily with your
For Infographics existing Google account.
WHAT CAN I DO Citations All images, media Most images, Some of the No images,
and text created media or text images, media or media or text
Activity 3.2: It’s My Space by others display created by others text created by created by
appropriate display others does not others display
Direction: You are a SHS student and your task in your subject is to create a copyright appropriate display appropriate
permissions and copyright appropriate copyright
blog. Your teacher asked you to create a blog on why did you choose your copyright
accurate citations permissions and permissions
track and why incoming SHS students must choose your track. Don’t accurate, permissions and and do not
forget to remember the principles of web and graphic designs when creating properly does not include includ
your blog. Choose your own online platform for your blog. Your work must be formatted accurate, e accurate,
citations. properly properly
published online. formatted formatted
citations. citations.
Rubric for assessing your Blog: Rubric is adapted from University of
Quality of Writing Blog entries have Blog entries have Blog entries show Blog entries
Wisconsin
and Proofreading no spelling or few spelling or some evidence of use incorrect
https://www2.uwstout.edu/content/profdev/rubrics/blogrubric.html grammatical grammatical correct grammar, grammar and
CRITERIA 4 3 2 1 errors. errors. spelling, spelling,
punctuation, etc. consistently
Text Layout, Selects and Selects and Selects and inserts Does not
Use of Graphics inserts high inserts graphics many low-quality insert any making it
and quality graphics and multimedia graphics and graphics, or difficult for
Multimedia and multimedia that are mostly multimedia which uses only others to follow
when appropriate high quality and do not enhance the lowquality ideas in entry
to enhance the enhance and content. graphics and Blog Organization Blog is easy to Blog is easy to blog is clear to Blog is
content’s visual clarify the multimedia, understand, easy understand, clear read, neat, and unorganized,
appeal and content. which do not to read and hard to follow
to navigate, clear presentable All
increase enhance the navigate, or navigate,
readability. to read, links and titles
content. aesthetically nonworking
aesthetically are easy to find.
Acknowledges appealing and appealing and Blog is fairly easy links, visually
Acknowledges all Acknowledges Does not relevant, all links dissident.
only a few relevant, all links to navigate.
image and most image and acknowledge and titles are
multimedia and are working, and
multimedia multimedia any image or easy to find.
image sources titles are easy to
sources with sources with and uses multimedia
captions. sources, find.
captions. incomplete
captions. either with a
caption.
Content and Postings provide Postings provide Postings provide Posting show WHAT I HAVE LEARNED
Creativity comprehensive moderate insight, minimal insight, no evidence
insight, understanding understanding of insight, An effective website design should fulfill its intended function by conveying its message while
understanding, and reflective and reflective understanding simultaneously engaging the visitor. Several factors such as consistency, colors, typography,
and reflective thought about the thought about the or reflective imagery, simplicity and functionality all contribute to good website design. A well-designed
thought about the topic. topic. thought about website can help build trust and guide visitors to act. Creating a great user experience
topic the topic
involves making sure your website design is optimized for usability (form and aesthetics) and A. An easily understood error message telling them how to solve the problem.
how it easy is it to use (functionality). 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.
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.
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 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?