MIL PPT 03

Revised: October 6, 2017

MEDIA AND INFORMATION

LITERACY (MIL)
Introduction to MIL
Design Elements and Principles
TEXT DESIGN PRINCIPLES
AND ELEMENTS
1.EMPHASIS
• importance or value given to a
part of the text-based content
1. EMPHASIS

• make the text bold

• Italicized
• have a heavier weight
• darkened or lightened
• enlarged
1. EMPHASIS

Source: https://tympanus.net/codrops/2011/10/08/25-examples-of-emphasis-applied-in-web-design/
1. EMPHASIS

Source: https://twitter.com/philredcross/status/706041623839244288
2. APPROPRIATENESS
• how fitting or suitable the text is
used for a specific audience,
purpose or event
2. APPRORIATENESS
2. APPRORIATENESS

Sources: http://bonfx.com/bad-typography/
2. APPRORIATENESS

Source: http://bonfx.com/bad-typography/
3. PROXIMITY
• how near or how far the text
elements from each other
• when two things are closely related,
bring them close together
3. PROXIMITY
4. ALIGNMENT
• how the text is positioned in the page
• left, center, right, or justified
4. ALIGNMENT

Source: http://www.printwand.com/blog/basic-alignment-principles-in-graphic-design-with-examples
5. ORGANIZATION
• conscious effort to organize the different
text elements in a page
• ensures that while some text elements
are separated from each other, they are
still somehow connected with the rest of
the elements in the page
5. ORGANIZATION

Source:
MIL TG by CHED
5. ORGANIZATION

Source:
https://doc
ontent.wor
dpress.co
m/2015/04
/08/want-
a-good-
design-
remember-
to-c-r-a-p-
contrast-
repetition-
alignment-
proximity/
6. REPETITION
•consistency of elements
•unity of the entire design
•repeating some typefaces
within the page
6. REPETITION

Source:
https://doc
ontent.wor
dpress.co
m/2015/04
/08/want-
a-good-
design-
remember-
to-c-r-a-p-
contrast-
repetition-
alignment-
proximity/
7. CONTRAST
•creates visual interest
•two elements are different
from each other
CONTRAST: TWO ELEMENTS ARE DIFFERENT

 white text on a dark background

 large font with a small font
 serif and sans serif
 thin elements with wide elements
 cool color and warm color
7. CONTRAST

Source:
https://doc
ontent.wor
dpress.co
m/2015/04
/08/want-
a-good-
design-
remember-
to-c-r-a-p-
contrast-
repetition-
alignment-
proximity/
VISUAL DESIGN ELEMENTS
AND PRINCIPLES
1.CONSISTENCY
• Consistency of margins, typeface,
typestyle, and colors is necessary,
especially in slide presentations or
documents that are more than one
page.
1. CONSISTENCY

Source: https://www.pinterest.com/pin/28077197647114171/
1. CONSISTENCY

Source: https://gofishdigital.com/guide-design-consistency/
1. CONSISTENCY

Source: http://www.loopassociates.com/projects/brand-consistency-leading-to-millions-in-cost-reduction/
2. CENTER OF INTEREST
• an area that first attracts attention in a
composition
• important objects or elements in a
composition
• can be achieved by contrast of values,
more colors, and placement
2. CENTER OF INTEREST

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
2. CENTER OF INTEREST

Source: https://iactivedesign.wordpress.com/tag/graphic-design/
3. BALANCE
• visual equality in shape, form, value,
color, etc.
• can be symmetrical and evenly
balanced, or asymmetrical and
unevenly balanced
3. BALANCE

Source: http://operationwritehome.org/all-things-being-equal-balance-in-design/
3. BALANCE

Source:
http://en.koreaportal.com
/articles/7525/20160102/
one-punch-man-
anime.htm
3. BALANCE

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
4. HARMONY
• brings together a composition with
similar units
• notice how similar harmony is to
unity (some sources list both terms)
4. HARMONY

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
4. HARMONY

Source: https://www.johnlovett.com/design-overview
5. CONTRAST
• offers some change in value creating a visual
discord in a composition
• shows the difference between shapes and
can be used as a background to bring
objects out and forward in a design
• can also be used to create an area of
emphasis
5. CONTRAST

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
5. CONTRAST

