Professional Documents
Culture Documents
•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
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
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
Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
FORMATIVE ASSESSMENT
OBJECTIVES
Create a digital poster which will
be a campaign for high school
students to be a responsible user
and competent producer of media
information
COOPERATIVE LEARNING
Group of 3 students
PERFORMANCE TASK- DIGITAL POSTER MAKING
MESSAGE
Be a responsible user and competent producer of
media information.
MEDIUM
Digital poster which will be shared on Facebook.
AUDIENCE
High School Students (JHS and SHS)
PERFORMANCE TASK NO. 2 - DIGITAL POSTER
MAKING
MATERIALS / TOOLS
Web tool : Canva (www.canva.com)
Photo editing software or applications
Computer
Smartphone Camera
Photo Credit :
https://www.canva.com/
http://www.digitalrabbitcellular.com/
PLEASE KEEP IN MIND.
10 8 5 2
RUBRIC
10 8 5 2
RUBRIC
10 8 5 2
RUBRIC
DIGITAL POSTERS
Image Credit:
http://www.technology
rocksseriously.com/20
14/10/before-you-
post-
think.html#.WSPui6ka
aGI
Image Credit:
http://www.cl
assroomcape
rs.co.uk/onlin
e-safety-
school-
poster.html
Photo Credit:
http://www.hcpss.org/news-posts/2016/04/boe-reviews-policy-on-responsible-use-of-
technology-and-social-media/
Photo Credit:
https://store.accutrain.
com/products/sfs002-
pos-eng-1000
References