Imported from frhscopex/design-skill-os (.cursor/skills/SKILL.md). Install upstream with npx skills add frhscopex/design-skill-os --skill skills. Copyright stays with the author.

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

1. Design Thinking & Philosophy
2. Research & Discovery
3. Typography
4. Color Theory & Application
5. Composition & Layout
6. Branding & Identity Systems
7. Logo Design
8. Storytelling & Narrative Design
9. Web & Digital Design
10. Image & Photography
11. Print Production
12. Packaging Design
13. Wayfinding & Environmental Design
14. Motion & Interaction Design
15. UX & Human-Centered Design
16. Creative Process & Ideation
17. Professional Practice
18. Design History & Movements
19. Design Ethics & Responsibility
20. 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:

1.3 Core Axioms

1. Content drives form. Never start with aesthetics; start with what needs to be communicated.
2. Constraints are fuel. Budget, deadline, format, audience — these are not obstacles but the raw material of creative solutions.
3. Design is temporal. Every artifact — poster, building, app — unfolds over time. Eyes wander, bodies move, attention ebbs and flows.
4. Simplicity is the ultimate sophistication. Reduce until removing anything further would break the design.
5. 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:

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:

1. Carry a sketchbook or use a dedicated note app daily.
2. Build a tagged digital library (Pinterest, Are.na, Raindrop, or local folders).
3. 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:

1. What is the current state? (Where are we now?)
2. What is the desired state? (Where do we want to be?)
3. What is the gap? (What's preventing us from getting there?)
4. What are the constraints? (Budget, timeline, technical limitations, brand guidelines.)
5. 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:

3.2 Type Classification

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):

1. Display/Title — Largest, boldest. Sets the tone.
2. Subtitle/Deck — Supports the title, provides context.
3. Section heading — Organizes content into scannable chunks.
4. Subheading — Further subdivides sections.
5. Body text — The main content. Must be supremely readable.
6. 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:

1. Concordant: Same family (e.g., Freight Sans + Freight Text). Safe, harmonious.
2. Contrasting: Different families with clear visual distinction (e.g., Futura + Garamond). Dynamic, engaging.
3. 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:

4.2 Color Models

4.3 Color Harmony Systems

From Palette Perfect (Wager) and The Designer's Dictionary of Color (Adams):

4.4 Color Psychology & Cultural Meaning

From The Designer's Dictionary of Color (Adams):

4.5 Building a Color Palette

Step-by-step process (synthesized from Wager, Adams, Wheeler):

1. Start with brand/project meaning. What emotions and values must be conveyed?
2. Choose a dominant hue. This carries the primary emotional weight.
3. Select a harmony type (analogous for calm, complementary for energy).
4. Establish value range. Include lights (tints), mids, and darks (shades).
5. Add neutrals. Warm gray, cool gray, off-white, off-black.
6. Define a system. Primary, secondary, accent, background, text, success/warning/error.
7. Test in context. Colors behave differently on screen vs. print, large vs. small areas, light vs. dark backgrounds.
8. 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

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:

1. Entry point: The first thing the eye hits. Usually the largest or most contrasting element.
2. Primary information: Headline, key visual.
3. Secondary information: Body text, supporting imagery.
4. 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:

6.2 Brand Strategy Framework

Wheeler's brand ideals — the qualities every brand should embody:

1. Vision: A compelling picture of the future.
2. Meaning: What the brand stands for beyond profit.
3. Authenticity: Honest about who you are and what you do.
4. Coherence: Consistent experience at every touchpoint.
5. Flexibility: Able to evolve without losing core identity.
6. Commitment: Long-term investment in the brand.
7. Value: Delivers measurable worth to stakeholders.
8. Differentiation: Clearly distinct from competitors.
9. Longevity: Built to endure, not just to trend.

6.3 Brand Architecture

How a company organizes its portfolio of brands:

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

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:

