Full name:

Grade/Strand: Teacher: Ms. Hazel D. Aseñas

Subject: Empowerment Technologies Module 4

IMAGINING AND DESIGN FOR THE ONLINE ENVIRONMENT

Learning Objectives:
1. Evaluate existing websites and online resources based on the principles of layout, graphic,
and visual message design.
2. Use image manipulation techniques on existing images to change or enhance their current
state to communicate a message for a specific purpose.

EVALUATE EXISTING WEBSITES AND ONLINE

Before we can produce a high-quality design project whether designing a website, designing a
tarpaulin, creating banners or logos, we need to know and follow the basic principles and elements
of design. You may ask why? Well, because people care about the way things look. Take a look at
the picture below.

The picture above shows a good web design website. It uses the different elements on its design
properly. Not only that, the website designer also follows the rules in organizing and placing the
different elements in making website design.

EXPLORE ACTIVITY 1
Before we proceed to the new lesson, let us have a short review about the principles of
layout, graphic, and visual message design through recognizing the different images below.
This will help you to better understand the lesson about web design principles and
elements.

1
For this activity, identify which principle of graphic and layout best describe the following
images bellow. Choose your answer inside the box located at the bottom page then write
your answer in a separate sheet of paper.

BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

The elements and principles of design are the building blocks of a successful beautiful
design. The elements of design are the things or tools that make up a design while the
Principles of design are what we do to those elements.

Creating a website is often challenging and hard because it requires more than an
aesthetically pleasing appearance. In fact, there are billions of websites in the ‘world wide
web’ and only a few thousand of them are mostly good website. Several factors such as
consistency, colors, typography, imagery, simplicity, and functionality are considered when
building a website. To further understand, you need to study web design principles and
elements that will serve as a guideline on web development.

WEB DESIGN PRINCIPLES

Web design principles are general rules for the design of website that include basic
guidelines for the design of layouts and interaction design. It will also help you on how your
website will work based on the design you put into it. In this module, we have outlined the
5 basic principles of a good web design from various online resources to address what we
consider to be the most accurate, concise and comprehensive yet easy to understand
principle.

1. Purpose
The starting point of building a website is to have a very clear
purpose. This could be anything from providing information,
selling products to entertainment. Having a simple clear intention
on your website may accommodate and meet the user expectation
with what you have to offer. Therefore, you have to be crystal clear
about the objectives your web design is going to achieve.

2. Simplicity
Over-designed website may not work and may lead to distraction
from the main purpose of your website. Having design features
that do not serve the purpose may be frustrating to the loading
time of your website. Keep your design as simple as possible so

2
 that the users can feel it easy-to-use and can find what they are looking. Remember
simplicity always works in an effective web page design.

3. Load Time
Crowded and over-designed web design can affect the loading time
of your website. This may result to lose your visitors even if every
aspect of your website has a clear purpose. To improve the speed
10 and performance of your website you need to simplify your
design to optimize its loading time.

4. Communication
To establish better communication with the users, you must
formulate straight forward and easy-todigest information. This will
establish connection with the user to spend more time on your
website. Organizing information by making good use of headlines
and sub-headlines, illustration, and using bullet points is a clear
and consistent ways of communication to convey information to the
users.

5. Responsive
The best way to design an effective website is to make it mobile-
friendly on which the design of your website can shrink or expands
as per the dimension of the screen of the device. Today, with the
growing use of smartphones and tablets to browse the web,
designing a responsive and adoptive website is a must. Making
your website available across multiple devices will attract more
users.

WEB DESIGN ELEMENTS

Element of web design is the overall appearance of your website. It is the convergence of all
visual elements that contribute for a complete user experience based on its content,
usability and other aspect of the website. On this module, we gather the top 5 most critical
elements on web designing that your website should have.

1. Content
Content is considered as the backbone of your website because
this is the main reasons people seeking your website at the first
place. Using video, animation, relevant news, up-to-date
information and high-resolution imagery provide a great deal for
your website to be engaging, effective and popular. This will
ensure longer participation of the user on your website.

2. Usability
Usability anticipates what the users may think and help them
fulfill their needs with as little effort as possible. Your website
must be easily to navigate, intuitive, accessible and user-
friendly using navigation buttons. This will allow user to know
where they are on the website at all times and be able to find
where they want to go with little thought they have. This will
also be able to access any page they need without having to
view the whole site.

3. Aesthetic
Aesthetics includes factors such as balance, movement,
pattern, scale, shape and visual weight. This factor, if done
3
 properly, will visually contributes the credibility of your design. Having a visually
impressive yet simple website across all devices will reflect on what quality you have on
your website design.

4. Visibility
The success of your website is based on the volume of user
engagement you have. Even if you had the most aesthetically
pleasing and user-friendly website on the web, it would still be
unsuccessful unless it could be found. This element of web
design is vital, and it requires to formulate a plan to market
your website using search engines optimizer, social media and
email marketing. It’s important that you understand how to be
found, what platforms to target and how to utilize your
content.

