Color Theory, Typography, Layout & Composition Notes

Color Theory

  • Color theory is the science and art of using colors.
  • It explains how people perceive color.
  • It covers the visual effects of mixing, matching, and contrasting colors.
  • It also deals with the messages colors communicate.

Colour Wheel

  • Hue: Pure color.
  • Tint: Adding white to a pure hue.
  • Shade: Adding black to a pure hue.
  • Tone: Adding grey to a pure hue.
  • Saturation: Intensity of a color.
  • Luminance: Brightness of a color.

Warm vs Cold Colors

  • Warm Colors

    • Associated with energy, brightness, action, and happiness.
    • Red: Excitement, passion, movement, and anger.
    • Orange: Fun, enthusiasm, change, creativity, warmth and appetite.
    • Yellow: Happiness, optimism, youth, friendliness, and cheerfulness.

  • Cold Colors

    • Associated with peace, calm, and serenity.
    • Green: Growth, nature, wealth, harmony, and new beginnings.
    • Blue: Dependability, wisdom, loyalty, productivity, and maturity.
    • Purple: Luxury, imagination, sophistication, and cutting-edge.

RGB vs CYMK

  • Additive Color Model (RGB)
    • Used in screens and projectors.
    • Example: Social media branding.
  • Subtractive Color Model (CYMK)
    • Used in printers.
    • Example: Brochures and flyers.

Colour Schemes

  • Monochromatic: Three shades, tones, and tints of one basic color.
    • Subtle and conservative color combination.
    • Harmonious and versatile.
  • Analogous: Side-by-side colors.
    • Versatile, pleasing, harmonious and found in nature.
    • Choose one dominant color, others for support and accent.
  • Complementary: Opposite side colors.
    • High contrast, vibrant, and impactful (appear brighter).
    • May appear jarring, bad for text.
  • Triadic: Three evenly spaced colors.
    • High contrast and vibrant, even with unsaturated hues.
    • One dominating color, two accenting colors.
  • There are many other styles and formulas, though they usually revolve around even spacing

Typography

  • The art and technique of arranging type.
  • Includes design, arrangement, font size, spacing, line length, etc.
  • Typography is everywhere and plays a part in determining how a message is conveyed or highlighted.

Anatomy of a Typeface

  • Cap Height: Height of capital letters.
  • X-height: Height of lowercase letters.
  • Ascender: Part of a letter that extends above the x-height.
  • Descender: Part of a letter that extends below the baseline.
  • Baseline: The line on which most letters sit.
  • Serif: Small decorative stroke at the end of a letter's main strokes.
  • Stem: Main, vertical stroke of a letter.
  • Stroke: The thickness of a line in a letter form.
  • Aperture: The partially enclosed, somewhat rounded negative space in some lowercase letters
  • Letter-spacing: The visual space between letters.
  • Leading: The vertical distance between lines of text.

Type Classifications

  • 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.

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.

Hierarchy

  • 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.

Typography tips

  • 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.

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.

Basics of Composition

  • Proximity
  • Negative space
  • Alignment / Balance
  • Contrast
  • Repetition / Consistency

Proximity

  • 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.

Contrast

  • 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 through Hierarchy

  • 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.

Alignment/ Balance

  • 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.
  • 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.

Rule of Thirds

  • 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.
  • 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.

Negative Space

  • 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.

Repetition

  • Every project should have a consistent look & feel.
  • Reinforce your design by repeating certain elements.
  • More visibly pleasing & easier to read – as viewers know what to expect; they can relax & focus on the content.
  • Alignment, Colour scheme, Pattern, Typography, Frame, Negative space.

All together!

  • It’s easy to overlook the importance of composition.
  • Key ingredient is attention to small details.
  • Mix and match to your liking!