Lesson

Evaluate Existing Websites And Online

1 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.

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.
• 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 Image: "Scale" by Alan R. Martinez
one.

• 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/
-landmar
-buildin-
architectur
- /
 • 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/ -an-whit-tree-roa-pat-
69215/

• 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-
concretesurface-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/
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.
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
-distric-colorfu-structur-
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-fishmarine-
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.co

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

2. 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?
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?

_______________________________________________________________
_______________________________________________________________

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?
 Lesson
Use Image Manipulation Techniques
2
What’s In
. In lesson 1, you have learned how to make a good design by applying the different
Element of Design and following the Principles of Design. You were also able to
distinguish what is a good and a bad design
 What I Need to Know

• 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.
Before we go further, you need to answer the first activity of the lesson

What Is it
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
 Online File Formats for Images and Text

Image file format refer to how data associated to the image will
be stored. It can be compressed to decrease file size of the image.
There are two different compression you can choose when enhancing
your images: lossy and lossless compression. Lossy compression
reduces file size by removing redundant information means that some
data from the image file is lost. While Lossless compression retains
values and manages to lower file size.

Common image file formats

Name Extension Color Compression Common Uses

Joint .jpg, 24- bit Lossy Used for Online photos and /
Photographic .jpeg or artwork
Experts
Group

Graphic .gif 8 – bit Lossless Animated graphics like banner

Interchange ads, email images and social
Format media memes

Portable .png Up to Lossless High-quality transparent web

Network 24-bit graphics. Considered as best
Graphics image file type for web
graphics.
Tagged .tif, 24-bit lossless Primarily used in photography
Image .tiff and desktop publishing.
File Format

Image resolution refers to the number of pixels in an image or

the detail an image holds. It is identified by the height and the width of
the image. A pixel is just one unit of the whole digital image it is the
smallest unit of an image. The higher the resolution, means that there
more pixels per inch (PPI), resulting in more pixel information and
creating a high-quality, crisp image.
What is GIMP?
GIMP is a cross-platform
image editor available for
GNU/Linux, OS X, Windows and
more operating systems. It is free
software, you can change its
source code and distribute your
changes.

GIMP means "GNU Image Manipulation Program". It is free software

to download at http://www.gimp.org/. GIMP was built for
a Linux system, but it can also runs on any platforms like Windows and
Mac OS. Gimp Tutorials
 Download and install Gimp Image Editor

a. Open your browser and visit

http://www.gimp.org/.
b. From the GIMP website, click on the button that says
“Download” to proceed to the download page.

c. Scroll down and look for the Current Stable Version.

Click Download GIMP directly.

d. Choose where you going to save your GIMP installer and

Click Save. Wait for the download to finish, it may take
some time.
e. To install the GIMP application, Double click or Right
Click on the file installer to start the installation.
f. Just follow the on screen instruction to install the GIMP.
g. For more detailed instruction on how to download and
install Gimp in your computer, please visit youtube
website and type in “How to download and Install
 Gimp” in the search bar and click search. See picture
below for the guide.

• Crop and Resize an image.

a. Open GIMP photo editor and click on File > Open to

open the image you wish to crop and resize.
b. The image opens in a new editing window.
Select the rectangular icon from the GIMP
toolbar.
c. After select that tool, move your mouse to the
image window and create a selection that you
wish to crop.
d. Then, select Image > Crop to selection from the menu
bar or you can also right click the image window and
select Image > Crop to selection.

e. To resize the image, you can click Image > Rescale

Image.
f. Enter your desired width and click Scale. The image will
then be resized and automatically rescaled using the
width you entered.
g. If you are satisfied with the result, you may now save you
file by clicking File > Save as.
h. For the instruction on how to crop and resize an image,
please visit youtube website and type in “gimp tutorial
resize and crop image” in the search bar and click
search. See picture below for the guide.
• Color Adjustment.
a. Open GIMP photo editor and click on File > Open to
open the image you wish to adjust the color.
b. Click Colors > Levels from the menu bar or right click
the image window and select Colors > Levels.

c. Click on textbox beside Channel to view the four options:

RGB (Red,Green, Blue) and alpha.
d. You can adjust the red channel by selecting it and
changing the value or adjusting the input and output
level.
e. You can continue adjusting the color levels by selecting
the “Green” or “Blue” channel options and then dragging
the triangular slider buttons for the preferred effect.
f. If you are satisfied with the result, you may now save you
file by clicking File > Save as.
g. For more tutorials about applying color adjustment on an
image, please visit youtube website and type in “gimp
tutorial Color Adjustment” in the search bar and click
search. See picture below for the guide.
• Brightness and Contrast.
a. Open GIMP photo editor and click on File > Open to
open the image you wish to adjust the brightness and
contrast.
b. Click Colors > Brightness-Contrast from the menu bar
or right click the image window and select Colors >
Brightness-Contrast

c. A new dialogue box will appear so that you can adjust

your settings.
d. You can adjust the "Brightness" and "Contrast" by
clicking and dragging the scrollers left or right or by
entering a value into the text boxes.

e. You can click on “Edit these Settings as Levels" to

bring up the
"Levels" pop-up window.
 f. The "Brightness-Contrast" is a simpler version of the
changes that you can make with "Levels". "Levels" gives
you much more control over the editing process.
g. For the instruction on how to apply color adjustment on
an image, please visit youtube website and type in “gimp
tutorial Brightness & Contrast” in the search bar and
click search. See picture below for the guide.

