EMPOWERMENT TECHNOLOGY

Module
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. The website designer also follows the rules in
organizing and placing the different elements in making website design.
 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? 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.

Module 5 – Page 2
• 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

which are defined by other elements of art like lines, colors,
values or textures. Shapes can be used to create patterns
and draw the viewer’s attention.
Image: "Shapes" by Alan R. Martinez

• 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

Module 5 – Page 3
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/
• 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/

Module 5 – Page 4
 • 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=tryhow_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.

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

Module 5 – Page 5
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

Module 5 – Page 6
 What is It

What is Infographic?

The term Information graphic or Infographic

is a photographic presentation 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

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/

Module 5 – Page 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.

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.

2. Watch Tutorials. Select a video and start watching tutorials.

Module 5 – Page 8
MODULE 5: Evaluate Existing Websites and Online Resources
ACTIVITY SHEET

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.

Module 5 – Page 9
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

_
_
_
__ _
_
_
_
_ _

Module 5 – Page 10
 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?

_
_
_
__ _
_
_
_
_ _

2. What makes a good infographics?

_
_
_
_
_
_
_ _
_
_
_

Module 5 – Page 11
 What I Can Do

Activity 4 – Giving Advice for Good Design

The website below is considered as on 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?

Module 5 – Page 12