21st Century Literacies

Multimedia : Visual
♦ Communicating
information in a
variety of forms

“A picture is worth a
thousand words.”
Let’s watch a video
What is Visual literacy?
Visual Literacy
 According to Merriam-Webster, visual
literacy
is the ability to recognize and understand
ideas conveyed through visible actions or
images.

 From an educational
institution’s standpoint,
visual literacy is the ability to see, understand
and, ultimately, communicate visually.
 Visual Literacy

o the ability to interpret graphical information,

o to understand visual message
o is a language of icons, signs, pictures and art

that is “read” as any other symbol system

with
specific rules, common uses, meanings
(Campbell, 2007).
 Visual Literacy
Two sides to visual literacy:
a. the ability to view and interpret visual
information
- one reads and comprehend what is presented
visually and graphically.

b. the ability to design and create visual

representations
of information.
- actively create visual representations to help
Visual Literacy and Visual
Communication
 Visual communication is all around us.
From billboard ads and posters to films and
media, visual communication is an
inescapable part of our everyday lives.
The importance of Visual
Communication
 Do you remember how you started to communicate?

 How you were taught about the things around you?

 How you came to identify daily items around the house:

animals, shapes and sizes?

 What aids were used by teachers to effectively

facilitate learning in your early childhood education?
 Visual Communication
 It can be a drawing, a poster, a video, an
advertisement or any visual material you may find
online
and across social media platforms.
 Visual images include photo posts, viral videos, charts,
infographics and any other piece of communication
that utilizes signs and symbols to deliver a message.
 The Internet is populated with visual content. From
advertisements to personal stories, everything is
narrated with the use of visual media.
Let’s watch a video
What is Visual Communication?
10 commandments of Visual
Communication
1. Colours - Play them Cool Colours

 Playing with colours definitely becomes more intuitive

with experience.
 Keep your colour palette simple and limited.
 The colour choices have a big impact on the hierarchy of
a user interface.
 Focus on the most important elements on the page.
10 commandments of Visual
Communication
2. Typography - Know Your Type

 Choose suitable fonts and size.

 Focus on one standout font and play with its different
contrast
and weight options.
 Treat your main type selection like a prized piece of art,
and
take time to appreciate it without distraction.
10 commandments of Visual
Communication
3. Shape - Shape Your Design

 It’s important to consider the use and placement of shapes

because the brain of a user will process the shape they see
before they even realize what they’re looking at.
 It’s an efficient way to support content and the overall
message you’re trying to communicate.
 Shapes are a bit like road signs; you see them, they direct and
influence you,
10 commandments of Visual
Communication
4. Hierarchy - Every Element has a place

 Hierarchy brings about harmony, and harmony simple means that a

design feels natural and pleasing to the user.
 Hierarchy exist for a reason, the main one being that the user’s eye
must gravitate to the most valuable information for a product to be
effective. 
 It keeps from being intimidated by the noise and clutter of the data,
and it ensures that the most important thing is very obviously the
most important thing.
10 commandments of Visual
Communication
5. Lines - Lines Speak Your Moods

 Lines can stand alone or be part of a larger shape, and, like

shapes, they influence the way a user reads a design
 Vertical lines imply feelings of dynamics and speed, while
horizontal lines tend to create a sense of serenity and calm.
 The use of lines in visual design might seem like an
afterthought
to the untrained eye, but to a designer they are a critical
component of his or her work.
10 commandments of Visual
Communication
6. Iconography - All about Iconography

 Iconography plays a huge role in a user interface. The images

within a design set the tone for what the user is going to
experience as he/she navigates the interface.
 The most important thing to remember is that the purpose of
the image must be clear.
 The symbol/icon needs to be universally understood, or at least
fully understood by the target group.
10 commandments of Visual
Communication
7. Contrast - No room for Grey Areas

 Contrast matters for every element of design (typography,

shape, hierarchy, colors, etc.).
 When there’s not enough contrast built into a design, it becomes
difficult for a user to navigate their way through the information
that’s being presented.
 When there’s too much contrast, the user’s eye is drawn away
from the critical information and instead focuses on the design
itself because the elements pop too much and demand their full
attention.
10 commandments of Visual
Communication
8. Order - Keep things aligned

 In design, order is part of a well-planned hierarchy.

 When things are organized, a user is more likely to have a
calm, distraction-free experience with an interface. 
 When things are disorganized, a user’s eye is quick to catch
the flaw and he/she immediately feels a sense of discomfort
as they attempt to continue navigating their way through the
information. 
10 commandments of Visual Communication

9. Size - Size matters

 The use of different weights is a great way to help

hierarchize a
design while keeping it very clean.
 It’s important to select the right font weight for each
element in
your design, allowing the individual element to dictate which
weight is the best fit. 
 It should serve a purpose, like highlighting a concept, an
10 commandments of Visual
Communication
10. Space - Less Space is More Space

 Space must be used smartly in user interfaces.

 In the same way that silences and calculated pauses are
effective when giving a speech, negative spaces allow the
user to breathe a little, and to understand and digest the
information they’ve been given.
Forms of Visual Communication
1. Visual Communication Form - Public Signs
A sign is a mark or shape that always has a particular
meaning.
Their advantages lie in the cross-cultural communication which
is
not limited by language barrier. 
Forms of Visual Communication
2. Visual Communication Form - Visual Symbols
Visual symbols are used from long ago. For example,
pigeon, heart and gold are used as the symbol of peace,
love and wealth respectively.
Forms of Visual Communication
3. Visual Communication - Chart and Graph
This form is very perfect for data analysis.
It includes many types such as bar, column, pie and
doughnut
chart.
To analyze figures more effectively, combine them together.
Forms of Visual Communication
4. Visual Communication – Table

Table is suitable for classifying numbers. It is one primary

form to
structure and communicate quantitative data.
Forms of Visual Communication
5. Visual Communication - Map
A map can represent a place vividly. Online maps are gaining
increasing popularity. For example Google Map, a reliable
mapping service, provides useful location information.
Forms of Visual Communication
6. Visual Communication - Other Diagrams
 
Flow chart Organizational Chart
Mind Map

Pie Chart Column Chart

Forms of Visual Communication
7. Overhead Transparencies/Projector Slides

Overhead transparencies/projector slides that are displayed

on
the OHP (overhead projector) are one of the most popular
forms of visual communication aid that are used in web
seminar and lecture rooms. 
Forms of Visual Communication
8. Videos
Videos are also a popular form of visual communication.
Forms of Visual Communication
9. Print
Brochures, flyers, and posters are examples of visual
communication that are immensely popular and have been
used on various occasions. The print is not used to educate
but to inform. The content on print generally informs about
the
schedule, service, and events.
Exampl
e of a
Poster
Tutorial Task (Groupwork)

 Select a travel destination in Malaysia and prepare a

brochure.
 Create the brochure for visual communication using
Brochure
Templates – Canva at
https://www.canva.com/templates/brochures/
OR any other software that is suitable.
 You may use the Canva's collection of professionally
designed templates and you can personalize with
uploaded
images, and icons from the media library.
 Present your brochure during the tutorial session and
discuss