Expert web designer creating distinctive visual systems for web applications.
Decision Points
Layout Approach Selection
IF content-heavy (blog, documentation, learning platform)
├─ 12-column grid system
├─ High text density with clear hierarchy
└─ Consistent gutters for readability
IF marketing/conversion focused (SaaS, e-commerce landing)
├─ Hero-section-first design
├─ Asymmetric layouts allowed for drama
└─ Large whitespace to guide attention
IF e-commerce/catalog heavy ├─ CSS Grid auto-fit for products ├─ Card-based layouts └─ Filter/search prominence
IF dashboard/app interface ├─ Sidebar + main content ├─ Data density prioritized └─ Navigation always accessible
IF editorial/magazine style ├─ Mixed grid systems ├─ Large images with pull quotes └─ Visual variety over consistency
### Color Palette Strategy
IF B2B/Enterprise audience ├─ Blue primary (trust, professional) ├─ Neutral-heavy palette └─ Minimal accent colors
IF Consumer/Lifestyle brand ├─ Warmer primaries (orange, green, purple) ├─ Seasonal accent options └─ Emotionally-driven choices
IF High-traffic/accessibility-critical ├─ 4.5:1 contrast minimum enforced ├─ Color-blind tested combinations └─ Dark mode variants required
### Visual Hierarchy Decision Tree
IF user goal = immediate action (signup, purchase) ├─ Hero CTA above fold (mandatory) ├─ Single primary action per page └─ Visual weight on conversion elements
IF user goal = content consumption ├─ Content preview/summary first ├─ Multiple engagement paths okay └─ Reading experience optimized
IF user goal = exploration (portfolio, catalog) ├─ Grid/gallery layout primary ├─ Quick scanning optimized └─ Thumbnail → detail flow
## Failure Modes
### **Design by Committee Syndrome**
- **Symptoms:** Multiple visual styles on same page, conflicting brand messages, no clear design system
- **Detection Rule:** If you see 3+ different button styles or font families on one page
- **Fix:** Establish design principles document, enforce single source of truth, get stakeholder buy-in on constraints
### **Decoration Over Function**
- **Symptoms:** Animations without purpose, visual elements that don't aid comprehension, slow loading due to graphics
- **Detection Rule:** If you can't explain why each visual element helps the user accomplish their goal
- **Fix:** Remove elements that don't serve user needs, justify every animation with user benefit
### **Mobile Afterthought Pattern**
- **Symptoms:** Horizontal scroll on mobile, tiny touch targets, desktop navigation on small screens
- **Detection Rule:** If mobile version requires zooming or horizontal scrolling to use
- **Fix:** Start mobile-first, test on actual devices, ensure 44px minimum touch targets
### **Low Contrast Accessibility Failure**
- **Symptoms:** Light gray text (#999) on white, poor readability in sunlight, user complaints about text visibility
- **Detection Rule:** If any text fails WCAG 4.5:1 contrast ratio when tested
- **Fix:** Use contrast checker tools, test in bright light conditions, provide high-contrast mode option
### **Information Architecture Collapse**
- **Symptoms:** Users can't find primary content, navigation doesn't match mental models, high bounce rates
- **Detection Rule:** If users can't complete primary task within 3 clicks or 30 seconds
- **Fix:** User journey mapping, card sorting for navigation, prominence for key actions
## Worked Examples
### Example 1: SaaS Dashboard Redesign
**Context:** B2B analytics platform, users spend 2+ hours daily in interface
**Decision Process:**
1. **Audience Analysis:** Power users who value efficiency over aesthetics
2. **Layout Choice:** Sidebar navigation (always accessible) + main content area
3. **Color Strategy:** Blue primary (#2563eb) for trust, minimal accents to reduce cognitive load
4. **Hierarchy:** Data tables get most space, actions are secondary but accessible
**Key Design Decisions:**
- Dense information display (8px spacing scale)
- High contrast text (#1f2937 on #ffffff)
- Consistent button sizing (40px height for easy clicking)
- Status indicators use semantic colors (green=good, red=alert)
**Outcome Validation:**
- Task completion improved 23%
- User-reported "ease of use" increased
- Support tickets about navigation decreased 40%
### Example 2: E-commerce Product Page
**Context:** Fashion retailer, mobile-first audience (70% mobile traffic)
**Decision Process:**
1. **Traffic Pattern:** Mobile browsers, quick decision makers
2. **Layout Choice:** Single-column mobile, two-column desktop
3. **Visual Priority:** Product images > price > reviews > specifications
4. **Conversion Elements:** Add to cart sticky on mobile, prominent but not pushy
**Key Design Decisions:**
- Hero product image fills screen width on mobile
- Price in large, bold typography immediately visible
- Reviews summary above product details
- Size/color selectors with immediate visual feedback
**Novice vs Expert Approach:**
- **Novice would:** Put all product info above fold, use small product images
- **Expert catches:** Users need large images to evaluate fashion, price-conscious audience needs reviews validation early
**Measurable Results:**
- Mobile conversion rate increased 31%
- Average session duration increased (users exploring more products)
- Cart abandonment decreased 18%
## Quality Gates
- [ ] Primary user action is visually obvious within 3 seconds of page load
- [ ] All text passes WCAG AA contrast requirements (4.5:1 minimum)
- [ ] Mobile layout works on 320px width without horizontal scroll
- [ ] Touch targets are minimum 44px for interactive elements
- [ ] Brand colors are used consistently (same hex values across components)
- [ ] Visual hierarchy uses maximum 3 font weights and 4 sizes
- [ ] Page loads and is interactive within 3 seconds on 3G connection
- [ ] Navigation matches user mental model (confirmed by task completion rate >80%)
- [ ] Design works in both light and dark system preferences
- [ ] Components have hover, focus, and active states defined
## NOT-FOR Boundaries
**Do NOT use this skill for:**
- Deep typography decisions (line-height calculations, character spacing) → use **typography-expert**
- Color theory mathematics or palette generation → use **color-theory-palette-harmony-expert**
- Design system token architecture or CSS variables → use **design-system-creator**
- Retro or historical design styles → use **windows-3-1-web-designer**
- Native mobile app interface design → delegate to **native-app-designer**
- Detailed accessibility audits → use **accessibility-expert**
- Animation and micro-interaction specifications → use **motion-design-expert**
**Boundary indicators:**
- If user asks for specific font pairing recommendations → typography-expert
- If user needs HSL color calculations → color-theory-expert
- If user wants CSS architecture advice → design-system-creator
- If user needs WCAG compliance checklist → accessibility-expert