Web design: a complete guide

Web design is the practice of planning and creating the visual appearance, structure and user experience of websites. It covers how pages are laid out, how information is organised, how text, colour and images are used, and how people move through a site to find what they need. Web design is closely related to, but distinct from, web development, which is the programming that makes a website function.

This guide gives an overview of the field: its history, its core principles, the standards it relies on, the usual design process and the questions a business should ask about it. Sources are listed at the end.

Definition and scope

In the narrow sense, web design refers to the visual and interaction design of web pages: layout, typography, colour, imagery and the behaviour of interface elements such as menus, buttons and forms. In the broader sense, it also includes:

• Information architecture: how content is grouped, labelled and connected.
• User experience (UX) design: how easy, efficient and pleasant a site is to use.
• Content design: writing and structuring text so that people can scan and understand it.
• Accessibility: making sites usable by people with disabilities.
• Responsive design: making a site work on screens of every size.

Web design and web development

The two are often done by the same team but involve different skills. A web designer decides what the site should look like and how it should behave, typically producing wireframes, mockups or prototypes. A web developer builds it using HTML for structure, CSS for presentation and JavaScript for behaviour, and connects it to servers, databases or content management systems. In practice the boundary is fluid: many designers write CSS, and many developers make design decisions.

History

The first websites (1991–1995)

The World Wide Web was invented by Tim Berners-Lee at CERN, and the first website went online in 1991. It is still available at info.cern.ch [1]. Early pages were plain documents: text, headings and links, with almost no control over appearance. Images could be embedded from 1993 onwards, as graphical browsers spread.

Tables, plug-ins and the first standards (1995–2005)

As the web became commercial, designers looked for ways to control layout. HTML tables, intended for tabular data, were widely used to position page elements, and plug-ins such as Macromedia (later Adobe) Flash were used for animation and interactive sites. JavaScript appeared in 1995.

Cascading Style Sheets (CSS) were introduced to separate presentation from content; the first version, CSS level 1, became a W3C Recommendation in December 1996 [2]. Inconsistent browser support slowed adoption, and the early 2000s saw a "web standards" movement that encouraged designers to build with semantic HTML and CSS rather than tables and proprietary technologies.

The mobile shift and responsive design (2007–2015)

The arrival of smartphones with full web browsers, starting with the iPhone in 2007, created a new problem: sites designed for desktop screens were hard to use on small ones. Some organisations built separate mobile sites. Around 2010 the idea of responsive web design took hold: a single site whose layout adapts to the screen using fluid grids, flexible images and CSS media queries [10][11]. The approach became the industry norm. HTML5, published as a W3C Recommendation in 2014, standardised new elements for structure, audio and video [3], reducing the need for plug-ins.

Modern layout, performance and accessibility (2016–present)

CSS Flexbox and CSS Grid, widely supported in browsers by 2017, gave designers native tools for complex layouts. Adobe ended support for Flash at the end of 2020. Search engines increasingly evaluated the mobile version of sites: Google moved to mobile-first indexing, using the mobile version of a page for indexing and ranking [4]. In 2020 Google introduced Core Web Vitals, a set of user-experience measurements of loading, interactivity and visual stability; in March 2024 Interaction to Next Paint (INP) replaced First Input Delay as the interactivity measure [5][6].

Accessibility moved from good practice to legal requirement in many places. The Web Content Accessibility Guidelines (WCAG) 2.2 were published by the W3C in 2023 [7], and in the European Union the European Accessibility Act applies to many products and services, including e-commerce, from 28 June 2025 [8].

Core principles of visual design

Visual hierarchy

Hierarchy tells visitors what to look at first. It is created with size, weight, colour, contrast and position. A clear page usually has one dominant element, typically the main headline or offer, a small number of secondary elements and a clearly visible primary action.

Layout and grids

Most websites are designed on a grid: a set of columns and spacing rules that keep elements aligned and consistent. Grids make pages easier to scan and make it easier to adapt layouts to different screen widths.

Typography

Text is the main content of most websites, so typography carries much of the design. Good web typography considers a comfortable reading size, a line length of roughly 50 to 75 characters, enough line spacing, a limited number of typefaces and clear differences between heading levels. Web fonts allow brands to use their own typefaces, at a cost in loading time that has to be managed.

Colour and contrast

Colour expresses the brand and guides attention, but it must keep text readable. WCAG 2.2 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text [9]. Colour should never be the only way information is conveyed, for example an error marked only in red.

White space and consistency

White space, or empty space, separates groups of content and makes pages easier to read. Consistency, using the same styles for the same kinds of elements, helps visitors learn how a site works. Many organisations formalise this in a design system: a shared library of colours, type styles, components and rules.

Usability and user experience

Usability describes how easily people can achieve their goals on a site. In our work we check every interface against a few simple rules: the visitor always knows where they are and what is happening; things that look the same behave the same; the site uses the visitor's words, not internal jargon; mistakes are prevented where possible and easy to fix where not; and nothing on the page competes with the one action that matters most.

People rarely read web pages word by word. They scan: headings, the first words of paragraphs, lists and buttons. This is why web content is best written with descriptive headings, short paragraphs, lists and the most important information first.

For business websites, usability is closely tied to results: visitors should be able to understand what the business offers, trust it and take the next step, such as calling or sending an enquiry, without effort. See what a small business website needs to bring in enquiries.

Responsive and mobile-first design

Responsive design uses flexible layouts and CSS media queries [10] so that one website adapts to any screen size [11]. Mobile-first design is a related approach in which the layout is designed for small screens first and then enhanced for larger ones. It forces designers to prioritise the most important content and actions, and it reflects how a large share of visitors now arrive.

Accessibility

