Simplified Students’ Learning Material SHS
APPLIED SUBJECT
Empowerment
Technologies
QUARTER 3, MODULE 6
WEB DESIGN PRINCIPLES AND ELEMENTS
USING ONLINE CREATION TOOLS,
PLATFORMS AND APPLICATIONS
Writer: Rassel Ann R. Aganan
España National High
0
School
LESSON 1: WEB DESIGN PRINCIPLES
AND ELEMENTS
I. Most Essential Learning Competency
At the end of the lesson, it is expected that you should be able 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
II. CONTENT
BASIC WEB DESIGN PRINCIPLES AND ELEMENTS
1. 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.
Are you imparting practical information like a ‘How to guide’? Is it an entertainment
website like sports coverage or are you selling a product to the user? Below are the
common core purposes of websites:
Describing Expertise
Building Your Reputation
Generating Leads
Sales and After Care
2. Simplicity
Simplicity is the best way to go when considering the user experience and the
usability of your website. Below are ways to achieve simplicity through design.
Color - it has the power to communicate messages and evoke 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.
1
Typography or the text used.
Typefaces should be legible and only
use a maximum of 3 different fonts on
the website.
Image source:
[Link]
typography/
Imagery is every visual aspect used within communications. This includes
still photography, illustration, video and all forms of graphics. All imagery
should be expressive and capture the spirit of the company and act as the
embodiment of their brand personality.
Image source: [Link]
3. Navigation
Navigation is the way finding system used on websites where 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 elsewhere. Keeping navigation simple, intuitive and consistent on every
page is key.
2
4. 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 West (left to
right and top to bottom). An effective designed
website will work with a reader’s natural
pattern of scanning the page.
Image source:
[Link]
web-design/
5. 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.
Image
source: [Link]
3
6. Content
An effective web design has both great design and great content. Using
compelling language great content can attract and influence visitors by
converting them into customers.
7. Grid Based Layout
The grid-based layout
arranges content into a clean rigid
grid structure with columns,
sections that line up and feel
balanced and impose order and
results in an aesthetically pleasing
website.
Image
source: [Link]
web-design/
8. Load Time
Waiting for a website to load will lose visitors.
Nearly half of web 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:
[Link]
9. Mobile Friendly
More people are using their phones or other 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:
[Link]
4
Web Page Creation
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. ([Link]
WEB TEMPLATES and “WYSIWYG” PLATFORMS
“WYSIWYG” means What You See Is What You Get
In this kind of platform, no coding skills are required. Instead, you manipulate with
design components using an editor window and get the chance to choose what
elements are on your page.
Web Templates
These are unique full-page layout that contains generic information which can be
replaced by the users with their own personal information.
REFERENCES
ITIF. (2018, October 12). Publication. Retrieved from Information Technology & Innovation
Foundation: [Link]
are-digital-platforms
[Link]
development-169954837. Retrieved on May 31, 2020.
Basic Web Page Creation. Retrieved from
[Link] Retrieved on June 1, 2020.
LESSON 2: CREATE AN ORIGINAL OR
DERIVATIVE ICT CONTENT
II. Most Essential Learning Competency
At the end of the lesson, it is expected that you should be able to:
1. create an original or derivative ICT content using online creation tools, platforms
and applications to effectively communicate messages.
ASSESSMENT: Direction: As a SHS student, your task in this subject is to create
a video presentation. The content of your video presents why incoming SHS students
must choose your track (academic track). Don’t forget the principles and elements of
web designs when creating your output. Choose your own online platform for your
video presentation. Your work will be published online. Give the URL of your video
presentation to your teacher for checking.
5
Rubric for assessing your video presentation:
CRITERIA 4 3 2 1
Text Layout, Selects and Selects and Selects and Does not
Use of inserts high inserts inserts many insert any
Graphics quality graphics graphics and low-quality graphics, or
and and multimedia multimedia graphics and uses only
Multimedia when that are mostly multimedia lowquality
appropriate to high quality which do not graphics and
enhance the and enhance the multimedia,
content’s visual enhance and content. which do not
appeal and clarify the enhance the
increase content. Acknowledges content.
readability. only a few
Acknowledges multimedia Does not
Acknowledges all most image and image acknowledge
image and and sources and any image or
multimedia multimedia uses multimedia
sources with sources with incomplete sources, either
captions. captions. captions. with a caption.
Content and Postings provide Postings Postings Postings show
Creativity comprehensive provide provide no evidence of
insight, moderate minimal insight,
understanding, insight, insight, understanding
and reflective understanding understanding or reflective
thought about and reflective and reflective thought about
the thought about thought about the topic.
topic by the topic. the topic.
...building a
focused
argument
around a specific
issue or
...asking a new
related question
or ...making an
oppositional
statement
supported by
personal
experience or
related research.
6
Citations All images, Most images, Some of the No images,
media and text media or text images, media media or text
created by created by or text created created by
others display others display by others does others display
appropriate appropriate not display appropriate
copyright copyright appropriate copyright
permissions and permissions copyright permissions
accurate and accurate, permissions and do not
citations properly and does not include
formatted include accurate,
citations. accurate, properly
properly formatted
formatted citations.
citations.
Quality of Video Video Video Video
Writing and presentation presentation presentation presentation
Proofreading entries have no entries have entries show entries use
spelling or few spelling or some evidenceincorrect
grammatical grammatical of correct grammar and
errors. errors. grammar, spelling,
spelling, consistently
punctuation, making it
etc. difficult for
others to
follow ideas in
entry.
Video Video Video Video Video
Organization presentation is presentation is presentation is presentation is
easy to easy to clear to read, unorganized,
understand, understand, neat, and hard to follow
easy to navigate, clear to read presentable All or navigate,
clear to read, and navigate, links and titles nonworking
aesthetically
aesthetically are easy to links, visually
appealing and
appealing and find. Blog is dissident.
relevant, all links
relevant, all fairly easy to
are working, and
links and titles navigate.
titles are easy to
are easy to
find.
find.