Design Principles Cheat Sheet

Balance

Symmetrical Balance

• Creates formal, traditional, stable feeling
• Elements are mirrored across a central axis
• Provides sense of order and reliability
• Works well for formal, institutional, or traditional designs
• Can feel static or predictable if overused

Asymmetrical Balance

• Creates dynamic, modern feeling
• Different elements create equal visual weight
• Provides energy and movement
• More complex to achieve effectively
• Allows for more creative arrangements

Radial Balance

• Elements arranged around a central point
• Creates focus and draws eye to center
• Suggests movement, radiation, or growth
• Common in nature (flowers, snowflakes)
• Effective for circular designs or focal emphasis

Contrast

Size Contrast

• Establishes hierarchy and importance
• Larger elements draw attention first
• Creates depth perception (larger = closer)
• Helps organize information logically
• Creates visual interest through scale relationships

Color Contrast

• Complementary colors create strongest contrast
• Light/dark contrast improves readability
• Can direct attention to specific elements
• Creates energy and visual excitement
• Essential for accessibility and legibility

Textural Contrast

• Adds tactile interest and depth
• Smooth vs. rough creates visual tension
• Provides sensory richness to designs
• Helps distinguish between elements
• Creates visual hierarchy without changing size

Rhythm and Movement

Repetition

• Repeating elements creates visual rhythm
• Builds recognition and consistency
• Creates predictable patterns that feel satisfying
• Helps unify different parts of a design
• Can be exact or varied repetition

Progression

• Gradual changes in size, color, or position
• Creates sense of movement or development
• Guides the eye through the composition
• Suggests growth, evolution, or narrative
• Examples: gradients, size progressions, perspective

Directional Elements

• Lines, shapes, or forms that suggest direction
• Can create pathways for the eye to follow
• Faces, pointing elements, or arrows create strong direction
• Diagonal elements create more energy than horizontal/vertical
• Can lead viewer through information in specific sequence

Unity and Harmony

Proximity

• Related elements placed close together
• Creates visual groupings and relationships
• Helps organize information logically
• Reduces visual clutter
• Fundamental principle of gestalt psychology

Consistency

• Similar treatment for similar elements
• Creates cohesive, professional appearance
• Builds recognition and understanding
• Reduces cognitive load for viewers
• Applies to color, typography, spacing, etc.

Alignment

• Elements lined up along common edges or centers
• Creates order and relationship between elements
• Reduces scattered or random appearance
• Creates invisible lines that organize composition
• Can be edge alignment or center alignment

Emphasis and Hierarchy

Focal Points

• Elements designed to attract attention first
• Created through contrast, isolation, or positioning
• Each composition should have clear primary focus
• Secondary focal points guide viewer after primary
• Too many competing focal points create confusion

Visual Hierarchy

• Arrangement of elements by importance
• Guides viewer through information in intended order
• Created through size, color, position, and contrast
• Essential for effective communication
• Should align with functional priorities

White Space

• Empty space around or between elements
• Creates breathing room and emphasis
• Improves readability and comprehension
• Sign of design confidence and clarity
• Often undervalued but critically important

Color Application

Color Schemes

• Monochromatic: Single hue with variations in saturation/value
• Analogous: Colors adjacent on color wheel
• Complementary: Colors opposite on color wheel
• Split Complementary: One color plus two adjacent to its complement
• Triadic: Three colors equally spaced on color wheel

Color Psychology

• Red: Energy, passion, attention, urgency
• Blue: Trust, calm, stability, professionalism
• Yellow: Optimism, clarity, warmth, caution
• Green: Growth, nature, freshness, wealth
• Purple: Creativity, luxury, mystery, spirituality
• Orange: Enthusiasm, creativity, determination
• Black: Sophistication, power, elegance, formality
• White: Purity, cleanliness, simplicity, space

60-30-10 Rule

• 60% dominant color (background, large areas)
• 30% secondary color (supporting elements)
• 10% accent color (highlights, calls to action)
• Creates balanced, cohesive color distribution
• Prevents overwhelming or chaotic color use

Typography Fundamentals

Type Classifications

• Serif: Has small lines at ends of characters (traditional, formal)
• Sans Serif: No small lines at character ends (modern, clean)
• Script: Resembles handwriting or calligraphy (elegant, personal)
• Display: Decorative, distinctive (attention-grabbing, unique)
• Monospace: Each character occupies same width (technical, precise)

Typography Hierarchy

• Primary: Largest, most attention-grabbing (headlines)
• Secondary: Medium emphasis (subheadings)
• Tertiary: Body text and supporting information
• Create clear distinction between levels
• Maintain consistent treatment at each level

Typography Tips

• Limit to 2-3 typefaces per design
• Ensure sufficient contrast between text and background
• Use 45-75 characters per line for optimal readability
• Set line spacing (leading) to 120-150% of font size
• Create contrast through weight, size, and style variations

Layout Fundamentals

Grid Systems

• Provides structure and organization
• Creates alignment and consistency
• Types: column grids, modular grids, hierarchical grids
• Allows for systematic placement of elements
• Can be strict or broken strategically for emphasis

Rule of Thirds

• Divide composition into 3×3 grid
• Place key elements at grid intersections
• Creates more dynamic compositions than centering
• Works for both images and overall layouts
• Based on natural eye movement patterns

Z-Pattern and F-Pattern

• Z-Pattern: Eye typically moves in Z shape in balanced layouts
• F-Pattern: Eye typically moves in F shape when scanning text
• Design with natural eye movement in mind
• Place important elements along these paths
• Especially important for information-heavy designs