0% found this document useful (0 votes)
3 views

Lesson 1 Module 3

Uploaded by

jcdims07
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views

Lesson 1 Module 3

Uploaded by

jcdims07
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

EMPOWERMENT

TECHNOLOGY
MODULE 3:
IMAGING AND DESIGN FOR THE ONLINE
ENVIRONMENT

INTRODUCTION

Lesson 1: Evaluate Existing Websites and Online Resources


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.

ANALYSIS
1. What are the Elements of design? 5

2. What are the Principles of design?


3. How to manipulate an image?
ABSTRACTION ABST

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

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

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-treesroad-
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=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/

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

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.

10

You might also like