Web accessibility means that people with disabilities can perceive, understand, navigate and interact with websites [12]. WCAG organises its requirements around four principles, often abbreviated as POUR: content must be perceivable, operable, understandable and robust [7]. In practice this includes:

• text alternatives for images
• sufficient colour contrast
• a site that can be used with a keyboard alone
• clear headings and labels
• captions for video
• respecting user settings such as reduced motion

Accessibility also benefits users without disabilities, for example people using a phone in bright sunlight or with one hand.

Performance

How fast a page loads and responds is part of its design. Google's Core Web Vitals measure three aspects of the experience [5]:

• Largest Contentful Paint (LCP): how quickly the main content appears; 2.5 seconds or less is considered good.
• Interaction to Next Paint (INP): how quickly the page responds to input; 200 milliseconds or less is considered good.
• Cumulative Layout Shift (CLS): how much the layout moves unexpectedly while loading; 0.1 or less is considered good.

Design decisions such as image sizes, the number of fonts, animations and third-party scripts have a direct effect on these numbers [13].

Content and information architecture

Information architecture is the organisation of a website's content: which pages exist, how they are grouped in the navigation and how they link to each other. Common principles are to use the visitor's language rather than internal terms, to give each main topic its own page and to keep navigation shallow and predictable.

Content and design are developed together. Placeholder text often hides problems that only appear when real content, with its real length, is added.

Web design and search engines

Search engine optimisation (SEO) and web design overlap. Search engines recommend clear page titles and descriptions, descriptive headings, meaningful link text, a logical site structure and fast, mobile-friendly pages [14]. Many of these are also good design practice. Internal links, between related pages of the same site, help both visitors and search engines understand which pages are important. For a practical starting point, see SEO for a business website: where to start and why local SEO works.

The web design process

Although every studio has its own method, most projects follow similar stages:

1. Discovery: understanding the business, its audience, its goals and its competitors.
2. Information architecture: deciding which pages are needed and how they connect, often as a sitemap.
3. Wireframes: simple layouts that fix the structure of key pages before visual design.
4. Visual design: applying the brand, typography, colour and imagery, often in a design tool such as Figma, sometimes as an interactive prototype.
5. Development: building the site in HTML, CSS and JavaScript, or in a content management system.
6. Testing: checking the site on different devices and browsers, for accessibility, performance and errors.
7. Launch: publishing the site on a domain, with hosting and a security certificate.
8. Maintenance and iteration: updating content and software, fixing problems and improving the site based on how people use it.

The last stage is often underestimated. A website is not finished at launch; it needs updates, security patches and improvements over time. For what a business site should include today, see what a modern business website needs in 2026.

Technologies

• HTML defines the structure and meaning of content; it is maintained as a living standard by the WHATWG [15].
• CSS controls presentation: layout, colour, typography and animation [16].
• JavaScript adds interactivity.
• Content management systems (CMS) let non-technical people edit a site.
• Static site generators and modern frameworks build fast sites from templates and content files.

The W3C publishes many of the standards the web is built on [17].

Legal and ethical considerations

Websites that collect personal data in the European Union must comply with the General Data Protection Regulation (GDPR) [18], which affects the design of contact forms, cookie consent and analytics. Accessibility law, such as the European Accessibility Act, applies to many commercial sites [8]. Ethical design also avoids "dark patterns": interfaces that trick users into choices they did not intend, such as hidden costs or consent buttons designed to mislead.

Evaluating a website

A website can be evaluated against its goals with a combination of methods:

• Usability testing: watching real people try to complete tasks.
• Analytics: where visitors come from, which pages they visit and where they leave.
• Performance measurement: Core Web Vitals and loading times.
• Accessibility audits: automated checks plus manual testing against WCAG.
• Business results: enquiries, bookings or sales.

For a practical checklist, see 10 features every great website should have and 10 mistakes that are killing your business online.

See also

• How much does a website cost in 2026?
• Cheap vs. professional website: the real difference
• How to choose the right web agency
• Why separate case study pages help SEO
• How Studio V1 designs and builds a website

References

1. CERN. "info.cern.ch: the website of the world's first-ever web server." info.cern.ch
2. W3C. "Cascading Style Sheets, level 1." W3C Recommendation, December 1996. w3.org/TR/CSS1
3. W3C. "HTML5." W3C Recommendation, October 2014. w3.org/TR/html5
4. Google Search Central. "Mobile site and mobile-first indexing best practices." developers.google.com
5. web.dev (Google). "Web Vitals." web.dev/articles/vitals
6. web.dev (Google). "Interaction to Next Paint is officially a Core Web Vital." March 2024. web.dev/blog/inp-cwv-launch
7. W3C. "Web Content Accessibility Guidelines (WCAG) 2.2." W3C Recommendation, 2023. w3.org/TR/WCAG22
8. European Union. "Directive (EU) 2019/882 on the accessibility requirements for products and services" (European Accessibility Act). eur-lex.europa.eu
9. W3C WAI. "Understanding Success Criterion 1.4.3: Contrast (Minimum)." w3.org/WAI
10. MDN Web Docs. "CSS media queries." developer.mozilla.org
11. MDN Web Docs. "Responsive design." developer.mozilla.org
12. W3C WAI. "Introduction to Web Accessibility." w3.org/WAI
13. MDN Web Docs. "Web performance." developer.mozilla.org
14. Google Search Central. "SEO Starter Guide." developers.google.com
15. WHATWG. "HTML Living Standard." html.spec.whatwg.org
16. W3C. "Cascading Style Sheets." w3.org/Style/CSS
17. W3C. "Standards." w3.org/standards
18. European Union. "Regulation (EU) 2016/679" (General Data Protection Regulation). eur-lex.europa.eu