5. Interaction
Adding comment boxes and opinion polls in the design of your
website can help you to improve the functionality of it. This
will allow you to engage with the users, hold their attention,
direct them and finally encourage them to contact you.
Because your website isn’t just there for show, it is there to
help your audience and ensure your growth.

ANATOMY OF A WEBSITE

Knowing the basic structure of a website can really help you understand how to build an
effective one. The example below will show you the basic structure of a website.

4
5
This is an example of a homepage which is known as the main or first page of your website. This
page usually acts as an overview, to give visitors an immediate sense of what you offer. It is also the
starting point where the user explores different parts of your website. The labeled parts given above
are what we are going to focus on since they are the most common parts of a website.

 Header
Header is the top of the page that usually contains the logo and navigation option on your
website.

 Logo
Logo is the graphic symbol of your brand that can be easily identify by the users.

 Navigation
Navigation help the user explore your website through the set of links that are present in
every pages of your website.

 Headline
Headline is a short and clear description of your website that helps visitors understand the
site’s content, products and services.

 Banner (or Slider)

Banner is a large image placed below the header that is meant to grab attention of the users.

 Content
Content is the images, text, graphics, videos and other media that make up a website. As we
discuss earlier, this is what the users are coming to the website in the first place. That’s why
you need to formulate an informative, easy to read, and concise information in designing a
website.

 Contact Form
Contact Form is a simple way to interact with the users directly through your sites. This
allow the user to comment or give any suggestion to your website.

 Footer
Footer is located at the bottom part of the website. Similar to the header, the footer stays on
every page. This part typically consists copyright information, social media links, privacy
policies and contact information

EXPLORE – ACTIVITY 2
Direction: This activity requires you to visit the link below in order to evaluate the websites based on its
design elements and principles. Identify what Principles of Design and Elements of Design being used.
Visit https://www.flyhyer.com for clearer view of the website.

6
 Principles of Design Used
1.
2.
3.
4.
5.
Elements of Design Used
1.
2.
3.
4.
5.

FIRM UP – ACTIVITY 3
Direction: Identify the anatomy of a website below by choosing the letter of the correct parts of it.
Write your answer in a separate sheet of paper.

What is Infographic?
The term Information graphic or Infographic is a photographic presentations of data and
information that use the different elements of design to make data easily understandable at a
glance. Infographics make complex messages become more visually appealing to the viewers.
Visual Message Design can help with effectiveness of delivery of a message. It can lend assistance in
presenting your ideas clearly.

Some Tools For Creating Infographics.

1. Biteable https://biteable.com/infographic/
2. BeFunky https://www.befunky.com/features/infographic-maker/
3. Visme https://www.visme.co/make-infographics/
4. Cacoo https://cacoo.com/
5. Snappa https://snappa.com/create/infographics
6. Canva Infographic Maker https://www.canva.com/create/infographics/
7. Google Chart https://developers.google.com/chart/
8. Piktochart http://piktochart.com/
9. Infogram http://infogr.am/
10. Mind the Graph https://mindthegraph.com/

7
PRINCIPLES OF VISUAL MESSAGE DESIGN USING INFOGRAPHICS

1. Be unique
Be creative is one of the most important aspect of designing an effective infographic.

2. Keep it simple
Make a design easy to understand. Straight to the point and focus more on the message.

3. Less is more
Focus on what matters. Keep your text minimal will most likely produce more impact than a page
full of words.

4. Sharing
Share it with your friends. It is the most important and effective thing to do in making infographic.

FIRM UP- ACTIVTY 3

Different Principles of Design and Elements of Design Used. Based on the given picture below, what
can you say about the infographic in terms of design? What is the message of the infographic?

DEEPEN-ACTIVITY 3
Synthesizing Your Learning
Answer the following questions based on your learning. Be brief and concise.
rom your own understanding, make a list on:

1. What makes a good design?

2. What makes a good infographic?

8
 USE IMAGE MANIPULATION TECHNIQUES

● How do you manipulate text and images?

● What is the best image format to be use in your projects?

● What is the best resolution in creating your projects?

The questions above are some of the few questions that comes into mind when we talk about Photo
Editing Sofware. The picture above is the Graphical user interface (GUI) of GIMP Photo Editor that
we will be using throughout the lesson 2.

DIFFERENT WAYS TO MANIPULATE IMAGES

Image manipulation is an art that involves enhancing or modifying an image using different
methods and techniques to achieve desired result. By using image manipulation on your photos,
you can remove blemishes on your face, change backgrounds, smooth out rugged areas, and so on
and so forth.

Photo editing and designing software allow you to manipulate or edit images. In order to perform
image manipulation, you need to have basic knowledge of image editing operations such as cutting,
cropping, replacing and more.
For this, you need an image editing software for image manipulation practices.
The followings are some examples of image editing software:

● Adobe Photoshop

● Gimp

● Corel Draw

● Pixlr Editor

● PAINT.NET

● InPixio
9
 TRANSFER-ACTIVITY 4
Directions: Create and design an infographic related to COVID 19.

10