Web Designer

---
name: web-designer
description: Design modern, responsive websites with UX fundamentals, visual systems, and developer-ready specs.
category: creative-design
---

## Overview

Web design sits at the intersection of UX, visual design, and front-end reality.
A great web
designer thinks in systems and breakpoints, designs with real content,
understands performance and
accessibility constraints, and hands off files developers can actually build.
This skill covers the
full web design practice from discovery to launch-ready specs.

## When to use

- Designing a new website or web application

- Redesigning an existing site

- Creating responsive layouts across breakpoints

- Building a visual system for the web (type, color, components)

- Preparing designs for front-end development

## Core concepts

- - - **Content-first, device-second.** Design around real content and the
  user's tasks. Then ensure
  it works from 320px to 4K — responsive isn't a phase, it's the medium.
- - - **The breakpoint mindset.** Design at 3 key widths (mobile ~375, tablet
  ~768, desktop ~1440) and
  define the rules between them (when does the nav collapse? how do grids
reflow?). Developers need
  behaviors, not just pictures.
- - - **Performance is design.** Every image, font, and animation has a cost.
  Design with budgets:
  optimized images, system font fallbacks considered, motion that doesn't jank.
A beautiful site
  that loads in 8 seconds is a failed design.
- - - **Accessibility from the start.** Semantic structure, keyboard navigation,
  focus states,
  contrast, alt text, reduced motion. Retrofitting accessibility is 10x harder
than designing it in.
- - - **Design systems thinking.** Reusable components, consistent spacing
  scale, typographic scale —
  even for a "simple" marketing site. One-offs multiply into maintenance
nightmares.
- - - **Above the fold earns the scroll.** The hero must communicate: what is
  this, who is it for,
  what do I do next — in 5 seconds. Everything below exists because the hero
earned the scroll.

## Practical workflow

1. 1. 1. **Discovery.** Goals (what should the site achieve?), audience, key
   pages, content inventory,
   technical constraints (CMS? framework?), and competitor/reference review.
2. 2. 2. **Sitemap and flows.** Page inventory, navigation structure, key user
   journeys. Agree on scope
   before pixels — scope creep is a design problem too.
3. 3. 3. **Wireframes.** Low-fi layouts for key templates (homepage, key
   landing, content page).
   Validate structure and hierarchy before visual design.
4. 4. 4. **Visual system.** Type scale, color tokens, spacing, buttons, forms,
   cards — the component
   foundations. Design these once, reuse everywhere.
5. 5. 5. **High-fidelity designs.** Key pages at desktop and mobile breakpoints,
   with real content.
   Define hover/focus/active states and responsive behaviors as you go.
6. 6. 6. **Prototype interactions.** Key flows clickable: navigation, forms,
   modals, mobile menu.
   Prototype to validate and to specify — developers build what they can see.
7. 7. 7. **Handoff and QA.** Specs for spacing/behavior/edge cases, asset
   exports (optimized, 2x where
   needed), then design QA on staging: compare build to design, file
discrepancies, verify
   responsive behavior on real devices.

## Common pitfalls

- - - **Desktop-only design.** Designing at 1440px and assuming mobile "just
  works." Mobile is usually
  the majority of traffic — design it with equal care, sometimes first.
- - - **Lorem ipsum layouts.** Designing around fake content, then discovering
  real headlines break
  the layout. Real content from wireframe stage onward.
- - - **Ignoring states.** Designing the perfect empty form but not errors,
  loading, or success. The
  unhappy paths are where users actually need design help.
- - - **Pixel-perfect delusion.** Expecting the build to match the mock exactly
  across browsers and
  devices. Design robustly (flexible layouts, relative units) rather than
rigidly.
- - - **No performance budget.** 15MB of hero video, 6 font weights, unoptimized
  PNGs. Set a budget
  (e.g., <2MB initial load) and design within it.
- - - **Skipping design QA.** Handing off and never checking the build. The last
  10% of polish happens
  in QA — schedule it like a phase, not a favor.