Source:
https://www.design
contest.com/blog/c
ontrast-in-design/
6. DIRECTIONAL MOVEMENT
• a visual flow through the composition
• can be the suggestion of motion in a
design as you move from object to
object by way of placement and
position
6. DIRECTIONAL MOVEMENT

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
6. DIRECTIONAL MOVEMENT

Source: https://webdesign.tutsplus.com/articles/visual-direction-in-web-design--webdesign-2545
6. DIRECTIONAL MOVEMENT

Source: https://webdesign.tutsplus.com/articles/visual-direction-in-web-design--webdesign-2545
7. RHYTHM
• a movement in which some
elements recur regularly
• like a dance, it will have a flow of
objects that will seem to be like the
beat of music
7. RHYTHM

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
7. RHYTHM

Source: https://www.hatchdesign.ca/principles-of-design-part-2-rhythm/
8. PERSPECTIVE
• created through the arrangement of
objects in two dimensional space to
look like they appear in real life
• learned meaning of the relationship
between different objects seen in
space
8. PERSPECTIVE

Source: https://www.youtube.com/watch?v=phWtQ2odZh0
8. PERSPECTIVE

Source: http://www.studentartguide.com/articles/one-point-perspective-drawing
8. PERSPECTIVE

Source: https://tomadondesign.wordpress.com/two-point-perspective-drawing/
8. PERSPECTIVE

Source: https://piaart.wordpress.com/two-point-perspective/
8. PERSPECTIVE

Source: https://en.wikipedia.org/wiki/Taj_Mahal
8. PERSPECTIVE

Photo Credit: Christian Dascalu

Source: https://www.cyprus-photo.com/2015/02/model-photo-shoot-at-saint-raphael-beach/g
9. DOMINANCE
• gives interest, counteracting
confusion and monotony
• can be applied to one or more of
the elements to give emphasis
9. DOMINANCE

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
 FORMATIVE ASSESSMENT

DISCUSS TEXT AND VISUAL

DESIGN ELEMENTS AND
PRINCIPLES APPLIED IN THE
FOLLOWING MEDIA:
Source:
https://cscro6.wordpr
ess.com/arta-
corner/#jp-carousel-
2112
Source:
https://cscro6.wordpr
ess.com/arta-
corner/#jp-carousel-
2108
Source: http://opinion.inquirer.net/106642/editorial-cartoon-august-26-2017
Source:
http://news.abs-
cbn.com/focus/multimedia/infographic/09/04/17/what-is-
japanese-encephalitis
Source:
http://cnnphilippines.
com/news/2017/02/01/
HIV-cases-increase-
2016-DOH.html
Source: https://www.tes.com/lessons/tmup-FOeYTHX1A/two-point-perspective-drawing
Source: http://www.pinoyexchange.com/forums/showthread.php?t=313065&page=7
Photo Credit: HUF MAGAZINE
Source:
https://www.pinterest.co.uk/pin/32
3625923206850410/
Source:
http://mymovieworl
d-
coolman0304.blogs
pot.com/2017/07/bi
rdshot-trailer-and-
poster-pista-
ng.html
Source: http://ar.melinterest.com/?r=site/search&category=MLA114368/
Source: http://www.thephotoargus.com/35-superb-examples-of-still-life-photography/
Source: http://www.marklobo.com.au/news/category/melbourne-photographers/food-photography-
melbourne-photographers/
Source:
https://downmagaz.com/
business_magazine_eco
nomics/47156-
entrepreneur-
philippines-february-
2015.html
Source:
http://www.inquirer.net/page-
one-single
Source: https://cinemabravo.com/2017/05/11/sigrid-andrea-bernardos-kita-kita-to-have-ph-premiere-at-up-
cine-adarna-on-may-12/
Source: https://www.facebook.com/
Source: http://www.deped.gov.ph/
Source:
https://www.rappler.com/
technology/social-
media/180340-zarks-
burger-8-pesos-rush
Source: https://www.demandgenreport.com/industry-topics/rich-
media/2906-the-power-of-visual-content-infographic