| name | Design |
| description | A comprehensive design operating system synthesized from 10 canonical design books. Covers research, typography, color theory, composition, branding, logo design, storytelling, web design, creative process, and professional practice. |
Design Skill — Master Curriculum
Synthesized from: How to Think Like a Great Graphic Designer (Millman), Graphic Design School (Dabner/Calvert/Casey), Designing Brand Identity (Wheeler/Meyerson), Principles of Logo Design (Bokhua), Design Is Storytelling (Lupton), Steal Like an Artist (Kleon), Web Design in a Nutshell (O'Reilly), Palette Perfect (Wager), The Designer's Dictionary of Color (Adams), Thinking with Type (Lupton).
Table of Contents
- Design Thinking & Philosophy
- Research & Discovery
- Typography
- Color Theory & Application
- Composition & Layout
- Branding & Identity Systems
- Logo Design
- Storytelling & Narrative Design
- Web & Digital Design
- Image & Photography
- Print Production
- Packaging Design
- Wayfinding & Environmental Design
- Motion & Interaction Design
- UX & Human-Centered Design
- Creative Process & Ideation
- Professional Practice
- Design History & Movements
- Design Ethics & Responsibility
- Toolkit & Checklists
1. Design Thinking & Philosophy
1.1 What Design Actually Is
Design is not decoration. It is the deliberate act of giving form to communication so that it functions, resonates, and endures.
- Problem-solving + meaning-making. Michael Bierut frames design as closer to solving crossword puzzles than to pure art — it requires "imagination and knowledge" applied to specific constraints. But Ellen Lupton argues that problem-solving alone is insufficient: design must also address "beauty, feeling, and sensation."
- Connectivity over raw creativity. Bierut: "I don't think design involves that much creativity… I think of it more as an exercise in connectivity." Great designers repurpose, recombine, and recontextualize existing forms rather than inventing from nothing.
- Performativity. Design "endows inert material with a capacity to incite action" (Bruce Mau, cited in Lupton). A calendar is not a list of dates — it's a tool for mapping time. A photo album is not storage — it's a way to edit personal history.
- Transfer of energy. Design transfers not just information but emotion and personality from maker to user. Steven Pinker's notion of writing as moving ideas "from the head of a writer to the head of a reader" applies equally to visual design.
1.2 The Designer's Mindset
From Millman's 21 interviews with legendary designers, a composite portrait emerges:
| Trait | Source | Key Insight |
|---|
| Obsessive curiosity | Bierut, Glaser, Scher | "The only thing that stays behind is the work." Record everything in notebooks. |
| Empathy | Lupton, Wheeler | You must feel what the user feels. Design without empathy is decoration. |
| Intellectual rigor | Bierut, Vignelli | Being "smart and well-read" compensates for any gap in raw talent. |
| Resilience | Goldberg, Sahre | "I'm a big believer in the bungee jump." Take risks, recover, evolve. |
| Authenticity | Glaser, Goldberg | Reject "schtick." Stand up for what you believe is right, even at the cost of a job. |
| Volume | Bierut | "I seem to hit a lot of home runs because I have ten times as many at-bats." |
1.3 Core Axioms
- Content drives form. Never start with aesthetics; start with what needs to be communicated.
- Constraints are fuel. Budget, deadline, format, audience — these are not obstacles but the raw material of creative solutions.
- Design is temporal. Every artifact — poster, building, app — unfolds over time. Eyes wander, bodies move, attention ebbs and flows.
- Simplicity is the ultimate sophistication. Reduce until removing anything further would break the design.
- The work must outlast the trend. Longevity over novelty (Wheeler, Bokhua, Vignelli).
2. Research & Discovery
2.1 Why Research Is Non-Negotiable
"Research is the platform from which the designer generates ideas." — Graphic Design School
Design without research is guessing. Every significant project begins with structured inquiry.
2.2 Primary Research (Generating New Data)
Methods for gathering material that does not preexist:
| Method | Description | When to Use |
|---|
| Observation | Photograph, sketch, record environments and behaviors in the field. | Understanding physical contexts, user behavior. |
| Interviewing | Structured conversations with stakeholders, users, subject matter experts. | Brand strategy, UX research, editorial projects. |
| Prototyping | Build rough physical or digital models to test assumptions. | Product design, packaging, digital interfaces. |
| Ethnography | Immerse yourself in the user's environment. Watch, listen, participate. | Service design, cultural projects. |
| Surveys | Quantitative data from large groups. | Market research, brand perception audits. |
2.3 Secondary Research (Analyzing Existing Data)
Methods for gathering material that already exists:
- Archival study: Historical images, typefaces, design movements, period artifacts.
- Competitive audit: Analyze competitors' visual language, positioning, touchpoints (Wheeler).
- Marketing audit: Collect and assess all existing brand collateral — "everything from business cards to websites" (Wheeler).
- Verbal audit: Examine existing messaging, taglines, tone of voice across all channels.
- Literature review: Books, journals, case studies, trend reports.
- Material sampling: Collect color swatches, paper stocks, fabric samples, textures.
2.4 The Inspiration Archive
Every great designer maintains a personal library of references:
- Bierut's 79 notebooks: Unlined, carried two at a time, containing the "genesis of every single thing I've ever worked on."
- Kleon's "swipe file": A systematically curated collection of work you admire — images, quotes, clippings.
- Dabner's "catalog of inspiration": Sketchbooks, recording devices, ongoing documentation of the visual environment.
Action items:
- Carry a sketchbook or use a dedicated note app daily.
- Build a tagged digital library (Pinterest, Are.na, Raindrop, or local folders).
- Revisit your archive regularly — old references spark new connections.
2.5 Defining the Problem
Before designing anything, articulate the problem in a single sentence. Wheeler's framework:
- What is the current state? (Where are we now?)
- What is the desired state? (Where do we want to be?)
- What is the gap? (What's preventing us from getting there?)
- What are the constraints? (Budget, timeline, technical limitations, brand guidelines.)
- Who are the stakeholders? (Client, users, internal teams, regulators.)
2.6 Research Mindset
- Linear reasoning follows logical, sequential steps. Good for structured problems.
- Lateral thinking (Edward de Bono) makes unexpected connections. Good for creative breakthroughs.
- Both are necessary. Research is not purely analytical — it requires intuition, pattern recognition, and the willingness to follow tangents.
3. Typography
3.1 Type Anatomy
Every designer must know the parts of a letterform:
| Term | Definition |
|---|
| Baseline | The invisible line on which letters sit. |
| X-height | The height of lowercase letters (measured by 'x'). |
| Cap height | The height of uppercase letters. |
| Ascender | The part of a lowercase letter that rises above the x-height (b, d, h, k, l). |
| Descender | The part that drops below the baseline (g, j, p, q, y). |
| Serif | Small strokes at the ends of main strokes. |
| Sans serif | Letterforms without serifs. |
| Stroke | The main structural line of a letter. |
| Counter | The enclosed or partially enclosed space within a letter (o, e, a). |
| Bowl | The curved stroke enclosing a counter. |
| Terminal | The end of a stroke that lacks a serif. |
| Aperture | The opening of a partially enclosed counter (c, e, s). |
| Shoulder | The curved stroke in h, m, n. |
| Spine | The main curved stroke of the letter S. |
| Ear | The small stroke projecting from the top of a lowercase g. |
| Ligature | Two or more letters joined into a single glyph (fi, fl, ff). |
| Swash | A decorative extension of a stroke, common in italic or script faces. |
3.2 Type Classification
| Class | Characteristics | Examples | Best Use |
|---|
| Oldstyle (Humanist) | Diagonal stress, moderate contrast, bracketed serifs | Garamond, Jenson, Palatino | Long-form body text, books |
| Transitional | Vertical stress, higher contrast, thinner serifs | Baskerville, Times, Georgia | Versatile — editorial, identity |
| Modern (Didone) | Extreme contrast, hairline serifs, vertical stress | Bodoni, Didot | Fashion, luxury branding, headlines |
| Slab Serif (Egyptian) | Thick, block-like serifs, low contrast | Rockwell, Clarendon, Memphis | Posters, headings, display |
| Sans Serif — Grotesque | Early sans serifs, slight irregularities | Akzidenz-Grotesk, Franklin Gothic | Industrial, editorial |
| Sans Serif — Neo-Grotesque | Uniform strokes, neutral, "invisible" | Helvetica, Univers, Arial | Corporate, signage, UI |
| Sans Serif — Geometric | Based on geometric shapes (circles, rectangles) | Futura, Avant Garde, Century Gothic | Modern branding, tech, posters |
| Sans Serif — Humanist | Calligraphic influence, varying stroke widths | Gill Sans, Frutiger, Myriad | Warm, readable body text |
| Script | Connected or semi-connected, mimics handwriting | Zapfino, Snell Roundhand, Brush Script | Invitations, luxury, accents |
| Display/Decorative | Highly stylized, designed for large sizes only | Cooper Black, Impact, Playfair Display | Headlines, posters, logos |
| Monospaced | Every character occupies the same horizontal space | Courier, SF Mono, JetBrains Mono | Code, typewriter aesthetics |
3.3 Typographic Hierarchy
Hierarchy is how you guide the reader's eye through content. It establishes order of importance.
The hierarchy stack (most to least prominent):
- Display/Title — Largest, boldest. Sets the tone.
- Subtitle/Deck — Supports the title, provides context.
- Section heading — Organizes content into scannable chunks.
- Subheading — Further subdivides sections.
- Body text — The main content. Must be supremely readable.
- Caption/Footnote — Smallest. Supplementary information.
Tools for creating hierarchy:
- Size: The most obvious differentiator.
- Weight: Bold vs. regular vs. light.
- Style: Roman vs. italic vs. small caps.
- Color/Value: Dark vs. light, chromatic accents.
- Case: ALL CAPS vs. Title Case vs. lowercase.
- Typeface contrast: Pair a serif with a sans serif (never two similar fonts).
- Spacing: Generous whitespace around a heading elevates its importance.
- Position: Top-left has the most visual weight in left-to-right reading cultures.
3.4 Setting Type
Measure (line length): The ideal line length for body text is 45–75 characters per line. Too wide causes the eye to lose its place; too narrow creates excessive hyphenation.
Leading (line spacing): Set leading at 120–145% of the type size. Larger x-heights need more leading. Display type can be set tighter (even negative leading for dramatic effect).
Tracking (letter spacing): Small type benefits from slightly increased tracking. ALL CAPS text almost always needs increased tracking. Never track lowercase body text.
Kerning: The adjustment of space between specific letter pairs (AV, To, We). Professional fonts include built-in kern tables, but manual adjustment is often needed at display sizes.
Alignment options:
- Flush left (ragged right): Most natural for reading. Default choice.
- Flush right (ragged left): Useful for captions, labels, right-column elements.
- Centered: Formal, symmetrical. Good for invitations, titles, short text. Poor for body copy.
- Justified: Both edges aligned. Requires careful hyphenation and word spacing. Avoid in narrow columns.
3.5 Pairing Typefaces
The rule of two: Use one serif and one sans serif. Rarely exceed two families.
Pairing strategies:
- Concordant: Same family (e.g., Freight Sans + Freight Text). Safe, harmonious.
- Contrasting: Different families with clear visual distinction (e.g., Futura + Garamond). Dynamic, engaging.
- Conflicting (avoid): Two similar but not-identical fonts that compete (e.g., Caslon + Garamond). Creates visual tension without purpose.
What to match: x-height, overall proportions, historical era, mood.
What to contrast: Serif vs. sans, weight, texture, formality.
3.6 Type as Image
Typography is not just for reading — it can be the design itself:
- Typographic posters: Type becomes the visual, no imagery needed.
- Expressive lettering: Custom letterforms that convey mood (Lupton, Scher).
- Word-as-image: The letterforms visually enact the word's meaning.
- Concrete poetry: Text arranged to create visual shapes.
4. Color Theory & Application
4.1 Color Fundamentals
The three properties of color:
| Property | Definition | Example |
|---|
| Hue | The name of the color (red, blue, green). Its position on the color wheel. | "Blue" |
| Saturation (Chroma) | The intensity or purity of a color. | Vivid red vs. muted red |
| Value (Lightness) | How light or dark a color is. | Navy (low value blue) vs. sky blue (high value blue) |
4.2 Color Models
| Model | Use | Basis |
|---|
| RGB (Red, Green, Blue) | Screens, digital. Additive — light combines to create white. | Light emission |
| CMYK (Cyan, Magenta, Yellow, Key/Black) | Print. Subtractive — inks absorb light. | Ink absorption |
| HSL/HSB | Design tools. Intuitive control of hue, saturation, lightness/brightness. | Perceptual |
| Pantone (PMS) | Spot color printing. Precise, standardized color communication. | Physical ink mixing |
| HEX | Web. Six-digit representation of RGB values. | Digital shorthand |
4.3 Color Harmony Systems
From Palette Perfect (Wager) and The Designer's Dictionary of Color (Adams):
| Harmony | Description | Mood |
|---|
| Monochromatic | Single hue with variations in value and saturation. | Elegant, cohesive, understated. |
| Analogous | 2–4 hues adjacent on the color wheel. | Harmonious, natural, serene. |
| Complementary | Two hues directly opposite each other. | High contrast, vibrant, energetic. |
| Split-complementary | One hue + the two hues adjacent to its complement. | Vibrant but less jarring than complementary. |
| Triadic | Three hues equally spaced on the color wheel. | Balanced, playful, dynamic. |
| Tetradic (Double-complementary) | Two pairs of complements. | Rich, complex. Requires careful balance. |
| Achromatic | Black, white, grays only. | Sophisticated, formal, authoritative. |
4.4 Color Psychology & Cultural Meaning
From The Designer's Dictionary of Color (Adams):
| Color | Western Associations | Cultural Variations | Design Applications |
|---|
| Red | Passion, urgency, danger, appetite | China: luck/prosperity; South Africa: mourning | CTAs, food brands, sale promotions |
| Blue | Trust, calm, intelligence, corporate | Middle East: protection; India: Krishna/divinity | Banking, tech, healthcare, social media |
| Yellow | Optimism, warmth, caution, energy | Japan: courage; Egypt: mourning | Children's brands, warnings, accents |
| Green | Nature, growth, health, money | Islam: paradise; Ireland: national identity | Eco brands, finance, organic products |
| Orange | Enthusiasm, creativity, affordability | Netherlands: national color; Buddhism: illumination | Retail, entertainment, youth brands |
| Purple | Royalty, luxury, mystery, spirituality | Japan: privilege/wealth; Brazil: mourning | Premium brands, beauty, creative industries |
| Black | Elegance, power, sophistication, death | Many cultures: mourning; fashion: timelessness | Luxury, fashion, editorial |
| White | Purity, cleanliness, minimalism | East Asia: mourning/death; Western: weddings | Healthcare, tech, modernist design |
| Pink | Romance, femininity, playfulness | Korea: trust; Japan: spring/cherry blossoms | Beauty, fashion, confectionery |
4.5 Building a Color Palette
Step-by-step process (synthesized from Wager, Adams, Wheeler):
- Start with brand/project meaning. What emotions and values must be conveyed?
- Choose a dominant hue. This carries the primary emotional weight.
- Select a harmony type (analogous for calm, complementary for energy).
- Establish value range. Include lights (tints), mids, and darks (shades).
- Add neutrals. Warm gray, cool gray, off-white, off-black.
- Define a system. Primary, secondary, accent, background, text, success/warning/error.
- Test in context. Colors behave differently on screen vs. print, large vs. small areas, light vs. dark backgrounds.
- Check accessibility. WCAG requires minimum 4.5:1 contrast ratio for normal text, 3:1 for large text.
4.6 Color in Practice
- 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent.
- Color temperature: Warm colors (red/orange/yellow) advance; cool colors (blue/green/violet) recede.
- Simultaneous contrast: Colors appear differently depending on adjacent colors (Albers' interaction of color).
- Vibration: Avoid placing saturated complementary colors directly adjacent — they create optical vibration and are difficult to read.
- Consistent palette across touchpoints: Wheeler emphasizes that brand color must be identical across print, digital, signage, and packaging.
5. Composition & Layout
5.1 Principles of Visual Organization
| Principle | Definition | Application |
|---|
| Proximity | Group related items together. Distance implies separation. | Form groups, create sections, separate unrelated content. |
| Alignment | Every element should be visually connected to another. Nothing placed arbitrarily. | Use grids. Align edges, centers, or baselines. |
| Repetition | Repeat visual elements (color, shape, font, weight) for consistency. | Style sheets, design systems, brand guidelines. |
| Contrast | Make different things look different. If two elements are not the same, make them very different. | Size, color, weight, spacing, typeface. |
| Balance | Distribute visual weight across the composition. | Symmetrical (formal) vs. asymmetrical (dynamic). |
| White space | Empty space is an active design element, not dead space. | Gives content room to breathe. Implies luxury and confidence. |
5.2 The Grid System
Grids provide invisible structure that creates order, consistency, and rhythm.
Types of grids:
- Manuscript (single-column): Simplest. Used for books and long-form reading.
- Column grid: Divides the page into vertical columns (2, 3, 4, 6, 12). The foundation of responsive design.
- Modular grid: Columns + horizontal rows create a matrix of modules. Used for complex publications, dashboards.
- Hierarchical grid: No uniform intervals. Zones are placed organically based on content needs. Used for web layouts, editorial.
- Baseline grid: Horizontal lines at the leading increment. Aligns all text across columns for visual harmony.
Working with grids:
- Define margins (outer boundaries), columns, gutters (space between columns), and modules.
- Break the grid intentionally. A grid exists to be respected and occasionally, deliberately violated for emphasis.
5.3 Visual Hierarchy in Composition
Order the viewer's experience:
- Entry point: The first thing the eye hits. Usually the largest or most contrasting element.
- Primary information: Headline, key visual.
- Secondary information: Body text, supporting imagery.
- Tertiary information: Details, footnotes, credits.
Gestalt principles (from Lupton, Dabner):
- Figure/Ground: We perceive objects (figure) against a background (ground).
- Closure: The mind fills in gaps to complete incomplete shapes.
- Continuity: The eye follows smooth paths and lines.
- Similarity: Elements that look similar are perceived as grouped.
- Common fate: Elements moving in the same direction are perceived as related.
5.4 The Golden Ratio & Proportional Systems
- Golden ratio (≈ 1:1.618): Found in nature and classical art. Used by Bokhua in logo construction grids.
- Rule of thirds: Divide the frame into a 3×3 grid. Place focal points at intersections.
- Fibonacci sequence (1, 1, 2, 3, 5, 8, 13…): Each number is the sum of the two preceding. Creates naturally pleasing proportions for spacing, sizing, and layout.
6. Branding & Identity Systems
6.1 Brand vs. Branding vs. Brand Identity
From Wheeler/Meyerson's precise taxonomy:
| Term | Definition |
|---|
| Brand | A person's gut feeling about a product, service, or organization. It lives in the minds of stakeholders, not on paper. |
| Branding | The disciplined process of building awareness and extending customer loyalty. It's what you do. |
| Brand identity | The tangible expression of the brand — the visual and verbal toolkit (logo, color, type, voice, imagery, sound). |
| Brand strategy | The plan that defines positioning, purpose, values, and competitive differentiation. Strategy precedes design. |
6.2 Brand Strategy Framework
Wheeler's brand ideals — the qualities every brand should embody:
- Vision: A compelling picture of the future.
- Meaning: What the brand stands for beyond profit.
- Authenticity: Honest about who you are and what you do.
- Coherence: Consistent experience at every touchpoint.
- Flexibility: Able to evolve without losing core identity.
- Commitment: Long-term investment in the brand.
- Value: Delivers measurable worth to stakeholders.
- Differentiation: Clearly distinct from competitors.
- Longevity: Built to endure, not just to trend.
6.3 Brand Architecture
How a company organizes its portfolio of brands:
| Type | Description | Example |
|---|
| Monolithic (Branded House) | One master brand across everything. | Google, FedEx, Virgin |
| Endorsed | Sub-brands linked to the parent ("by [Parent]"). | Marriott Bonvoy, Polo by Ralph Lauren |
| Pluralistic (House of Brands) | Independent brands with no visible parent connection. | P&G (Tide, Pampers, Gillette) |
| Hybrid | A mix of the above strategies. | Apple (monolithic for hardware, endorsed for services) |
6.4 The Brand Identity Process
Wheeler's 5-phase process:
Phase 1 — Conducting Research:
- Market research, usability testing, competitive audit, marketing audit, verbal audit.
- Deliverable: Findings report — a synthesis of all research insights.
Phase 2 — Clarifying Strategy:
- Narrowing the focus, defining positioning, writing the brand brief, naming.
- Deliverable: Brand brief — the strategic foundation for all design decisions.
Phase 3 — Designing Identity:
- Identity system design: logo, color, typography, iconography, sound, other senses.
- Look and feel exploration, trial applications.
- Deliverable: Presentation of design directions with rationale.
Phase 4 — Creating Touchpoints:
- Content strategy, website, collateral, stationery, packaging, advertising, environments, signage, vehicles, uniforms, ephemera.
- Deliverable: Applied identity system across all touchpoints.
Phase 5 — Managing Assets:
- Brand guidelines, online brand centers, brand books, building brand champions.
- Deliverable: Brand governance system for long-term consistency.
6.5 Brand Elements
| Element | Purpose | Key Considerations |
|---|
| Name | The verbal anchor. Must be distinctive, memorable, protectable. | Coined (Kodak), descriptive (General Electric), metaphorical (Amazon), acronym (IBM). |
| Tagline | A short phrase that captures the brand's essence. | "Just Do It." "Think Different." Must be memorable and ownable. |
| Voice & Tone | How the brand speaks. Voice is consistent; tone varies by context. | Formal vs. casual, authoritative vs. friendly, witty vs. sincere. |
| Sound | Sonic branding: audio logos, notification sounds, hold music. | Intel's 5-note bong, Netflix's "ta-dum." |
| Characters | Brand mascots or personas. | The Michelin Man, Tony the Tiger. Can humanize a brand and create emotional connection. |
6.6 Brand Dynamics
Modern branding must navigate:
- Social justice: Brands are expected to take stances. Authenticity is paramount.
- Sustainability: Not greenwashing but genuine, systemic change.
- Global vs. local: Balancing universal brand equity with cultural sensitivity.
- AI & big data: Personalization at scale, but with ethical guardrails.
- Social media: Brands must be conversational, responsive, and human.
- Digital interfaces: The brand experience is increasingly screen-first.
7. Logo Design
7.1 What Makes a Great Logo
From Bokhua's Principles of Logo Design:
A logo must be:
- Simple. Reducible to its essence. Works at the size of a favicon.
- Memorable. Recognizable after a single viewing.
- Timeless. Not dependent on trends. Should feel relevant in 20 years.
- Versatile. Works in one color, reversed, tiny, huge, on any medium.
- Appropriate. Fits the brand's tone and industry (without being literal).
7.2 Types of Brandmarks
From Wheeler and Bokhua:
| Type | Description | Examples |
|---|
| Wordmark (Logotype) | The brand name set in a distinctive typeface. | Google, Coca-Cola, FedEx |
| Letterform mark | A single letter as the identifier. | McDonald's M, Airbnb A |
| Pictorial mark | A recognizable image or icon. | Apple, Twitter bird, Target |
| Abstract mark | A geometric or abstract symbol. | Nike swoosh, Pepsi, Adidas |
| Emblem | Text enclosed within a symbol or badge. | Harley-Davidson, Starbucks, NFL |
| Dynamic mark | A flexible identity that changes based on context. | Google Doodles, MIT Media Lab |
| Character mark | A character or mascot as the primary identifier. | KFC Colonel, Michelin Man |
7.3 The Logo Design Process
Bokhua's methodology:
- Research: Understand the brand, audience, competitors, industry. Study the brief.
- Concept sketching: Generate dozens of ideas on paper. Pencil first, always. "Start analog" (Kleon).
- Geometric construction: Use circles, rectangles, and the golden ratio to build precise, harmonious forms.
- Grid system: Place the logo on a construction grid to ensure mathematical consistency.
- Refinement: Simplify. Remove every unnecessary element. "Is this stroke needed? Is this detail essential?"
- Black and white first: A logo must work in pure black on white. Color is applied last.
- Test at extremes: Favicon (16px), business card, billboard, embroidery, app icon.
- Color application: Choose a primary color that carries meaning. Test on light and dark backgrounds.
- Variations: Create horizontal, vertical, stacked, icon-only, and full-lockup versions.
- Guidelines: Document clear space, minimum size, color specifications, and usage rules.
7.4 Logo Construction Principles
- Optical correction: Circular forms must extend slightly beyond the grid to appear the same size as rectangular forms. Pointed shapes must extend even further.
- Golden circles: Bokhua uses overlapping circles derived from the golden ratio to construct curves and proportions.
- Negative space: The space around and within the mark is as important as the mark itself (FedEx arrow, Spartan Golf Club).
- Symmetry vs. asymmetry: Symmetric logos feel stable and trustworthy. Asymmetric logos feel dynamic and modern.
- Stroke weight consistency: All strokes in a logo should relate to each other mathematically.
7.5 Common Logo Pitfalls
- Using trendy effects (gradients, shadows, 3D) that will date quickly.
- Making the logo too complex to reproduce at small sizes.
- Being too literal (a house for a real estate company).
- Ignoring how the logo will be used in the real world.
- Not testing on dark backgrounds, textured surfaces, and small screens.
- Neglecting the icon-only version (critical for app icons and social media avatars).
8. Storytelling & Narrative Design
8.1 Why Storytelling Matters in Design
"Designers today produce more than logos and cereal boxes; they create situations that stimulate the mind and body over time." — Ellen Lupton
Design is not static. Every interaction with a designed artifact is temporal — it unfolds, builds, resolves. Lupton argues that storytelling is the bridge between problem-solving and emotional engagement.
8.2 The Narrative Arc
The narrative arc is the most fundamental storytelling structure, applicable to any designed experience:
EXPOSITION → RISING ACTION → CRISIS/CLIMAX → FALLING ACTION → RESOLUTION (DENOUEMENT)
Applied to design:
- Exposition: The user encounters the product/site/space for the first time. First impressions, onboarding.
- Rising action: Engagement deepens. Complexity increases. The user invests attention and effort.
- Climax: The peak moment — the "aha," the conversion, the emotional high point.
- Falling action: Wind-down. Confirmation, summary, thank-you.
- Resolution: The user departs with a lasting impression. Loyalty, memory, word-of-mouth.
8.3 The Hero's Journey (Applied to UX)
Joseph Campbell's monomyth, mapped to user experience:
- Ordinary World: User's life before interacting with your product.
- Call to Adventure: The user encounters a problem your product solves.
- Refusal of the Call: Hesitation, skepticism, fear of commitment.
- Meeting the Mentor: Your onboarding, tutorials, brand promise (the brand as mentor).
- Crossing the Threshold: The user commits — signs up, purchases, enters.
- Tests, Allies, Enemies: Using the product. Encountering friction, discovering features.
- The Ordeal: A critical challenge — complex task, error state, decision point.
- Reward: The user achieves their goal. Success state.
- The Road Back: Returning to daily life, now transformed.
- Return with the Elixir: The user shares their experience, becoming an advocate.
8.4 Storytelling Tools for Designers
| Tool | What It Does | When to Use |
|---|
| Storyboard | Sequential visual frames depicting a user's journey. | Planning experiences, presentations, pitches. |
| Scenario planning | Imagining multiple possible futures ("what if?"). | Strategic design, service design, risk assessment. |
| Design fiction | Creating speculative artifacts from a possible future. | Innovation workshops, provocative prototyping. |
| Persona | A fictional character representing a user segment. | Grounding design decisions in human needs. |
| Emotional journey map | Charting highs and lows of a user's experience over time. | Identifying pain points and moments of delight. |
| Rule of threes | Grouping information in sets of three for impact and memorability. | Headlines, feature lists, presentation structure. |
8.5 Co-Creation & Empathy
Lupton emphasizes that storytelling is not just top-down:
- Co-creation: Users are not passive recipients. They participate in making meaning.
- Empathy building: Walk in the user's shoes. Experience what they experience.
- The gap between design intent and user interpretation: You plan the plot, but users write their own story.
8.6 Action as Design Principle
"The essence of drama is action." — Aristotle (via Lupton)
- Every designed element should enable action or call for action.
- A calendar enables the action of planning. A shopping cart calls for the action of purchasing.
- Ask: What does this design help the user DO?
9. Web & Digital Design
9.1 Foundational Principles
From Web Design in a Nutshell and modern practice:
- Design for the medium. The web is not print. It is fluid, interactive, and variable.
- Progressive enhancement. Start with core content/functionality that works everywhere. Layer on enhancements.
- Graceful degradation. When features aren't supported, the experience should still be usable.
- Performance is design. A beautiful site that loads in 8 seconds is a failed design.
9.2 Web Typography
- System fonts vs. web fonts: System fonts (Arial, Georgia) load instantly. Web fonts (loaded via
@font-face or Google Fonts) offer more control but add load time.
- Font stacks: Always declare fallbacks:
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
- Responsive type: Use
clamp() or calc() for fluid sizing. font-size: clamp(1rem, 2.5vw, 1.5rem);
- Readability on screens: Larger x-height fonts (e.g., Verdana, Inter) are more legible on screens. Body text should be minimum 16px.
9.3 Web Color
- Hex, RGB, HSL: All valid. HSL is most intuitive for designers.
- Color gamut: Wider gamut displays (P3) are increasingly common. CSS now supports
color(display-p3 ...).
- Dark mode: Design for both light and dark. Don't just invert — adjust saturation and contrast.
- Accessibility: Test with contrast checkers. WCAG AA requires 4.5:1 for text, 3:1 for large text.
9.4 Layout Technologies
| Technology | What It Does |
|---|
| CSS Flexbox | One-dimensional layouts (row or column). Alignment, distribution, ordering. |
| CSS Grid | Two-dimensional layouts (rows and columns). The modern grid system. |
| Media Queries | Apply different styles based on viewport width, height, orientation, etc. |
| Container Queries | Style elements based on their container's size, not the viewport. |
| CSS Custom Properties (Variables) | Define reusable values for colors, spacing, etc. --primary: #2563eb; |
9.5 Responsive Design
- Mobile-first: Design for the smallest screen first, then enhance for larger.
- Breakpoints: Common widths: 320px (small phone), 768px (tablet), 1024px (laptop), 1440px (desktop).
- Fluid grids: Use percentages,
fr units, and flexible containers.
- Flexible images:
max-width: 100%; height: auto; — images should never overflow their containers.
- Touch targets: Minimum 44×44px for interactive elements on mobile (Apple HIG).
9.6 Web Image Formats
| Format | Best For | Supports Transparency | Supports Animation |
|---|
| JPEG | Photographs, complex imagery with gradients. | No | No |
| PNG | Graphics, screenshots, images needing transparency. | Yes | No |
| GIF | Simple animations, memes. Limited to 256 colors. | Yes (binary only) | Yes |
| SVG | Icons, logos, illustrations. Scalable without quality loss. | Yes | Yes (via CSS/SMIL) |
| WebP | Modern replacement for JPEG/PNG. Better compression. | Yes | Yes |
| AVIF | Next-gen format. Superior compression. Growing support. | Yes | Yes |
9.7 Accessibility (a11y)
Accessibility is not optional — it is a design fundamental:
- Semantic HTML: Use
<nav>, <main>, <article>, <button>, not <div> for everything.
- Alt text: Every meaningful image needs descriptive alt text. Decorative images get
alt="".
- Keyboard navigation: All interactive elements must be reachable and operable via keyboard.
- Focus states: Visible focus indicators for keyboard users.
- ARIA labels: When semantic HTML isn't sufficient, use ARIA attributes.
- Color alone: Never use color as the sole indicator of meaning (error states, required fields).
- Reduced motion: Respect
prefers-reduced-motion for users sensitive to animation.
10. Image & Photography
10.1 Image as Communication
Images are not decoration — they carry meaning, set tone, and drive engagement.
Image functions in design:
- Narrative: Tells a story, depicts action or emotion.
- Informational: Diagrams, charts, instructional illustrations.
- Atmospheric: Sets mood, establishes brand feeling.
- Evidential: Proves a claim (product photography, before/after).
- Decorative: Pattern, texture, visual interest (use sparingly).
10.2 Image Types
| Type | Strengths | Best Use |
|---|
| Photography | Realism, emotion, immediacy. | Editorial, product, lifestyle, documentary. |
| Illustration | Personality, abstraction, uniqueness. | Brand identity, editorial, children's, complex concepts. |
| Iconography | Clarity, scalability, universality. | UI, wayfinding, data visualization. |
| Infographics | Data + visual narrative combined. | Reports, social media, journalism. |
| Data visualization | Reveals patterns in complex data. | Dashboards, annual reports, scientific communication. |
10.3 Photography in Design
- Composition rules apply: Rule of thirds, leading lines, framing, depth of field.
- Consistent style: Within a brand, maintain consistent lighting, color grading, and mood.
- Art direction: The designer directs the photo shoot or selects stock imagery that aligns with the brief.
- Image editing: Crop for composition, adjust levels for contrast, color-correct for consistency.
- Rights and licensing: Always verify usage rights — Creative Commons, royalty-free, rights-managed.
10.4 Iconography Principles
- Consistency: Uniform stroke weight, corner radius, fill style, and grid size across the set.
- Clarity at small sizes: Test at 16px, 24px, 32px.
- Metaphor selection: Choose universally understood metaphors. Avoid culturally specific symbols.
- Pixel-perfect alignment: Align strokes to the pixel grid to avoid blurring on screen.
11. Print Production
11.1 Understanding Print
Despite the digital shift, print remains essential for packaging, publications, brand collateral, and premium experiences.
11.2 Key Print Concepts
| Concept | Definition |
|---|
| Resolution | 300 DPI (dots per inch) minimum for print. 72 DPI is screen resolution only. |
| Bleed | Artwork extends 3mm (0.125") beyond the trim line to prevent white edges. |
| Trim | The final cut line of the printed piece. |
| Safe zone | Keep critical content at least 3-5mm inside the trim line. |
| Registration | The alignment of CMYK plates. Misregistration causes color fringing. |
| Trapping | Slight overlap of adjacent colors to prevent white gaps from misregistration. |
| Overprint | Printing one ink on top of another (not knocking out). |
| Spot color | A pre-mixed ink (Pantone). More accurate than CMYK builds for brand colors. |
11.3 Paper & Substrates
| Property | What It Affects |
|---|
| Weight (GSM) | Thickness and feel. Business cards: 300-400gsm. Flyers: 130-170gsm. |
| Finish | Gloss (reflective, vivid color), matte (soft, readable), uncoated (tactile, natural). |
| Texture | Laid, linen, felt, smooth. Affects print quality and tactile experience. |
| Opacity | Whether content on the reverse side shows through. |
| Sustainability | Recycled content, FSC certification, soy-based inks. |
11.4 Print Finishing Techniques
- Die-cutting: Custom-shaped cuts.
- Foil stamping: Metallic or holographic accents.
- Embossing/Debossing: Raised or recessed impressions.
- Spot UV: Selective glossy coating for contrast.
- Letterpress: Deep-impression printing with tactile quality.
- Perfect binding, saddle stitch, case binding: Binding methods for publications.
12. Packaging Design
12.1 The Role of Packaging
From Wheeler and Dabner:
- Packaging is the brand's most physical touchpoint. It's what the consumer holds, opens, and lives with.
- It must protect, inform, differentiate, and delight.
12.2 Packaging Design Considerations
- Structural design: The 3D form — shape, size, materials, opening mechanism.
- Surface graphics: Label design, typography, color, imagery.
- Legal requirements: Ingredients, nutrition facts, warnings, barcodes, recycling symbols.
- Shelf impact: Must stand out among competitors at 3-5 feet distance.
- Unboxing experience: The sequence of opening, revealing, and first use. Increasingly important in e-commerce.
- Sustainability: Minimize materials, use recyclable/compostable substrates, reduce waste.
12.3 Packaging Hierarchy
- Brand mark — Who made this?
- Product name — What is it?
- Variant — Which version?
- Key benefit/claim — Why should I buy it?
- Supporting information — Ingredients, instructions, legal.
13. Wayfinding & Environmental Design
13.1 Wayfinding Principles
From Wheeler (signage and wayfinding) and Graphic Design School:
- Orientation: Help users understand where they are.
- Direction: Guide users to where they want to go.
- Identification: Label zones, rooms, and landmarks.
- Regulation: Communicate rules (no smoking, exit, fire).
13.2 Environmental Graphics
- Branded environments: Retail spaces, offices, museums where the brand identity is expressed spatially.
- Supergraphics: Large-scale typography or graphics applied to walls, floors, and facades.
- Material palette: Signage materials should complement the architecture (metal, acrylic, wood, digital screens).
- Legibility at distance: Sans serif faces, high contrast, minimum size based on viewing distance (1" of letter height per 25 feet).
14. Motion & Interaction Design
14.1 Motion Design Principles
- Easing: Natural motion follows curves (ease-in, ease-out), not linear paths.
- Duration: UI animations: 200-500ms. Shorter = snappy. Longer = graceful.
- Purpose: Every animation should serve a function — guide attention, provide feedback, indicate state change, or create delight.
- Consistency: Use a shared motion language across the product (same easing curves, durations, behaviors).
14.2 Micro-Interactions
Small, contained moments of animation that respond to user actions:
- Button feedback: Scale, color shift, ripple on click.
- Loading states: Skeleton screens, progress bars, spinners.
- Transitions: Page transitions, modal entries, accordion opens.
- Hover states: Subtle elevation, color change, underline reveal.
14.3 Interaction Design Fundamentals
| Concept | Definition |
|---|
| Affordance | A visual cue that suggests how an element can be used (Lupton). A button looks pushable. |
| Feedback | The system responds to user action (click → visual change). |
| Mapping | The relationship between controls and their effects should be intuitive. |
| Constraint | Limit actions to prevent errors (grayed-out buttons, character limits). |
| Consistency | Similar elements behave similarly throughout the product. |
15. UX & Human-Centered Design
15.1 The User-First Core
Human-Centered Design (HCD) is a mindset that starts and ends with the people you’re designing for. (Wheeler/Lupton)
- Empathy over Assumptions: Never assume you know what the user wants. Use research to find out what they need.
- The Design Loop: Empathize → Define → Ideate → Prototype → Test. Repeat.
- Usability Testing: "Observing real users as they interact with a product to identify friction points." (Wheeler)
15.2 UX vs. UI
- UX (User Experience): The logic, the journey, the psychology, and the satisfaction. It is the invisible architecture.
- UI (User Interface): The visuals, the layout, the buttons, and the typography. It is the visible surface.
15.3 Digital Heuristics (Principles for Screens)
- Visibility of System Status: Keep users informed (loading bars, success messages).
- Match Between System and Real World: Use metaphors users understand (folders, trash cans).
- User Control and Freedom: Provide exits and "undo" buttons.
- Consistency: Don't make users learn a new language for every page.
- Error Prevention: Design to prevent errors before they happen.
- Recognition over Recall: Make options visible so users don't have to remember them.
16. Creative Process & Ideation
16.1 Starting Analog
"Step away from the screen." — Austin Kleon
- The Analog Desk: Pencil, paper, scissors, tape. No internet. No digital constraints.
- The Digital Desk: Refining, producing, publishing.
- Why? The computer is too good at making things look "finished" too early, which kills exploration.
16.2 Stealing Like an Artist
- No one is original: "All creative work builds on what came before." (Kleon)
- Good Theft: Study, credit, transform, mashup.
- Bad Theft: Skim, plagiarize, imitate without understanding.
- The Swipe File: A collection of references to "rip off" and rebuild.
16.3 Ideation Techniques
- Mind Mapping: Branching out from a central concept to find non-linear connections.
- Lateral Thinking: Edward de Bono's method of solving problems through an indirect and creative approach.
- Iterative Sketching: George Bokhua's method of drawing the same logo hundreds of times with tiny refinements.
- Germination: Michael Bierut's "unconscious working"—letting an idea sit in the background while doing other tasks.
17. Professional Practice
17.1 Managing the Client
- Educate the Client: Don't just show work; explain why it works based on their goals. (Wheeler/Millman)
- Stakeholder Management: Identify who makes the final decision early.
- The Design Brief: A contract of intent. If it's not in the brief, it shouldn't be in the design.
17.2 Presenting Your Work
- Tell a Story: Lead the client through the research and strategy before showing the "reveal." (Lupton)
- Rationale over Preference: Never say "I like this color." Say "This color was chosen because it conveys trust."
- Handle Feedback: Listen, don't defend. Ask "Why do you feel that way?" to find the underlying problem.
17.3 Business of Design
- IP (Intellectual Property): Trademarks, copyrights, and usage rights. (Wheeler)
- Contract Essentials: Scope of work, kill fees, payment schedules, and revision limits.
- Self-Promotion: "Do good work and share it with people." (Kleon)
18. Design History & Movements
18.1 Why History Matters
Understanding the past allows you to "steal" from the best and avoid repeating mistakes. (Dabner/Goldberg)
18.2 Key Movements for Reference
- Bauhaus: Form follows function. Minimalism and geometric structure.
- Swiss Design (International Typographic Style): Grids, sans-serif type, and radical clarity.
- Postmodernism: Breaking the rules. Irony, history-pillaging, and "schtick" (as discussed by Carin Goldberg).
- Victorian/Art Nouveau: Decoration, nature-inspired curves, and intricate detail.
18.3 Creative Lineage
Every designer is a branch on a tree. Know your "mentors" (Glaser, Vignelli, Millman, etc.) and understand their philosophy.
19. Design Ethics & Responsibility
19.1 The First Things First Manifesto
A call for designers to use their skills for more than just corporate advertising—focusing on social, environmental, and cultural problems.
19.2 Inclusivity & Accessibility
- Design for All: Accessibility is a civil right (Lupton).
- Inclusion: Ensuring representation in imagery and voice.
- Sustainability: Selecting materials and processes that minimize environmental damage. (Wheeler)
19.3 Dark Patterns (What to Avoid)
- Avoid Manipulation: Designing interfaces that trick users into doing things they didn't intend (e.g., hidden subscriptions).
- Truth in Branding: Authenticity isn't just a buzzword; it's a moral requirement. (Glaser)
20. Toolkit & Checklists
20.1 The Essential Toolkit
- Hardware: Sketchbook, high-quality pens, calibrated monitor, digital tablet.
- Software: Logic Pro/Figma (UI), Creative Cloud (Graphics), code editor (Web).
- Resources: System fonts, a curated swipe file, and a library of physical specimens (paper/ink).
20.2 Final Review Checklist
21. AI Execution & Agentic Framework
To ensure an AI using this OS produces professional-grade results, follow these agentic principles:
21.1 The "Obsessive Designer" Mindset
- Challenge the Brief: Don't just follow instructions; look for the "problem behind the problem."
- Empathy First: Before generating pixels, describe the user's emotional state and the brand's unique point of view.
- Micro-Detail Focus: Pay attention to "invisible design"—kerning, line-height, margin consistency, and accessibility.
21.2 Chain-of-Thought (CoT) Design Logic
When solving a design problem, the AI should process in this order:
- Contextualization: What is the creative lineage of this industry?
- Concept Germination: Brainstorm 5-10 distinct metaphors.
- Heuristic Filtering: Apply the 10 Digital Heuristics (Section 15.3) to the proposed layout.
- Refinement: "Kill your darlings"—identify and remove unnecessary elements.
22. The "Master Designer" Prompt Template
Use this template to prime an AI agent with the full power of the Design Skill OS:
Role: You are an Elite Design Strategist trained on the principles of Milton Glaser, Ellen Lupton, and Michael Bierut.
Knowledge Base: You have full access to the Design Skill OS (SKILL.md).
Mission: Your goal is to produce work that is not just "clean" but "intentional" and "narrative-driven."
Constraints:
- Always prioritize Research & Discovery before providing a solution.
- Use the 60-30-10 Color Rule for all UI/Layout designs.
- Ensure Typographic Hierarchy follows the Golden Ratio or modular scale.
- If asked for a logo, provide a Geometric Construction rationale.
- Self-Critique: Before final output, perform a "Professional Practice Audit" (Section 17.2) on your own work.
23. Critique & Self-Correction Protocol
23.1 The "Red Team" Check
Before finalizing any design output, the AI must ask itself:
- Is this using a "schtick" or a trend? If so, make it more authentic.
- Is the narrative arc clear? What is the "Call to Adventure" for the user?
- Does this design "incite action" (Bruce Mau's performativity)?
23.2 Failure Modes to Avoid
- The "Default" Trap: Avoid browser-default colors, fonts, and grid systems.
- The "Over-Design" Trap: If an element doesn't serve the story, delete it.
- The "Lazy UX" Trap: Never sacrifice usability for "aesthetics."
"The details are not the details. They make the design." — Charles Eames
