Website design examples by business type: layouts that work and why

Website design examples make sense once you sort them by job

Most people who search for website design examples are hunting for a look: a colour, a font, a striking first picture. The look is the part that travels worst. A bakery and a law firm can share a palette and nothing else, because one sells tomorrow's bread and the other needs a careful first call. What travels well is the pattern underneath: what sits on the first screen, how many steps lead to the action, where the contact details live.

So this guide sorts examples by the job a site must do: sell a service, sell products, take bookings, show work or inform the public. The best documented examples are public design systems, because they publish their reasons. The GOV.UK Design System, maintained by a team at the Government Digital Service, offers styles, components and patterns for tasks such as filling in forms. The US Web Design System calls itself the design system for the federal government.

A service business site: the offer, the proof and a contact block

For a plumber, an accountant or a translation agency, the layout that works puts the offer on the first screen: what you do, for whom, where, and one button to ask for a quote. Each service gets its own page, because people search for each one in their own words. Proof follows, and it must be specific. Google's guidance on people-first content asks whether it is self-evident who authored a page and whether it shows first-hand expertise. On a service site that means real names, real projects and conditions in writing.

For the contact block, the GOV.UK Design System pattern for contacting a team is worth copying almost as it is: a phone number with opening hours, an email address with an expected response time, the channels in the same order everywhere, social media last and any charges explained. A firm that writes down how fast it answers makes a promise it can be held to.

An online shop: category pages, product facts and real photographs

A shop has a deeper structure: home page, categories, product pages, cart, checkout. Google's documentation on ecommerce site structure asks that pages be reachable through the site's navigation and that important pages, such as a best-selling product, be linked from the home page. Its product structured data guide says shoppers can see price, availability, review ratings and shipping information right in search results, at Google's discretion. The design lesson is to put the same facts on the page itself, next to the buy button.

Photographs carry much of the selling. Google's image guidance says high-quality photos appeal to users more than blurry, unclear ones, recommends placing images near relevant text and prefers descriptive alt text such as “Dalmatian puppy playing fetch” to a bare “puppy”. For a shop that means real pictures of the actual item from several angles, with a description beside them.

Booking appointments: what the GOV.UK driving test service shows

One of the clearest public booking examples is the GOV.UK page where learner drivers book a practical test. Before its single Start now button, it says who can book, that new appointments are released at 6am every Monday and that the service runs from 6am to 11:40pm. It then lists what you need: a UK driving licence number, a credit or debit card and, optionally, your instructor's reference number.

That page follows a documented pattern. The GOV.UK Design System says a start point should give just enough information to show what the service does and whether it meets the user's need, including cost and roughly how long it takes. Its question pages pattern then advises one question per page, a button labelled Continue rather than Next and no asterisks on mandatory fields. A clinic or a salon can follow the same order: the service, the date and time, the contact details.

For small to medium-sized transactions, the Design System places a check answers page just before the confirmation, with a change link for each answer. The confirmation gives a reference number if there is one, what happens next and when, and contact details. WCAG 2.2 adds a related rule, Redundant Entry: information already given in the same process should be filled in or offered for selection.

Portfolio and public information sites: let the work speak first

For a photographer, an architect or a design studio, the work is the content and the layout should step aside. The usual pattern is a grid of projects, each opening a page with large images and a short account of the task. The GOV.UK guidance on images fits portfolios well: use photography when a lifelike representation matters, avoid generic stock photography and avoid images that contain text. Keep captions as real text beside the pictures, where people and search engines can read them.

Sites that inform the public, such as a council, a school or a help centre, exist to help people find one answer quickly. The government design principles behind GOV.UK start with user needs and include “This is for everyone”, with the line that accessible design is good design. The GOV.UK Design System navigation guidance adds that a menu is not a site map and need not list every part of a service.

Accessibility rules that shape a design: contrast, targets and labels

The Web Content Accessibility Guidelines come from a working group of the W3C's Web Accessibility Initiative. WCAG 2.2, published on 5 October 2023, adds nine success criteria to WCAG 2.1. Contrast (Minimum), at level AA, asks for at least 4.5:1 for text and 3:1 for large text, Target Size (Minimum) for pointer targets of at least 24 by 24 CSS pixels with some exceptions, and Resize Text for text that can grow to 200 percent without loss of content. Whether meeting WCAG is a legal duty for your business depends on the country and sector, so check that with a specialist.

For forms, the GOV.UK text input component says every text input must have a label, visible in most cases, and warns against placeholder text in place of a label, because it disappears once people start typing and browser default styles often fail contrast requirements. It also advises sizing each field for the content it expects.

What makes a website feel modern in 2026, beyond the trend of the year

Speed is felt before any font is noticed. The web.dev guide to Web Vitals sets three targets: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less and Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of page loads. Google Search Central says Core Web Vitals are used by its ranking systems, though good scores do not guarantee top positions and relevance comes first.

The phone is the main screen, not a smaller copy. Google's documentation on mobile-first indexing says Google uses the mobile version of a site's content for indexing and ranking, and asks for the same content, headings and image alt text as on desktop. The web.dev guide to responsive design adds that pages should not block zooming, and recalls that classic readability theory suggests 70 to 80 characters per line. Since GOV.UK Frontend v6.0.0, GOV.UK body text is 19px on small screens as well as large ones, for legibility. Real photographs of the product, the team and the premises do the rest.

From a folder of website examples to a brief a designer can price

Collect website design examples as a board of patterns, not a folder of screenshots to clone. The GOV.UK guide to copyright says protection is automatic and covers original artistic work, including photography, and written work such as software and web content. Another company's text, photos and code are therefore not raw material. A start page with one button is a common solution; for anything closer to copying, ask an intellectual property specialist about your case.

For each example, write three lines: the link, the job that site does and the one pattern you want from it. Then add what only you can supply: the list of pages, the single action each page leads to, your own photographs and texts, the countries and languages you sell in, and who answers a request and how fast. That sheet describes a structure, not a mood, so a designer can estimate it.

A template is a fair choice when its pattern already fits the job, such as a simple portfolio or a one-language service site. Ordering the design makes sense when the job needs its own flow, like bookings, a catalogue or several languages, when contrast, speed and form rules must be met, or when your hours are worth more in the business. VITON13 Studio designs business websites for clients in any country, remotely. Bring the sheet; the linked guides cover the cost and how to judge a studio's portfolio.