curiositech/skills/maximalist-web-design

Maximalist Web Design

Creates web experiences that embrace density, richness, and visual abundance. Maximalism is the deliberate, skilled rejection of "less is more" — it argues that more is more, that empty space is wasted space, and that visual complexity can be navigated when properly orchestrated.

Decision Points

Information Density Decision Tree

If viewport width > 1200px:
  └── If user is data-focused (trading, analytics, dashboards):
      ├── Info density > 80% of screen → Use micro-cards (8px padding, 0.75rem text)
      └── Info density 60-80% → Use dense grid (4px gaps, 180px min-width)
  └── If user is content-browsing (portfolio, editorial):
      ├── Visual impact priority → Use layered cards with 20-30% overlap
      └── Readability priority → Use column layouts with 1.5rem gaps

If viewport width 768-1199px:
  └── Reduce density by 30%:
      ├── Collapse sidebars to icons
      └── Switch to 2-column max grid

If viewport width < 768px:
  └── Single column, increase touch targets to 44px minimum

Animation Threshold Decision Tree

If concurrent animations > 3 in viewport:
  └── Reduce to maximum 2 moving elements simultaneously

If animation duration > 1.5 seconds:
  └── Add pause-on-hover for user control

If user has motion sensitivity:
  └── Replace with CSS transitions (duration < 0.3s)
  └── Use transform/opacity only (avoid layout thrash)

Color Clash Management

If background-foreground contrast < 4.5:1:
  └── Add semi-transparent overlay behind text
  └── Or switch to high-contrast color pair from palette

If using > 5 colors in single component:
  └── Assign semantic roles (primary, secondary, accent, neutral, warning)
  └── Test accessibility with color blindness simulator

If colors feel chaotic (user feedback):
  └── Create color zones - group related content in same hue family
  └── Use 70-25-5 rule: 70% dominant, 25% secondary, 5% accent

Failure Modes

Seizure-Prone Animation Overload

Symptoms: Multiple elements animating simultaneously, rapid flashing effects, no pause controls Detection: If > 3 elements moving at once OR any flash rate > 3Hz OR no prefers-reduced-motion support Fix: Limit to 2 concurrent animations max, add pause-on-hover, implement motion reduction query

Illegible Text Plague

Symptoms: Users complain about readability, text blends into busy backgrounds, low engagement with content Detection: Contrast ratio < 4.5:1, text smaller than 14px on dense backgrounds, color-on-color conflicts Fix: Add semi-transparent backdrop behind text, increase font weight, switch to high-contrast color pairs

Information Architecture Collapse

Symptoms: Users can't find key actions, everything looks equally important, high bounce rate Detection: No clear visual hierarchy (squint test fails), all elements same size/weight, no color zones Fix: Implement 4:1 size ratio between headline/body, create color-coded sections, add opacity layers (1.0/0.7/0.4)

Mobile Touch Target Failure

Symptoms: Frustrated mobile users, accidental taps, unusable on touch devices Detection: Interactive elements < 44px on mobile, hover-dependent interactions, desktop-only density Fix: Increase mobile touch targets to 44px minimum, add mobile-specific spacing, implement progressive density

Worked Examples

Example 1: Bloomberg-Style Trading Dashboard

Scenario: Financial trading platform needs maximum information density while maintaining split-second usability.

Initial Assessment: User needs to monitor 50+ data points simultaneously, primary device is desktop with large monitors, users are expert-level traders comfortable with density.

Design Decisions:

1. Information Density: 85% screen coverage (chose micro-cards due to > 80% density threshold)
2. Typography: Monospace for all numbers (IBM Plex Mono), condensed sans for labels (Barlow Condensed)
3. Color System: Bloomberg palette - terminal black background, amber for primary data, green/red for directional changes
4. Animation: Only animate price changes with 0.3s highlight fade, no concurrent animations

Implementation Strategy:

.trading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px;
  padding: 4px;
  height: 100vh;
  overflow-y: auto;
}

.price-card {
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  padding: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
}

.price-change {
  transition: background-color 0.3s ease;
}

Trade-offs Made:

• Sacrificed visual appeal for information density (chose function over form)
• Accepted steep learning curve for new users (expert users prioritized)
• Limited mobile experience in favor of desktop optimization

Example 2: MySpace Nostalgia Portfolio Site

Scenario: Creative professional wants a personal portfolio that captures early 2000s web energy while showcasing modern work.

Initial Assessment: Content is mixed (images, text, video), audience is creative peers who appreciate boldness, primary goal is memorable impression over usability.

Design Decisions:

1. Information Density: 65% screen coverage (chose layered cards with visual overlap)
2. Typography: Mixed system - Avril Fatface for headers, Space Grotesk for body, IBM Plex Mono for captions
3. Color System: Electric maximalist palette - violet primary, coral secondary, acid yellow highlights
4. Animation: Subtle parallax scroll, hover transforms, staggered entrance animations

Chaos Control Tactics:

• Color Zones: Each project section uses different background hue to create separation
• Visual Hierarchy: 4:1 size ratio between project titles and descriptions
• Controlled Overlaps: Elements overlap by exactly 20%, creating rhythm not randomness
• Breathing Room: Every third section has 80% less density for visual rest

Critical Problem Solved: How to make maximalism feel intentional, not accidental Solution: Used mathematical relationships (20% overlap, 4:1 ratios, 70-25-5 color distribution) to create order within chaos

Quality Gates

• [ ] Squint test passed: 3 distinct hierarchy levels visible when eyes half-closed
• [ ] Contrast ratio ≥ 4.5:1 for all body text measured with actual background patterns
• [ ] Touch targets ≥ 44px on mobile devices for all interactive elements
• [ ] Maximum 2 concurrent animations in any viewport at any time
• [ ] prefers-reduced-motion query implemented and tested
• [ ] Color-coded sections clearly distinguish different content areas
• [ ] Typography uses ≥ 3 font families with distinct semantic roles assigned
• [ ] Mobile layout reduces density by minimum 30% compared to desktop
• [ ] Performance budget met: First Contentful Paint < 2s even with dense DOM
• [ ] At least one "escape valve" provided (collapsible panel, focus mode, or filter)

NOT-FOR Boundaries

Do NOT use maximalist-web-design for:

• Government or healthcare sites requiring accessibility compliance → Use accessibility-first-design instead
• E-commerce checkout flows → Use conversion-optimization-expert for streamlined funnels
• Interior design maximalism → Use maximalist-wall-decorator for physical spaces
• Neobrutalist flat-color bold-border style → Use neobrutalist-web-designer for that aesthetic
• Editorial collage overlapping compositions → Use collage-web-design for magazine layouts
• Corporate SaaS applications → Use web-design-expert for business software interfaces
• Landing pages optimized for conversion → Maximalism fights conversion goals

Delegate to other skills when:

• Client mentions "clean and professional" → web-design-expert
• Project requires WCAG AAA compliance → accessibility-first-design
• Budget constraints require rapid development → bootstrap-expert
• Content strategy needs definition → content-strategist