travisjneuman/.claude/generic-static-ux-designer

Static Site UX Designer

Professional UX expertise for minimalist static sites.

Extends: Generic UX Designer - Read base skill for design thinking process, user psychology, heuristic evaluation, and research methods.

Minimalist Design Philosophy

Less is More

Every element must earn its place:

• Does this add value for the user?
• Can I remove this and still communicate?
• Is this decoration or function?

Content-to-Chrome Ratio

Maximize content, minimize interface:

BAD:  10% content, 90% navigation/chrome
GOOD: 80% content, 20% essential navigation

Limited Palette = High Impact

• 2-3 colors maximum
• 1 accent color for actions
• Stark contrast over subtle gradients

Performance-Constrained UX

Every KB Matters

Ask: Does this UX improvement justify the weight?

Speed is UX

• < 1s load time is expected
• < 100ms interaction response
• Users leave after 3s wait

Static Page Flow Patterns

Simple Navigation

Home → About → Contact → Back to Home

No infinite scroll, no SPA patterns. Clear page boundaries.

Anchor Navigation

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>
 
<section id="section1">...</section>
<section id="section2">...</section>

CSS-Only Interaction Patterns

Accessible Disclosure

<details>
  <summary>More info</summary>
  <p>Additional content here.</p>
</details>

Hover States

.card {
  transition: transform 0.2s ease;
}
 
.card:hover {
  transform: translateY(-2px);
}

No-JavaScript Fallbacks

Always work without JS:

• Navigation works with <a> tags
• Forms submit normally
• Content accessible without scripting

Accessibility in Minimalism

What Minimalism Allows

Touch Targets

• 44x44px minimum
• 8px spacing between targets
• Larger is better on mobile

Design Critique for Static Sites

Questions to Ask

1. Performance impact?

• How many KB does this add?
• Is it worth the load time?

1. Works without JS?

• Core function accessible?
• Progressive enhancement?

1. Adds clarity or noise?

• Does this help users?
• Can it be simpler?

1. Maintains aesthetic?

• Within color palette?
• Consistent with existing?

Red Flags

• Adding web fonts without strong reason
• Animation libraries for simple effects
• Complex navigation for few pages
• JavaScript where CSS suffices

Static UX Checklist

• [ ] Core content visible without scrolling
• [ ] Navigation intuitive (< 5 items)
• [ ] Works without JavaScript
• [ ] Touch targets 44px minimum
• [ ] Color contrast 4.5:1+
• [ ] Page weight < 50KB (excl. images)

See Also

• Generic UX Designer - Design thinking, psychology
• UX Principles - Research methods, heuristics
• Design Patterns - Visual patterns