Chapter 4
• Color theory
• Typography
• Layout & composition
Color theory
Color theory
Science and art of using colours
Explains….
• How people perceive colour
• The visual effects of mixing, matching &
contrasting colors
• The messages colour communicate
Color theory
& Colour Wheel
Hue
Luminance
Saturation
Color theory
& Colour Wheel
Warm colors
• Energy, brightness, action, happiness
Red
Excitement, passion, movement, anger
Orange
Fun, enthusiasm, change, different,
creativity, warmth, apetite
Yellow
Happiness, optimism, youth, friendliness,
cheerful
Warm vs Cold colors
Cold colors
• Peace, calm, serenity etc.
Green
Growth, nature, wealth, harmony,
new beginnings
Blue
Dependability, wisdom, loyalty,
productivity, maturity
Purple
Luxury, imagination, sophistication,
cutting-edge
Warm vs Cold colors
Monochromatic
Three shades, tones & tints
of one basic colour
Subtle & conservative
colour combination
Harmonious & versatile
Colour schemes
Analogous
Side-by-side colours
Versatile & pleasing,
harmonious & found in nature
Choose one dominant colour,
others for support & accent
Colour schemes
Complementary
Opposite side colours
High contrast, vibrant and
impactful (appear brighter)
May appear jarring, bad for
text
Colour schemes
Triadic
Three evenly spaced colours
High contrast & vibrant, even
with unsaturated hues
One dominating colours, 2
accenting colours
Colour schemes
• There are many other styles and formulas, though they usually revolve
around even spacing
Colour Tips
Typography
• The art and technique of arranging type
• Includes:
• Design
• Arrangement
• Font size
• Spacing
• Line length etc.
• Typography is everywhere, & plays a part
in determining how a message is conveyed
/ highlighted.
Typography
Typeface
Serif
• Typefaces with little “feet” on their ends
• Looks more classical but are sometimes more
difficult to read (easier in long, printed works)
Sans Serif
• Fonts without “serif”
• Looks cleaner, more modern and easier to
read, even at lower resolutions
Type classifications
Tracking
• Spacing between all letters in an
entire word
Kerning
• Space between two individual
letters
Leading
• Distance between baselines
• “Single-space”, “double-space” etc.
Misc. Terms
Tracking
• Spacing between all letters in an
entire word
Kerning
• Space between two individual
letters
Leading
• Distance between baselines
• “Single-space”, “double-space” etc.
Misc. Terms
Creating a sense of order and
flow using different…
• Weights (bold, regular etc.)
• styles (italic)
• Size & color etc.
• Helps reader see most important
points & direct their gaze
Hierarchy
Hierarchy
• Pick simple fonts that suit your
theme & overall design
• Avoid cheesy fonts like Comic
Sans, Curlz, Brush Script,
and Papyrus UNLESS you know
what you’re doing
• Less is more. Stick to 1-3 fonts
per design & use weights or
styles for emphasis
Typography tips
Layout &
Composition
• Building blocks of all forms of design
• Encompasses the way your content is
arranged
• A well-composed layout can help attract &
maintain your audiences’ attention
• Layout elements
• Balance & tension
• Contrast & scale
• Proportions & grids
• Etc.
Layout & Composition
Proximity
Contrast
Negative space
Repetition /
Consistency
Alignment / Balance
Basics of Composition
• The use of visual space to show the
relationship between content
• Related items are grouped together to make
them easier to understand at a glance
• Unrelated items should be separated to
visually emphasize on their lack of relationship
Proximity
Spacing between boxes help create logical grouping through
proximity even without explicit mentions
• Differentiating one item from
another
• Helps catch reader’s attention,
create emphasis etc.
• Various ways of creating
contrast: Colour, text style, item
size etc.
Contrast
• Visual technique that helps the
reader to navigate your work
• Shows audience where to begin and go
next using different levels of emphasis
• Decide which element you want to be
noticed first, then make them STAND
OUT
Contrast through Hierarchy
• Arrange content in a consistent
manner
• Makes composition easier to
navigate without feeling
disorganized
• Use imaginary lines to help
evenly space & align your
items with equal-sized margins
Alignment/ Balance
Alignment
• Central placement best for
showing symmetry, or making
subjects more confrontational
• Draw attention to subjects that
stand on its own without
distractions / foreground
elements needed
• Create sense of size or space
Alignment / Balance
Asymmetrical Balance
• A powerful compositional
technique for making photos more
interesting & dynamic
• Divide the scene into 3 equal parts
– vertically & horizontally
• Position subject on / near the lines,
or better yet the intersections
• Keep negative space in direction
of subject’s view
Rule of thirds
• Serve as anchor / a natural
focal point for the design or
photo
• Creates a sense of balance &
interest without making the
image too static
• Encourages creative use of
negative spaces, & gives
breathing space for main
subject – convey a feeling of
motion
Rule of thirds – How to?
• Negative spaces (white
spaces) between content,
lines & outer margins.
• Help define & separate
different sections; & give
content room to breathe
• Direct people’s eyes to
important items / focal points
Negative space
In the image to the left, our eyes On the right, the content is the
keep jumping from one element same, but the white space makes
to another – high motor load it more soothing to the eyes, help
us breathe & not get
overwhelmed with info
Alignment Frame
• Every project should have a
consistent look & feel
• Reinforce your design by repeating Colour scheme
certain elements
• More visibly pleasing & easier to read
– as viewers know what to expect;
they can relax & focus on the
content. [ Negative space ]
Pattern
Repetition Typography
• It’s easy to overlook the
importance of composition
• Key ingredient is attention to
small details
• Mix and match to your liking!
All together!