Name: _________________________________________

Date Checked: ___________________________________

EMPOWERMENT
TECHNOLOGY
Quarter 2 – Module 3
Imaging and Design For the
Online Environment

1
 WHAT I KNOW
Multiple Choice:
Directions: Read and answer the questions below. Write the letter of the correct
answer.

______1. Which principle of design have equal distribution of visual weight?

A. Space C. Proximity
B. Balance D. Alignment
______2. Which principle of design duplicate the characteristics of similar elements?
A. Repetition C. Proximity
B. Balance D. Alignment
______3. Which principle of design refers to lining up the elements?
A. Space C. Rhythm
B. Contrast D. Alignment
______4. Which principle of design use conflicting elements or colors?
A. Space C. Rhythm
B. Contrast D. Alignment
______5. What kind of balance occur when a design have equal graphic weight?
A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
______6. What kind of balance occur when a design have unequal graphic weight?
A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
______7. What kind of balance occurs when the design elements swirl out?
A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
______8. Which element of design defined by points moving in space?
A. Direction C. Shape
B. Texture D. Line
______9. Which element of design refers to the area that an object occupies?
A. Direction C. Shape
B. Texture D. Line
______10. Which element of design refers to the surface quality of a shape?
A. Direction D. Shape
B. Texture D. Line
______11. Which element of design is used to create emotions to the viewer?
A. Colors C. Size
B. Texture D. Line

______12. Which element of design refers to the relationship of the area occupied
by one shape to that of another?
A. Direction B. Texture C. Size D. Line
2
 ______13. Which principle of design maintains a relationship between items that go
together?

A. Space B. Balance C. Repetition, Pattern, and Rhythm D. Proximity

______14. Which principle of design duplicates the characteristics of similar

elements to contribute to design consistency?

A. Space B. Balance C. Repetition, Pattern, and Rhythm D. Proximity

______15. Which principle of design that is left blank?

A. Space B. Balance C. Repetition, Pattern, and Rhythm D. Proximity

Lesson 1:

Evaluate Existing Websites and Online Resources

WHAT I NEED TO KNOW

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.

Photo Credit: https://www.carousell.ph/

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.

3
 WHAT’S NEW
Activity 1 – Evaluate the design of Arngren website.
In creating any design, we should always remember the different types of elements to be used and
how to use them properly.

Given the picture below, what can you say about the design of the website?
_________________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Do you like the design of Arngren website?

_________________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Why? OR Why not?

_________________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Photo Credit: http://arngren.net/

WHAT IS IT
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.

The Elements of Design

These are the materials or tools to make different designs or Arts.

LINE – Lines are defined by points moving in space. It can

create a sense of movement or direction in your design.
Line is can be smooth, rough, straight, curve, broken, thick
or thin. Image: "Lines" by Alan R. Martinez
SHAPE – A shape is an enclosed space, the boundaries of
Image:
which are defined by other elements of art like lines,
"Shapes" by
colors, values or textures. Shapes can be used to create Alan R.
patterns and draw the viewer’s attention. Martinez

4
DIRECTION – Applying motion to create the visual illusion of movement. Use horizontal direction for
calmness, stability and tranquility while vertical direction for emotions of balance, formality and alertness.
SIZE (SCALE) – Size is basically the relationship of the area
occupied by one shape to that of another. Large elements means
more significant than the small one.

Image: "Scale" by Alan R. Martinez

TEXTURE – Texture refers to surface appearance of an object

given by the dimensions, form, thickness, arrangement, and
amount of its basic parts.

Image: "Texture" by Alan R. Martinez

COLOR – Color is light redirected off objects. It is used to create
curiosity and emotions to the viewer’s. It has three main
characteristics: hue (these are red, green, blue, etc.), value
(lightness/ darkness), and intensity (saturation, or amount of
pigment) and temperature (warm and cool).
Image: "Color" by Alan R. Martinez

The Principles of Design

These are the rules that help you organize and place the materials to make arts or designs.
1. BALANCE – Balance in design is the state of equal relationship. It means equal distribution of
visual weight in a design. It can be achieved by adjusting the visual weight of each element, in
terms of size, color, textures, shapes or contrast. Balance in graphic design provides stability
and structure to a design.

Image: "balance" by Alan R. Martinez

There are different kinds of balance:

Symmetrical balance occurs when identical weights are on equal sides of a

composition.

https://www.pexels.com/photo/light-landmark-building-architecture-135018

5
 Asymmetrical balance occurs when a design have unequal graphic weight on either side,
but those unequal graphics need to balance each other (un-evenly balanced).

https://pixabay.com/photos/black-and-white-trees-road-path-
692155/

Radial balance occurs when the design elements swirl out from a central axis
(emanating from a central point)

https://www.pexels.com/photo/brown-and-black-round-
concrete-surface-3602215/

2. PROXIMITY – Proximity maintains a relationship between items that go together. It helps

creates organization by grouping the same elements together or in close proximity. The
elements should be connected visually.

https://www.w3schools.com/howto/tryit.asp?filename=tr
yhow_c ss_social_login
3. ALIGNMENT – Alignment refers to lining up the elements of a design along the top, bottom,
center or sides of the elements. It allows us to create order and organization in our design. The
whole point of the alignment is that nothing in your design should look as if it were placed there
randomly.

6
https://www.apple.com/mac/

4. REPETITION, PATTERN, AND RHYTHM – Repetition duplicates the characteristics of similar

elements to contribute to design consistency. It strengthens a design by tying together
individual elements; pattern is a regular arrangement of alternated or repeated elements like
shapes, lines or colors; rhythm--is a combination of elements repeated, but with variations.

https://pixabay.com/illustrations/circle-district-colorful-
structure-2891368/

5. CONTRAST – Contrast refers to the use of conflicting elements or colors while still remaining
harmonious and unified when the artwork is viewed as a whole. It allows you to give emphasis
to key elements in your design.

Fish image from https://pixabay.com/vectors/swordfish-fish-

marine-sea-ocean-311074/ modified by: Alan R.
Martinez

6. SPACE – It refers to the area that an object occupies. Both positive and negative space should
be considered in graphic design. White space gives your design breathing room.

https://www.apple.com

7
 WHAT’S MORE

Activity 2 – Different Principles of Design and Elements of Design Used.

Based on the given picture below, identify what Principles of Design and Elements of Design being used.

Principles of Design Used

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

WHAT IS IT
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. https://commons.wikimedia.org/wiki/File:Wom
en_Degraded_in_Music_Videos_Infographics.p

8
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/

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.

Tutorials and trainings in Creating Infographics using Piktochart

1. Visit youtube website. Open your favorite browser and type in www.youtube.com in the
address bar.
2. Search Infographic Tutorials. Type in piktochart infographic tutorials in the search bar.

9
3. Watch Tutorials. Select a video and start watching tutorials.

WHAT’S MORE
Activity 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?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

Screen capture from: https://visual.ly/community/infographic/computers/think-you-click

WHAT I HAVE LEARNED

Activity 4 – Synthesizing Your Learning
Answer the following questions based on your learning. Be brief and concise. From your own
understanding, make a list on:

1. What makes a good design?

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

10
2. What makes a good infographics?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

WHAT I CAN DO
Activity 5 – Giving Advice for Good Design
The website below is considered as one of the worst design website of 2018 by
https://www.loungelizard.com/top-5-worst-website-designs-of-2018/. As a student who knew the
different Elements of Design and Principles of Design, what advice can you give to the creator of arngren
website to make it more attractive?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

11