Web Design Expert

Web Design Expert

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