What Is Web Design and What Does a Web Designer Actually Do?

Updated

Web design is the practice of planning how a website looks, reads, and behaves for the people who use it — covering layout, visual style, typography, color, navigation, and the overall user experience. It is distinct from web development, which builds the working site in code, though the two roles overlap heavily in practice. This explainer is for anyone trying to understand the discipline, evaluate a designer, or decide whether to hire one.

What web design actually covers

A web designer's work is not just "making it pretty." It typically includes:

  • Information architecture — deciding what pages exist and how content is grouped.
  • Layout and grid — where elements sit on the page and how they align across screen sizes.
  • Visual style — typography, color palette, imagery, spacing, and brand consistency.
  • Navigation and interaction — menus, links, buttons, and the flow between pages.
  • Responsive behavior — how the design adapts from desktop to tablet to phone.
  • Accessibility — contrast, readable text sizes, keyboard navigation, and semantic structure.
  • User experience (UX) principles — reducing friction, making actions obvious, and matching user expectations.

Web design vs. web development

The two are often confused, and the boundary is blurry. A useful distinction:

Dimension Web design Web development
Primary output Wireframes, mockups, style guides, prototypes Working HTML/CSS/JS, templates, CMS setup
Core question "What should this look and feel like?" "How does this actually run?"
Typical tools Figma, Sketch, pen and paper Code editors, frameworks, version control
Overlap Front-end coding of the design Implementing layout and styling

Many practitioners, especially on small projects, do both. A designer who can write CSS can hand off work that is far easier to build.

Core skills to look for

  • Typography and color — readable type scales and palettes that meet contrast standards.
  • Grid and layout systems — consistent alignment rather than ad-hoc placement.
  • Responsive design — designing for multiple viewport widths, not just one.
  • Accessibility awareness — WCAG basics such as contrast ratios and focus states.
  • UX thinking — understanding the user's task before choosing a visual style.

A typical workflow

  1. Requirements and goals — what the site must achieve and for whom.
  2. Content and structure — sitemap, page inventory, and priority content.
  3. Wireframes — low-fidelity layout sketches to agree on structure before styling.
  4. Visual mockups — high-fidelity designs applying type, color, and imagery.
  5. Prototype and review — clickable flows to test navigation and key interactions.
  6. Handoff — specs, assets, and style guidance for the developer.

The expected result at each stage is a decision the next stage depends on: structure before style, style before build.

How to evaluate a design

  • Usability — can a first-time visitor find the main action without instructions?
  • Consistency — do repeated elements (buttons, headings, spacing) behave the same way?
  • Performance awareness — are images and fonts chosen with load time in mind?
  • Accessibility — is text readable, contrast sufficient, and navigation keyboard-friendly?
  • Responsiveness — does it hold up at narrow widths, not just on a large monitor?

When to hire a designer

Hire a web designer when the site's structure and presentation are the bottleneck — a new brand, a confusing navigation, or a site that looks dated or fails on mobile. If you already have a clear design and only need it built, you may need a developer instead. For a broader look at when outside expertise is worth it, see the related question on consulting.

Where mass:werk fits

mass:werk (masswerk.at) is the home page of Norbert Landsteiner, described as covering design, web development, and consulting, alongside retro computing and computer history projects. It is a useful example of a practitioner whose work spans both design and development — and whose site also hosts interactive demos and historical emulations. If you are researching individual designers or small studios, that kind of combined profile is common.