• Text Tutorial.
a. Open GIMP photo editor. And Create a new document by
clicking File > New. Just accept the default value then
click OK.
b. Open the Type tool by clicking on the black "A" in the
Toolbox window or by just pressing the letter “A” in your
keyboard.

c. Select the Philosopher font type. If you don’t have

philosopher font you can download it here
https://www.ffonts.net/Philosopher.font?text=ABCDEFG

d. Type the word “Google” in the image window.

e. Highlight 2 letter “G” and change the color to blue. Next,
highlight the first letter “o” and change their color to red,
highlight the next letter “o” and change their color to
yellow lastly highlight the letter “l” and change their color
to green.

f. Don’t forget to lock the transparency when you’re done.

g. The next step is to convert the text into an image. Right
click on your google text layer and then click "Discard
Text Information".

h. GO to your google layer. Right Click > Duplicate Layer,

lock transparency and fill the layer with black.
i. Open Gaussian blur by click Filters > Blur > Gaussian
blur

Do a Gaussian blur of 10 pixels.

j. Select the layer that contains the colored Google logo

and Open Bump Map by clicking Filter > Map > Bump
Map. Enter the following information: Azimuth: 90
Elevation: 45
Depth: 7
 Leave the default value for X offset, Y offset, Water level
and Ambient.

k. For more tutorials about Text and Text effects, please

visit youtube website and type in “gimp text effects” in
the search bar and click search. See picture below for the
guide.

• Image Manipulation (Bear on the Road).

a. Open GIMP photo editor and click on File > Open
b. Locate the 2 images (European brown bear and road). If
you don’t have these images please download it here:
Bear : https://pixabay.com/photos/european-brown-bear-brown-
bear-
3336849/
Road : https://pixabay.com/photos/road-scenery-destination-
4125391/
c. Select the Free Selection Tool from the tool bar.
d. Go to the tool option, and tick on Feather edges.
e. Change the value of the radius to 10
f. Create a selection in the image(A) then press
CTRL+X to cut the selection and go to the next
image and press CTRL-V paste (B).

Figur1:A 2Figure

g. You can used the move tool to adjust the bear image.
h. Erase the unwanted outer image by using the Eraser
Tool from the tool bar then go to tool option and select
the brush size.
i. Click and drag the outer image to delete.
j. Finally, click on Colors > Hue Saturation
k. Adjust the saturation.
 l. For more tutorials about image manipulation, please visit
youtube website and type in “gimp manipulate images”
in the search bar and click search. See picture below for
the guide.

Combining Text, Graphics, and Images

Combining text, graphics, and images in your design will make your
message clearer.
• Transparent shapes o Add simple opacity to your shape to see
clearly the text you want to emphasize. It adds an elegant and
focal point to your design
• Fonts and Shapes
o Used the right font size (not to small and not to big) and
font type in your design and combined it with a nice
shapes.
• Text and background o Organized your design. Make used of
the different text alignment on an image(s).
• Clean and clear background o Less is more. Focus on what
matters. Use a clean and clear background for the message to
be readable.

What’s More
Activity 2: Gathering Client Information

You were approach by a politician and asked you to make election tarpaulin
for him. In this case, write down at least five (5) questions that you would want to ask
him/her before making the tarpaulin.

Five (5) Questions:

1. ________________________________
2. ________________________________
3. ________________________________
4. ________________________________
5. ________________________________
 What I Have Learned
Activity 3: Creating Election Paraphernalia

Make a tarpaulin layout based on the importations you gathered on

activity 2.

What I Can Do
Activity 4: Create an awareness campaign against water pollution

Directions: Design an Awareness Campaign (Tarpaulin) against

water pollution. You can used any image editing tools

Summary
Elements of Design - Elements of Design are the materials or tools to make
different designs or Arts.
Line – Lines are defined by points moving in space.
Shape – Shape refers to the area that an object occupies
Direction – Applying motion to create the visual illusion of movement.
Size (scale) – Size is basically the relationship of the area occupied by one shape to
that of another.
Texture – Texture refers to surface appearance of an object given by the
dimensions, form, thickness, arrangement, and amount of its basic parts. Color –
Color is light redirected off objects
Principles of Design - Principles of Design are the rules that help you organize and
place the materials to make arts or designs.
Balance – Balance in design is the state of equal relationship
Symmetrical balance occurs when identical weights are on equal sides of a
composition.
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).
Radial balance occurs when the design elements swirl out from a central axis
(emanating from a central point)
Proximity – Proximity maintains a relationship between items that go together.
Alignment – Alignment refers to lining up the elements of a design along the top,
bottom, center or sides of the elements.
Repetition, pattern, and rhythm – Repetition duplicates the characteristics of
similar elements to contribute to design consistency.
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.
SPACE – Space is the part of a design that is left blank.
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.
Photo editing Tool - Photo editing Tool and designing software allow you to
manipulate or edit images.
Image file format - Image file format refer to how data associated to the image will
be stored. It can be compressed to decrease file size of the image.
Lossy compression- Lossy compression reduces file size by removing redundant
information means that some data from the image file is lost.
Lossless compression - Lossless compression retains values and manages to
lower file size.
Image resolution - Image resolution refers to the number of pixels in an image or the
detail an image holds.
Pixel - Pixel is just one unit of the whole digital image it is the smallest unit of an
image. Gimp - GIMP is a cross-platform image editor available for GNU/Linux, OS X,
Windows and more operating systems.

Assessment: Post-Test (Ask the teacher for the link of the

google form)