- 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:
BAD: 10% content, 90% navigation/chrome
GOOD: 80% content, 20% essential navigationLimited 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 HomeNo 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