ihj04982/design-theory

Design Theory & Principles

Foundational design theory covering grid systems, dynamic composition, color science, and concept-driven strategy.

---

1. Grid & Proportion

The grid is the visual grammar of the page — strategic support for composition, not decoration.

Mathematical Foundations

• Unit system: Use multiples of 12 for internal logic
• Margins: Generous top/sides; heavier bottom to "ground" the layout
• Typographic scale: Relate sizes proportionally (e.g. 48pt title, 24pt author, 12pt body)

Structural Components

| Component | Role | |-----------|------| | Margins | Container; prevent cramping | | Columns | Equal width; images spanning N columns relate mathematically to single-column text | | Gutters | 12–18pt standard. <12pt fails as separator; >18pt disconnects | | Hang lines | Horizontal anchors; without them, imagery and text "bounce" |

Symmetry vs Asymmetry

• Symmetry: Mirror system. Comforting, classical. Avoid blandness with dramatic scale.
• Asymmetry: "Seesaw" balance. Placement indicates importance. Negative space is a positive element.

Proportional Models

• Square system: Vary scale — one dominant image + "film strip" secondaries
• Rule of thirds: Off-center subjects create tension and full-composition scanning
• Golden ratio (1:1.618): Type sizes in divisions of eight (8, 16, 24pt)

Responsive

Grid stretches/contracts; proportional relationships and hierarchy stay constant across devices.

---

2. Dynamic Composition

Composition bridges idea and message. A successful layout must: attract attention, deliver a clear message, and communicate story/tone.

Lines & Shapes

| Element | Impact | |---------|--------| | Thicker lines | Importance, attention, texture, boundary | | Rounded shapes | Softness, calm, stability | | Sharp/angular shapes | Assertiveness, agility, energy | | Repeated shapes | Recognizable language, familiarity |

Spatial Intelligence

• Less is more: Filling every inch creates a "screaming" effect; negative space amplifies content
• Extreme scale: Push boldly (+200% or "almost doesn't fit"). Contrast creates hierarchy.
• Refining clutter: Audit for essentiality → consolidate focal points → shrink non-essential text

Tension & Contrast

• Off-center: Center is static; edge placement activates the page
• Proximity/gravity: Move elements until they almost touch or overlap
• Contrast pairings: Big vs small, dark vs light, vibrant vs dull, complex vs simple

Repetition

• Functional: Consistent headlines, page numbers, column widths
• Aesthetic: Shared shapes/icons across a series
• Conceptual: Repeated phrase as "Voice of the Crowd" — repetition with meaning

---

3. Color Science

Color is a strategic tool for functional requirements and brand personality.

Core Attributes

• Hue: Position on spectrum — differentiates concepts
• Saturation: Intensity vs gray. Full saturation = maximum chromatic impact
• Value: Lightness/darkness via tints (add white) and shades (add black)

Irradiation & Perceived Geometry

• Light on dark: Lighter colors appear larger and "come forward"
• Dark on light: Darker colors read larger in context
• Luminosity-based depth: High-luminosity (yellow) stands out on dark cool (blue) but recedes against similar values

Tonal Hierarchy: "Shout and Whisper"

• High-value contrast: Bold, energetic, legible — CTAs and primary branding
• Low-value contrast: "Glow" or "vibration" — sparingly, for texture not readability

Color Combinations

| Type | Character | Use | |------|-----------|-----| | Complementary | Max dynamism, contrast | Bold, balanced presence | | Analogous | Cohesion, harmony | Soothing, unified layouts | | Triadic | Diversity + consistency | Varieties within one family | | Monochromatic | Depth, contemporary | Restricted palettes |

Palette Development Protocol

1. Intuitive selection: Start from brand essence and required feeling
2. Isolation testing: Place colors in equal squares; judge equilibrium without type
3. Iteration: Shift one step (saturation/value) if too loud or soft
4. Categorization: Core palette (primary drivers) vs supporting palette (accents)

Environmental Variability

• Same hue shifts under different lighting
• Color can recede or advance depending on adjacency
• Cultural connotations vary by audience

---

4. Concept-Driven Strategy

The concept is the "soul" and "roadmap" — the North Star that prevents creative drift.

Concept as Filter

Every creative decision must pass through the central idea. Root the "why" in a story, feeling, or "big idea"; then define the audience.

Strategic Audience Intelligence

• Demographics + Psychographics: Age, occupation, culture drive tone, hierarchy, cognitive load
• Empathy tools: Keywords → moodboard (textures, type, palette) → emotional connection

Architecture of Inclusion

• Inclusive = strategic: broadens reach and supports positive action
• Audit for implicit messages that may marginalize
• Diverse imagery; legible fonts; high color contrast

Context & Risk

• Digital vs physical, fine-dining vs casual — different risk profiles
• Calculated risks (unexpected animation, non-traditional color) can differentiate
• Cultural semantics: red = vitality in some contexts, danger in others

Tactical Implementation

Translate the central concept into a visual and tactical roadmap:

• Eco materials, minimal style, organic textures for sustainability brands
• Abstract, unique environments over cliché iconography for niche products
• Connect the people behind the brand to those who value its mission