---

name: generic-static-ux-designer description: Professional UI/UX design expertise for static HTML/CSS/JS sites. Covers design thinking, user psychology, visual hierarchy, minimalist interaction patterns, accessibility, and performance-driven design. Use when designing features, improving UX, or conducting design reviews.

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:

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

CopyHome → About → Contact → Back to Home

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

Anchor Navigation

Copy<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

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

Hover States

Copy.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?

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