Somebody has to decide where the menu goes, how large a heading should be and what a button does when a thumb lands on it. That job is web design. It plans the structure, visual appearance and interaction of a website so visitors can read it, find their way around and use it on any device.
Designers settle layout, type, color, imagery and navigation. Developers then write those decisions in code.
Looks are only part of it. WebAIM’s 2026 Million report found detectable WCAG 2 failures on 95.9% of the top one million home pages, so accessibility is something you can measure here, not a side topic.
What Is Web Design?
The scope is wider than looks. A designer decides what goes on each page, where it sits, how it responds to touch and how it changes between a phone and a wide monitor.
Layouts and templates land on the designer’s desk, along with type, color and imagery, menus and forms in all their states, and behavior across phone, tablet and desktop screens. Server logic, databases and hosting don’t. Neither do payment processing or login systems.
The term covers websites. Web apps with heavy logic, such as editors and dashboards, borrow web design for their screens and add product design and engineering on top.
Web Design, UX Design and UI Design
These terms get mixed up constantly. They overlap, but each one produces something different.
The user experience side looks at the whole visit. What does the person want, how many steps does it take, where do they get stuck? The outputs are research findings, user flows and sitemaps.
The user interface is narrower. It’s the buttons, menus, forms and screens a visitor actually touches.
Web design draws on both and adds the website layer: page templates, responsive behavior and the visual identity of the brand.
A designer can ship a good-looking site without any UX research. Visitors find the gaps anyway.
Web Design vs Web Development
Designers decide how a site looks and behaves. Developers build that decision in code so it runs in a browser.
What a designer hands over is page layouts and templates, rules for type, color and spacing, and the interaction states (hover, focus, error, empty). What comes back from the developer is working HTML, CSS and JavaScript, plus server logic, databases and integrations, hosting, deployment, performance fixes and forms that actually send data somewhere.
The split follows the line between what a visitor sees and what a server does. The visible layer belongs to front-end development, which turns the approved design into code a browser can render.
Databases, authentication and payment processing sit in the back end, and visitors never see any of it. A designer rarely touches it.
Most designers don’t write production code. Many know enough HTML and CSS to judge whether a design can be built as drawn.
The handoff breaks in predictable places. Design files often show only the best-case state, so empty, error and loading screens get invented during the build. Layouts get drawn at one screen width with no rule for the sizes in between. And fonts, colors and spacing drift from the file because nobody specified the values.
Some roles sit in the overlap. Product designers work on both sides, and no-code builders let a designer publish without a developer.
A designer who can read CSS saves review rounds. It’s a bonus, not a requirement.
Core Elements of Web Design
Layout, typography, color, imagery and navigation make up the core of any web design. Hierarchy and white space decide how they fit together, and consistency keeps the whole thing from falling apart from one page to the next.
Layout and Visual Hierarchy
Visitors can judge a page’s visual appeal in 50 milliseconds, according to a Carleton University study in Behaviour and Information Technology (Lindgaard et al., 2006). At that speed nobody reads a word, so structure and visual weight carry the first impression.
A grid fixes where content goes. The visual hierarchy of the page ranks that content, so the eye lands on the most important thing first.
Size, contrast and position set the hierarchy. White space helps too, since it groups related items and gives the eye somewhere to rest.
Reading behavior shows where that weight should go. In Nielsen Norman Group’s 2006 eyetracking study of 232 users, text-heavy pages drew most fixations along the top and the left edge, the F-shaped reading pattern.
NN/g’s later research found the pattern on both desktop and mobile, and also listed other scanning patterns. Treat F as the default for unformatted text, not as a law.
Typography and Color
Typography sets reading comfort. The typeface matters, but so does a size scale that separates headings from body text and a line length short enough to follow. Those decide whether copy can be skimmed at all.
Color sets mood and priority. A primary color and one accent, backed by some neutrals, keep pages consistent and leave the accent free for calls to action.
Text must also stay legible against its background, which makes color choice an accessibility decision as well as a visual one.
Consistency is a rule here, not a taste. Same heading style, same button color, same spacing on every page.
Two typefaces are usually enough. A third rarely earns its page weight.
Imagery, Navigation and Calls to Action
Images carry mood and proof, and every file adds load time. Google’s web.dev guidance recommends width and height attributes on images so the browser reserves space before they load and the page does not shift.
Navigation answers one question: where can I go from here? Menus usually come as dropdown, mega or hamburger, and the primary set should hold only the pages visitors need most.
- Write calls to action as verb phrases (“Get a quote”, not “Submit”).
- Give each page one primary action, and repeat it at the bottom if the page runs long.
A page with three equal-weight buttons has no call to action. It has a menu.
Types of Web Design
Sites get sorted along a few different axes, and any single site sits somewhere on each of them.
Static and Dynamic Sites
A static site hands every visitor the same prepared pages, so changing content means editing files. Dynamic sites assemble pages from stored data or user input. Content can differ by visitor and update without touching the layout.
A small brochure site that changes twice a year does not need a database. Static is enough.
Dynamic sites trade that simplicity for a server and a database that need updates and security patches.
Responsive and Adaptive Design
Ethan Marcotte coined the term responsive web design in an A List Apart article published on May 25, 2010. He defined it as fluid grids and flexible images, tied together with media queries.
A site built with responsive layouts reflows as the viewport changes, from three columns on a desktop to one on a phone. Google’s web.dev documentation credits Marcotte with the original definition.
| Term | Origin | Meaning |
|---|---|---|
| Responsive web design | Marcotte, 2010 | One layout that reflows with fluid grids, flexible images and media queries |
| Adaptive layouts | Common usage | Separate page layouts, one served per screen size |
| Adaptive web design | Gustafson, 2011 | Progressive enhancement across markup, CSS and JavaScript |
The word adaptive splits in two. In the layout sense, adaptive design serves a separate fixed layout per screen size, and maintaining several templates means every change is made more than once.
Aaron Gustafson’s 2011 book Adaptive Web Design uses the term for progressive enhancement, a broader idea than layout. A project brief that says “adaptive” needs a definition attached.
Breakpoints are the screen widths where a layout changes. web.dev advises setting them where the content starts to look wrong, not at the sizes of specific devices.
Starting from the small screen and widening until the layout breaks keeps the number of breakpoints low.
CMS-Based Design
A content management system lets people create and update pages without editing code for every change, according to the HTTP Archive Web Almanac 2025. It splits CMSs into monolithic ones, where a single system stores, presents and delivers content, and headless ones that separate content management from the site that displays it.
For design work the difference matters. A monolithic CMS ties the designer to the theme and block system, while a headless setup leaves the front end open.
Market-share figures disagree. W3Techs counted WordPress at 58.3% of sites with a known CMS on 25 October 2026, while the Web Almanac 2025 puts it at roughly 64% of CMS-driven sites.
The Web Almanac has flagged since at least its 2020 edition that its CMS figures differ from W3Techs because the datasets differ. Quote neither as the single truth.
CMS-based design fits teams that publish often. For a rarely changed site, it adds updates and plugins to maintain without adding value.
The Web Design Process, Step by Step
Each stage of a web design project produces a file or a decision that the next one depends on, so skipping a stage pushes the problem downstream.
- Discovery and brief, covering goals, audience, scope and a content inventory.
- Sitemap and wireframes for page structure and content placement, with no styling yet.
- Visual mockups that apply color, typography and imagery to the wireframes.
- A clickable prototype, which links the mockups so testers can follow real tasks.
- Usability testing and revisions, meaning observed sessions followed by fixes.
- Design system and handoff, with styles, components and specs for developers.
- Launch review, checking the built site against the approved design.
A wireframe is a low-fidelity page layout. Boxes for content, no color, no type choices. Disagreements about structure are cheapest to settle here.
The mockup adds color, typography and imagery on top of that layout, so stakeholders can judge the look before anyone writes code.
Nielsen and Landauer’s 1993 model, summarized by Nielsen Norman Group, puts the share of usability problems found by 5 test users at 85%. NN/g recommends 3 rounds of 5 users over a single round of 15, because the redesign between rounds removes problems before the next group sees them.
The rule covers qualitative testing of one user group. Sites with several distinct audiences need more participants, and so do quantitative studies.
Projects usually stall for dull reasons. Content arrives after layouts are approved, so the pages were designed around placeholder text. Scope changes after mockup sign-off. Too many reviewers give feedback at once, and nobody can tell which comments win.
Tools and Technologies Web Designers Use
The toolkit splits into design apps for layouts and prototypes, front-end languages for what the browser renders, and builders or CMS platforms for publishing.
| Tool | Job | Platform |
|---|---|---|
| Figma | Interface design, prototyping, developer handoff | Browser, macOS and Windows apps |
| Sketch | Interface design and prototyping | macOS only for editing |
| Webflow | Visual site building | Browser-based |
| WordPress | CMS with themes and blocks | Self-hosted or hosted |
Design and Prototyping Apps
Page layouts, clickable prototypes and component libraries get built in design apps.
Most teams now design websites in Figma, which also covers handoff through Dev Mode. Sketch fills the same role for Mac-only teams, and its web app is for viewing and inspecting, not editing.
Adobe XD has been in maintenance mode since 2023, which means bug and security fixes only. Any guide that still recommends it for a new project is stale as of 2026.
Languages and Layout Modules
HTML holds the content together. CSS handles layout, type and color, and JavaScript adds interaction, from menus to form validation.
Grid handles two-dimensional layouts and Flexbox lines items up along a single row or column. Between them they carry most layout work. Both are part of CSS and make flexible grids far easier than older floated layouts.
Bootstrap packages a responsive grid and ready-made components, so a team skips writing them from scratch. The cost is a recognizable default look unless the styles get overridden.
Site Builders and CMS Platforms
WordPress is a CMS where themes and blocks control the design. Webflow is a visual builder that outputs HTML and CSS. Wix and Squarespace lean on templates and drag-and-drop editors.
Most builders host the site themselves, so the design lives on their platform. Moving away usually means rebuilding it, so check what a platform exports before committing.
For a small business site, a builder skips weeks of work. For a custom component system, it gets in the way.
Accessibility and Performance Standards a Web Design Must Meet
A web design gets measured against WCAG 2.2 for accessibility and Core Web Vitals for loading, responsiveness and visual stability. A design can look finished and still fail both.
| Requirement | Standard | Threshold |
|---|---|---|
| Text contrast | WCAG 2.2, success criterion 1.4.3 (AA) | 4.5:1, or 3:1 for large text |
| Target size | WCAG 2.2, success criterion 2.5.8 (AA) | 24 by 24 CSS pixels, with exceptions |
| Loading (LCP) | Core Web Vitals | 2.5 seconds or less |
| Responsiveness (INP) | Core Web Vitals | 200 milliseconds or less |
| Visual stability (CLS) | Core Web Vitals | 0.1 or less |
WCAG 2.2
The W3C published WCAG 2.2 as a Recommendation on 5 October 2023, adding new success criteria to WCAG 2.1 and removing the obsolete Parsing criterion.
Conformance runs from A up through AA to AAA, and AA is the level most briefs and laws name.
The criteria that reach a designer are visual ones: text contrast, target size and focus visibility. Handling web accessibility in the design file means fixes land in the design system once, not on every page after launch.
Core Web Vitals
Interaction to Next Paint replaced First Input Delay as a Core Web Vital on 12 March 2024, according to Google’s web.dev. Guides that still list FID are out of date.
Each metric is judged at the 75th percentile of page loads across mobile and desktop, and a page passes only when all three meet their targets. Google’s documentation still lists the thresholds in the table above as of August 2026.
Design choices drive the scores. The LCP element is usually the hero image, a heading or a large text block, so the hero decision weighs heavily on the loading score.
Passing is not a ranking guarantee either. Google Search Central states that good numbers in the Core Web Vitals report do not guarantee good rankings.
Where Designs Fail These Standards
Low-contrast text appears on 83.9% of the top one million home pages, according to the WebAIM Million 2026 report. It has been the most common failure in every edition of the study since 2019.
Contrast is a design decision, not a code bug. The color contrast of every text and background pair is fixed the moment the palette is chosen.
Regulation adds a version question. The European Accessibility Act has applied since 28 June 2025 and leans on EN 301 549, which cites WCAG 2.1 Level AA for web content, while WCAG 2.2 is the current W3C version.
The act covers consumer-facing services including e-commerce, so scope depends on what the site sells.
Design to 2.2 AA. WCAG 2.2 builds on 2.1, so the stricter target covers both.
How Much Does Web Design Cost, and How Long Does It Take?
Web design cost tracks scope, not the label on the quote. Design-only work, full builds and agency averages produce very different numbers, and each is accurate for what it counts.
Published Price Ranges
- WebFX (2026) puts web design at $1,000 to $30,000 on average, based on a survey of US marketing professionals.
- Phenomenon Studio (2026) gives $5,000 to $150,000 for a full project that includes discovery, UX research, development and quality assurance.
- Clutch (2026) reports that most reviewed projects cost under $10,000.
- The average reviewed project on Clutch (2026) costs $38,105.39 and lasts 7 months.
WebFX and Phenomenon Studio disagree because Phenomenon counts research and development inside the price. When comparing quotes, check which of those the number includes.
Both Clutch cost figures hold. A few large projects pull the average far above the typical price, so budget against the typical figure.
What Drives the Price
The number moves with page and template count, with custom design versus a template, with copywriting and photography needs and with integrations such as payments, booking and CRM. Who builds it, whether a builder, a freelancer or an agency, changes it too.
Hosting, domain registration and maintenance recur after launch, so a quote for the build alone understates the yearly cost.
How Long It Takes
The build route sets the calendar. GoDaddy’s guide puts a simple builder site at a few hours to a day and a designer-built one at a few weeks.
Agency guides quote weeks for a standard business site, while Clutch’s reviewed projects run far longer on average. The two count different populations, so neither contradicts the other.
Quote a timeline from page count, build route and content readiness, not from a headline average.
Choosing Between a Template, a Site Builder and Custom Design
Start with the cheapest route that meets a documented need. A template or builder covers most small sites, and custom design pays off only when a requirement cannot be met inside the platform.
| Route | Relative cost | Speed to launch | Main limit |
|---|---|---|---|
| Template on a CMS | Low | Days to weeks | Layout limited to what the theme supports |
| Site builder | Low, recurring subscription | Hours to days | Design lives on the host platform |
| Custom design | Highest | Weeks to months | Every change needs a designer or developer |
For a small business or portfolio site, a template or builder is enough. A content-heavy site with several editors does better on a CMS with a custom theme. E-commerce usually belongs on a hosted store platform, with custom work only for checkout needs the platform cannot meet. A complex web app is the case that calls for custom design backed by a design system.
Custom design is not the safe default. It adds cost and makes every later change depend on a designer.
Platforms also have a ceiling. The HTTP Archive Web Almanac 2025 finds that high-traffic sites favor platforms built for complex workflows and deep customization, and that builders such as Wix are almost absent among the top 10,000 sites.
The reverse failure is just as real. A builder site that outgrows its platform costs a rebuild, so a project with complex integrations planned for year one should start custom or headless.
Web Design FAQ
Is web design the same as graphic design?
No. Graphic design produces fixed visuals such as logos, posters and print layouts. Web design adds interaction, navigation and layouts that reflow across screen sizes, so the designer plans how every state of a page behaves.
Does web design affect SEO?
Yes, though content relevance still comes first. Google Search Central says a great page experience can contribute to success in Search when many helpful pages compete for the same query.
Responsive layouts and fast loading are the design-side factors.
When did web design begin, and who shaped it?
The first website went live at CERN in December 1990, built by Tim Berners-Lee on a NeXT computer. He announced the web to the public on 6 August 1991, the date often given for its start. It was plain text and links, and the original page was not preserved; the earliest surviving copy dates from 1992.
Berners-Lee founded the W3C in October 1994 to maintain web standards.
How do you become a web designer?
Build a portfolio of finished projects and learn layout, typography, HTML and CSS, a design tool such as Figma, and the accessibility basics. The Occupational Outlook Handbook lists requirements from a high school diploma to a bachelor’s degree, and says work samples can stand in for credentials.
How much does a web designer earn?
Web and digital interface designers in the US earned a median of $104,000 a year in May 2025 (US Bureau of Labor Statistics). The figure covers US employees, so freelance rates and pay in other countries differ.
Keeping a Web Design Working After Launch
A web design keeps working when it is re-measured against WCAG 2.2 and Core Web Vitals after every template change and at least once a year. A rebuild is justified only when the platform blocks a passing score.
Run the checks in a set order. Field data from real visitors comes first, then fixes in the design system, then a usability retest.
Field data leads because it shows where visitors actually fail. A design-system fix comes second because one change reaches every page, and the retest closes things out by confirming the fixes introduced no new problems.
In return you take on a recurring maintenance cost in place of a periodic redesign bill.
Google’s Web Vitals documentation says threshold changes arrive on prior notice with an annual cadence, so a yearly check also catches new targets (verified October 2026).
A web accessibility checklist sets the scope of the first audit.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
