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

Element	Impact
Web font	+50-100KB
Hero image	+200-500KB
Animation library	+30-50KB
JavaScript framework	+30-100KB

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

Requirement	Minimalist Solution
Focus indicators	Simple outline
Skip links	Clean text link
Alt text	Concise descriptions
Contrast	High contrast by default

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?

2. Works without JS?

   • Core function accessible?
   • Progressive enhancement?

3. Adds clarity or noise?

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

4. 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