1. Simple. Reducible to its essence. Works at the size of a favicon.
2. Memorable. Recognizable after a single viewing.
3. Timeless. Not dependent on trends. Should feel relevant in 20 years.
4. Versatile. Works in one color, reversed, tiny, huge, on any medium.
5. Appropriate. Fits the brand's tone and industry (without being literal).

7.2 Types of Brandmarks

From Wheeler and Bokhua:

7.3 The Logo Design Process

Bokhua's methodology:

1. Research: Understand the brand, audience, competitors, industry. Study the brief.
2. Concept sketching: Generate dozens of ideas on paper. Pencil first, always. "Start analog" (Kleon).
3. Geometric construction: Use circles, rectangles, and the golden ratio to build precise, harmonious forms.
4. Grid system: Place the logo on a construction grid to ensure mathematical consistency.
5. Refinement: Simplify. Remove every unnecessary element. "Is this stroke needed? Is this detail essential?"
6. Black and white first: A logo must work in pure black on white. Color is applied last.
7. Test at extremes: Favicon (16px), business card, billboard, embroidery, app icon.
8. Color application: Choose a primary color that carries meaning. Test on light and dark backgrounds.
9. Variations: Create horizontal, vertical, stacked, icon-only, and full-lockup versions.
10. 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:

1. Ordinary World: User's life before interacting with your product.
2. Call to Adventure: The user encounters a problem your product solves.
3. Refusal of the Call: Hesitation, skepticism, fear of commitment.
4. Meeting the Mentor: Your onboarding, tutorials, brand promise (the brand as mentor).
5. Crossing the Threshold: The user commits — signs up, purchases, enters.
6. Tests, Allies, Enemies: Using the product. Encountering friction, discovering features.
7. The Ordeal: A critical challenge — complex task, error state, decision point.
8. Reward: The user achieves their goal. Success state.
9. The Road Back: Returning to daily life, now transformed.
10. Return with the Elixir: The user shares their experience, becoming an advocate.

8.4 Storytelling Tools for Designers

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

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

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

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

11.3 Paper & Substrates

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

1. Structural design: The 3D form — shape, size, materials, opening mechanism.
2. Surface graphics: Label design, typography, color, imagery.
3. Legal requirements: Ingredients, nutrition facts, warnings, barcodes, recycling symbols.
4. Shelf impact: Must stand out among competitors at 3-5 feet distance.
5. Unboxing experience: The sequence of opening, revealing, and first use. Increasingly important in e-commerce.
6. Sustainability: Minimize materials, use recyclable/compostable substrates, reduce waste.

12.3 Packaging Hierarchy

1. Brand mark — Who made this?
2. Product name — What is it?
3. Variant — Which version?
4. Key benefit/claim — Why should I buy it?
5. 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

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)

1. Visibility of System Status: Keep users informed (loading bars, success messages).
2. Match Between System and Real World: Use metaphors users understand (folders, trash cans).
3. User Control and Freedom: Provide exits and "undo" buttons.
4. Consistency: Don't make users learn a new language for every page.
5. Error Prevention: Design to prevent errors before they happen.
6. 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

• Functional: Does it solve the problem defined in the brief?
• Hierarchical: Is it clear where the eye should look first?
• Typographical: Are the line lengths, leading, and pairing correct?
• Chromatic: Is the color palette harmonious and accessible?
• Narrative: Does it tell a story or enable a clear action?
• Technical: Is the resolution correct? Is the file built for its medium?

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:

1. Contextualization: What is the creative lineage of this industry?
2. Concept Germination: Brainstorm 5-10 distinct metaphors.
3. Heuristic Filtering: Apply the 10 Digital Heuristics (Section 15.3) to the proposed layout.
4. 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:

1. Always prioritize Research & Discovery before providing a solution.
2. Use the 60-30-10 Color Rule for all UI/Layout designs.
3. Ensure Typographic Hierarchy follows the Golden Ratio or modular scale.
4. If asked for a logo, provide a Geometric Construction rationale.
5. 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