03/12/2024
CONTENTS OF
IMAGES, DESIGN, AND THIS Lesson
MULTIMEDIA FOR THE
Use image manipulation techniques on existing images to change
or enhance their current state to communicate a message for a
specific purpose;
ONLINE ENVIRONMENT
Create an original or derivative ICT content to effectively
communicate a visual message in an online environment related
to specific professional tracks;
Explore the principles of interactivity and rich content; and
LESSON 6 Evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
Topic outline
a. Basic Principles of Graphics and Layout
b. Principles of Visual Message Design
c.
d.
Principles of Visual Message Design Using Infographics
Online File Formats for Images and Text Basic principles of
e. Principles and Basic Techniques of Image Manipulation
graphics and
layout
f. Basic Techniques in Image Manipulation
g. Combining Text, Graphics, and Images
h. Uploading, Sharing, and Image Hosting Platforms
i. Multimedia: Beyond Texts and Images
j. Rich Content in the Online Environment and the User Experience
k. Multimedia and Interactivity
balance
Elements are arranged evenly
on the screen because no part
of the screen is given too
much weight.
Symmetrical balance uses the same characteristics.
Asymmetrical uses different but equally weighted features.
1
03/12/2024
emphasis
Giving more weight or
focus to some elements
to give attention to a
certain part or the most
important part or
content.
PROXIMITY AND UNITY
These are principles of design where closely
related elements should be placed together so
they will be perceived as one unit of design.
Proximity Unity
Refers to how elements are Unity is about the overall
grouped together based on cohesiveness of a design.
their relationships.
Alignment
Gives order to the design
Group and organize elements
Creates connections between elements
REPETITION, PATTERN, AND RHYTHM
These are the repetition of visual elements or pattern in an image
that supports proximity and unity.
Repetition The use of the same or similar elements
multiple times in a design
Pattern Refers to the repetition of elements in a
regular arrangement
Rhythm Is when a visual elements create a
sense of organized movement.
2
03/12/2024
proportion
A screenshot of
CNN.com web
page shows
how the font
Refers to the relative size of header is
proportional to
sizes and scales of the the size of its
different elements of content. This is
done so that
the design in connection the viewer can
easily see what
to the overall design. the article is all
about.
Well-sized and
thoughtfully positioned.
variety
Refers to how the design must
contain different elements to
catch the viewer’s attention
and prevents it from being
monotonous.
Café Terrace at Night by Vincent van Gogh
principles of
visual message
design
Visuals speak a thousand words
3
03/12/2024
infographics
• Information graphic is a
graphical
representation of
information and data to
infographics make the presentation
visually appealing that
A visual message for information can draw the viewer’s
dissemination. attention.
• It is used to present
complex information
and data in clear and
understandable way.
infographics infographics
• An infographic can be in • Infographics can also be used to
the form of graphs, present information about certain
photos, or charts with processes.
definitive captions.
UNIQUENESS
Principles of Visual • Must be innovative
Message Design Using • Should not be a rehashed
version of other
Infographics
infographics
• Makes the infographic
Guide for Informative and Visually Appealing Infographics striking and unforgettable
• Try new design instead of
plain charts or graphics
4
03/12/2024
simplicity Creativity and
• Include important
information in the
boldness
infographics • Information must be
• Avoid too many graphics direct to the point
so that readers or • Use appropriate and
viewers will not be attractive images
confused
Minimalist shareability
orientation • The characteristics are
easily understood
• Easier to understand
• Message can be relayed
• Requires valuable fast
information
• Can be shared online or
• Must be concise, easy, print
and quick to read
Joint Photographic Experts
Group (JPEG/JPG)
• This is the most popular image
file format.
Online file formats • This is the default file format
used by digital cameras.
for images and texts
• It is a good choice for pictures
with complex colors and
shading.
Compressed to conserve online space • Jpeg is a lossy compression file
– the quality is decreased after
the file size is reduced.
5
03/12/2024
Portable Network Graphics
Graphic Interchange (PNG)
Format (GIF) • This is a lossless compression file
format. It means that the quality of
• Capable of displaying simple the image is still the same after the
animation file size has been reduced.
• Better for logos, drawings, • It is designed specifically for
small txt, black and white uploading an image on the internet
images, or low-resolution files rather than for print.
• Ideal for displaying images with few
colors.
Principles IMAGE
AND BASIC MANIPULATION
The process of editing
TECHNIQUES OF and modifying an image
using various methods,
IMAGE techniques, and
software to achieve
MANIPULATION
desired result.
Principles OF BACKGROUND
IMAGE COLOR
MANIPULATION Background color must match
and complement the image
6
03/12/2024
MULTIPLE IMAGES SHADOW
Multiple images are used for Shadows are added to add
emphasis and must be related with realism and aesthetic value
each other to convey unified to the image
message
proportion Blending
• In multiple images, pictures must be
resized to make the combined
colors
images more realistic. Colors should complement
• Help to convey the message of the each other and must enrich
image better. the message the image needs
to convey
Emphasis on
detail Basic Techniques in Image
The most crucial part of the image
must be given more focus Manipulation
7
03/12/2024
Changing
background
and colors
Used to improved the
blending of colors
CROPPING IMAGE
Cutting of an unimportant part of an image
INSERTING
IMAGES
• Adding another image
to an exiting image
• To integrate objects
that are necessary in
the image but are not
resizing IMAGE
originally in it
Changing the original size of the image to ensure
proportion or make the image fit
CHANGING CHANGING
CONTRAST BRIGHTNESS
• To improve the visibility
• To improve color of the entire image
difference and
brightness between • To emphasized the
different objects message of the image
and to improve the
• To improve visibility of quality of light in the
objects in the image image
8
03/12/2024
TEXT OVERLAID
Combining ON AN IMAGE
• The text hover above the
Text, image
Graphics, • Images should not be
overpowered by the text
and Images • Text should be in support
of the image
• There must be contrast
between texts and the
images
TEXT WRAPPED
AROUND IMAGE TEXT AND
• Text surrounds or
IMAGE
wrapped around the
image. May follow the
INTERSECT
contours of the images or • Texts are placed within or
it could be in a straight behind images
line. • The text may rest on
• Commonly used by some parts of the image
brochures and newsletter
TEXT AND TEXT and image
IMAGE ALIGNED in rePEATING
Text and images must be
aligned
SHAPES
• Text, images, and shapes
Vertically aligned: are combined in a
repeating pattern for
Width of text = width of image
cohesiveness
Horizontally aligned: • Adding text and images to
Height of text = height of the same shape to
image emphasize unity
9
03/12/2024
Uploading, Sharing, and Image
Hosting Platforms
Uploading, UPLOADING
SHARING
Sharing, and
Uploading pictures is Sharing of images is the
the process of saving act of passing pictures IMAGE HOSTING
pictures online or Allows user to upload
uploaded online for
Image Hosting
through an external images to a website
others to see or use. (image hosting
serve, (e.g. cloud
storage) service)
Platforms
✓Social media platforms
✓Emails
✓Served as backup ✓Flickr
✓Shared drives
✓Save memory on the ✓Sharing photos using ✓Photobucket
device Google Photos
Rich Content in the Online
Environment and the User experience
Multimedia: MULTIMEDIA RICH MEDIA
Beyond Text • The combination of different • The combination of text,
media in one product audio, visuals, and the other
and Images • Media includes audio, video, interactive web elements to
text, graphics, and images catch user’s and viewer’s
interest to interact and
engage with the content.
• It encourages participation
Rich media content can be one of these forms:
VIDEOS GIFs
These are a record of These are images that can
moving visual images that be animated or static
are videotaped or digitally
made
10
03/12/2024
Rich media content can be one of these forms: Rich media content can be one of these forms:
INSTAGRAM STORIES CONTENT AUDIO NARRATION
These are multimedia PODCASTS These are informative online
shared as Instagram story These are downloadable digital audio files that discuss a
audio file on the internet that INFOGRAPHIC
particular topic This is a visual counterpart
are usually in series
of a message
Rich media content can be one of these forms: Rich media content can be one of these forms:
COURSEWARE
These are
computer
programs and
other contents
deployed
online that are
WEBINARS AUDIOS intended for
These are live or recorded These are all forms of educational
seminar of a particular topic essential sounds that are purposes
via the internet recorded and transmitted
online
Rich media content can be one of these forms: Benefits of using rich media in online contents by
Ryan Bozeman (2020)
• Grabbing the attention of new
audiences
• Increasing engagement rates
• Lowering engagement bounce rate
• Building better user experience
• Developing deeper insights
ONLINE TESTS GAMES
These are games that can be increasing search reach
These are online versions of played on computers and
traditional tests mobile devices
11
03/12/2024
Rich content media improves user experience in
these ways: Multimedia and
• It makes users see the
usefulness of the content.
Interactivity
• Interactivity is the dialog
• The users find the site and
that occurs between the
contents easy to use.
user and the media in a
• The users appreciate things they reciprocal relationship.
see and do.
• Interactivity can be
• The users with disabilities can done in many ways like
access the content. clicking, dragging,
• The users trust the information touching, and following.
they get.
12
