Welcome!

COPYRIGHT DISCLAIMER
Copyright Disclaimer under Section 107 of the copyright act 1976,
allowance is made for fair use for purposes such as criticism,
comment, news reporting, scholarship, and research. Fair use is a
use permitted by copyright statute that might otherwise be
infringing. Non-profit, educational or personal use tips the balance
in favour of fair use.

All rights and credits go directly to its rightful owners. No

copyright infringement intended.
Rate the following websites based on their appearance and layout (10 –
highest, 1 - lowest). Make a short explanation supporting the rate that you
have given.

A
Rate the following websites based on their appearance and layout (10 –
highest, 1 - lowest). Make a short explanation supporting the rate that you
have given.

B
Imaging an d D es ign
for O nlin e
Enviro nm en t
Elements of Design
The first and most basic element of design
is the line. In design, a line is any two
connected points. These lines can be
straight or curved, and may be smooth,
rough, continuous, broken, thick, or thin. A
line creates division and hierarchy within
your design, helping direct the user’s eye
toward specific information or a specific
focal point.
A shape is the
result of enclosed
lines to form a
boundary. Shapes
are two-
dimensional and can
be described as
geometric, organic,
and abstract.
Colors create moods
and can say
something different
depending on the
connotations
associated with it.
Color can create an
emphasis on specific
areas of your design
layout.
 Value refers to the
degree of lightness and
darkness of a specific hue.
Value changes create
contrast on a page. In
design, use different tonal
values to create emphasis
in your design. You will
notice that high-value
images have a light and
airy feel to them, while
dark value images feel
heavy and dramatic.
 Texture adds a tactile
appearance to a design
layout. Imagine how a
design piece would feel if
you touched it. The goal
of texture is to add depth
to a 2D surface. Texture
can be applied graphically
through patterns, either
digitally created or an
image mimicking the
desired pattern.
 It is the way an artist
arranges elements in
the entirety of a
composition and can be
described as any three-
dimensional object. It
can also be measured,
from top to bottom
(height), side-to-side
(width), and from back
to front (depth).
Space can be described as
the distance around and/or
the area between design
objects or elements. When
a space is occupied by an
object or form it is said to
have positive space.
Conversely, negative
space refers to the
unoccupied space that
exists between and around
the main elements of the
central object or form.
Pr in ciple
of
Design
Balance in design
is the state of
equal
relationship. It
means equal
distribution of
visual weight in a
design.
 KINDS OF BALANCE
Asymmetrical
Symmetrical Radial balance
balance occurs when
balance occurs occurs when the
a design has unequal
when identical design elements
graphic weight on
weights are on swirl out from a
either side, but those
equal sides of a central axis
unequal graphics need
composition. (emanating from a
to balance each other
central point)
(un-evenly balanced).
BALANCE
BALANCE
BALANCE
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.
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.
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.
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.
Emphasis – an
area in the design
that may appear
different in size,
texture, shape or
color to attract
the viewers’
attention.
Proportion –
visual elements
create a sense
of unity where
they relate well
with one
another.
Variety – this
uses several
design elements
to draw viewer’s
attention.
Activities
Let us test your learning!
Activity 1: Based on the given picture below, identify what Principles of Design and
Elements of Design used.
Activity 1.2 (Group Activity)
In creating any design, we should always remember the different element and
the basic principles of design. We should know how to use and when to apply each
principle and element properly to enhance our design.

Given the picture on the next slide,

1.What can you say about the design of the website?

2.Do you like the design of Arngren website? Why? Why not?
3.What can you recommend to make the website attractive?
 Image
Manipulation
 Basic Image Manipulation Techniques

1.Crop and resize image

- Cropping involves cutting away part of the original image and
results in some of the pixels being discarded.
- Resizing can go in two ways: to make images smaller or
larger. Making images smaller simply discards pixels. Making
them larger adds pixels, which can result in a loss of quality.
Excessive enlargement will produce blocky-looking and/or fuzzy
pictures.
 Basic Image Manipulation Techniques
2. Brightness and contrast
-Brightness refers to the overall lightness or darkness of the image.
-Contrast is the difference in brightness between objects or regions.

Brightness and contrast adjustments. Increasing the brightness makes every

pixel in the image becomes lighter. In comparison, increasing the contrast makes
the light areas become lighter, and the dark areas become darker.

For example, a white rabbit running across a snowy field has poor contrast, while a
black dog against the same white background has good contrast.
 Basic Image Manipulation Techniques

3.Color adjustment
-In graphics and image-editing programs, color
adjustment(s) can be used to change the overall tone
of your image and to remove unwanted colors from
your image. This function allows you to control the
amount of red, green and blue in an image.
 Basic Image Manipulation Techniques
4. Combining text, graphics, and images
-Inserting text on graphics or images using image
manipulation tool.
-The way that you combine text and image (including shapes)
in a slide affects the message you convey and the visual
appeal of the material.
-Combining text, graphics, and images in your design will
make your message clearer.
Online File Formats for Images
 Image resolution refers to the number of pixels in an
image or the detail an image holds. We can identify it by
the height and the width of the image.
A pixel is just one unit of the complete 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.