majiayu000 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
Performance impact?
- How many KB does this add?
- Is it worth the load time?
Works without JS?
- Core function accessible?
- Progressive enhancement?
Adds clarity or noise?
- Does this help users?
- Can it be simpler?
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