1  # Case Studies Library
 2  
 3  This directory contains curated design case studies organized by category. Each case study analyzes what makes a design effective and provides reusable patterns.
 4  
 5  ## How to Use
 6  
 7  1. **Browse by category** — Find examples relevant to your current task
 8  2. **Read the analysis** — Understand why the design works
 9  3. **Extract patterns** — Identify reusable techniques and code
10  4. **Adapt, don't copy** — Use these as inspiration, not templates
11  
12  ## Categories
13  
14  ### Product Pages
15  High-converting landing pages and product showcases from leading SaaS companies.
16  
17  - [Stripe Homepage](product-pages/stripe-homepage.md) — Trust through clarity
18  - [Linear Features](product-pages/linear-features.md) — Modern minimalism
19  - [Notion Landing](product-pages/notion-landing.md) — Playful professionalism
20  
21  ### Presentations
22  Slide decks that maintain attention and convey key points effectively.
23  
24  - [Pitch Deck Example](presentations/pitch-deck-example.md) — Investor-ready structure
25  - [Keynote Style](presentations/keynote-style.md) — Apple-inspired visual rhythm
26  - [Data Story](presentations/data-story.md) — Making numbers memorable
27  
28  ### Mobile Apps
29  Mobile-first UI patterns that prioritize touch interaction and clarity.
30  
31  - [iOS Onboarding](mobile-apps/ios-onboarding.md) — Progressive disclosure
32  - [Android Dashboard](mobile-apps/android-dashboard.md) — Information density
33  - [Mobile Checkout](mobile-apps/mobile-checkout.md) — Frictionless conversion
34  
35  ### Creative Works
36  Award-winning designs that push boundaries while maintaining usability.
37  
38  - [Awwwards Winner](creative-works/awwwards-winner.md) — Bold experimental layout
39  - [Portfolio Site](creative-works/portfolio-site.md) — Personal brand expression
40  - [Interactive Story](creative-works/interactive-story.md) — Scroll-driven narrative
41  
42  ## Case Study Format
43  
44  Each case study follows this structure:
45  
46  ```markdown
47  # [Case Name]
48  
49  ## Overview
50  - Type: Product page / Presentation / Mobile app / Creative work
51  - Style: Minimal / Modern / Bold / Elegant
52  - Primary color: [Color]
53  - Typography: [Font names]
54  
55  ## Why It Works
56  1. [Key insight 1]
57  2. [Key insight 2]
58  3. [Key insight 3]
59  
60  ## Design Techniques
61  - Visual hierarchy: [Specific technique]
62  - Color usage: [Specific technique]
63  - Typography: [Specific technique]
64  - Whitespace: [Specific technique]
65  
66  ## Reusable Patterns
67  - [Pattern 1]: [Description + code example]
68  - [Pattern 2]: [Description + code example]
69  
70  ## Key Code Snippets
71  [CSS/HTML examples]
72  
73  ## When to Use This Approach
74  [Specific scenarios where this design style fits]
75  ```
76  
77  ## Contributing
78  
79  To add a new case study:
80  
81  1. Create a new `.md` file in the appropriate category folder
82  2. Follow the case study format above
83  3. Focus on analysis and reusable patterns, not just description
84  4. Include code snippets for key techniques
85  5. Update this README with a link to your case study
86  
87  ## Design Principles Across All Cases
88  
89  Regardless of style or category, all featured designs share these qualities:
90  
91  1. **Clear hierarchy** — You know where to look first
92  2. **Intentional whitespace** — Breathing room guides attention
93  3. **Consistent system** — Colors, fonts, spacing follow rules
94  4. **Emotional resonance** — The design feels appropriate for its purpose
95  5. **Technical excellence** — No errors, responsive, accessible
96  
97  Use these case studies to understand how great designers achieve these qualities in different contexts.