Web Design Elements: A Visual Guide with Real Examples

When people say a website “looks professional”, they are usually reacting to something they cannot name. Look closer and it is almost always a handful of ordinary elements doing their jobs well: a clear headline, readable type, a calm palette, one obvious button. The parts themselves are the same on a bank and on a skateboard magazine. What changes is how much attention each part gets and the order the eye moves through them.

This guide walks through the elements that almost every website is made of, with examples from the gallery. Each section links to a longer article as they are published.

Start with hierarchy, not decoration

Before the individual elements, one idea ties them together. Visual hierarchy is the order in which the eye moves through a page. Nielsen Norman Group defines it as arranging elements so that people see them in order of importance, and names three main tools: scale, colour and contrast, and grouping. Their advice is to keep the options few: no more than three sizes and three levels of contrast in a complex design.

Hierarchy matters because people do not read web pages the way they read books. NN/g’s eyetracking research describes the F-shaped pattern, where readers scan across the top, then a little lower, then down the left edge, and miss much of what sits to the right. The pattern appears when nothing on the page tells the eye where meaning is. Good hierarchy replaces that default with a path you chose.

Keep that in mind as you read the rest of this guide: every element is a tool for directing attention, and the best sites use each one with restraint.

The hero section

The hero is the first screen: usually a headline, a line of supporting text, a call to action and an image or product view. It answers three questions in a few seconds: what is this, is it for me, and what do I do next?

The strongest heroes in the gallery commit to one idea. Vercel uses a two-word headline, the brand triangle and almost nothing else. Notion pairs a very large headline with small hand-drawn sketches and one blue button. Airbnb’s host page replaces the usual hero image with an earnings estimate, so the visitor gets an answer before being asked anything.

What to watch: a headline that describes the outcome rather than the company, one primary action, and an image that shows the real thing rather than decoration.

Navigation

Navigation is the map of the site. It should be short, labelled in the visitor’s words and visible. NN/g’s 2016 study of hidden navigation found that hiding menus behind an icon on desktop reduced discoverability by more than 20 percent, and recommended visible navigation wherever there is room for it.

The gallery is full of short menus. Assemble Papers offers just Stories, About, Join and Search. Charlotte Tilbury keeps its main menu to Makeup, Skincare and Best Sellers, even with a huge catalogue behind it. Roberta Ungaro numbers her sections from 0 to 5, which turns the menu into part of the design.

What to watch: five to seven top items at most, labels a stranger would understand, and the most important action, such as Book or Shop, set apart from the rest.

Typography

Type carries most of the content and much of the personality. Two decisions matter most: the typeface, and the reading measure, meaning the size, line length and spacing of body text.

Some sites in the gallery are recognisable from type alone. The New Yorker carries its print typeface onto the web. Mat Voyce fills the screen with a huge condensed cyan face. HubSpot sets its headline in a serif, which is unusual for software and makes it feel warmer. At the other end, Marga Navarro sets her whole site in a monospaced font that signals she works well with engineers.

What to watch: one or two families, a clear difference between headings and body text, and body text that is comfortable to read on a phone.

Colour

Colour sets the mood and, more practically, marks what matters. The most effective palettes in the gallery are small: one or two brand colours, a neutral background and an accent reserved for actions.

Linear works on a near-black canvas with a muted accent used sparingly. Vessel Magazine stands out from almost every other publication simply by printing on peach instead of white. Charlotte Tilbury goes all in on burgundy and gold because the brand lives on its mood.

What to watch: enough contrast between text and background to read easily, an accent colour that means “click here” and is not used for anything else, and a palette that still works when a photo sits behind the text.

Imagery

Images do more work than any other element and are the easiest to get wrong. Generic stock photos tell visitors nothing, and they learn to skip them. Real photographs of the product, the place or the people behind it do the opposite, and that is what the strongest sites in the gallery use.

Patagonia uses candid outdoor photos of real people rather than studio shots. Away crops tightly on a suitcase detail so luggage looks like a design object. Space NK swaps photography for a full-bleed illustration in its seasonal campaign. Many SaaS sites, including Linear and Figma, use the product itself as the main image.

What to watch: images that show the real thing, a consistent style across the site, and file sizes that do not slow the first screen.

Buttons and calls to action

A call to action is the step you want visitors to take. Two rules cover most cases: make the primary action unmistakable, and make every other action quieter.

Figma uses a black button as the only strong colour in its copy column. Shopify’s free trial page has one field and one button and nothing else that competes. Zoho Mail puts a red submit button at the end of a form that sits above the fold. On longer pages, the same action repeats at natural stopping points.

What to watch: button labels that describe the outcome (“Get your formula” rather than “Submit”), one visual style for primary actions and another for secondary ones, and enough space around buttons on touch screens.

Proof and trust

Proof is anything that answers “why should I believe this?”: customer logos, reviews, guarantees, numbers, press mentions. It often sits directly under the hero.

Stripe and Vercel run a row of customer logos along the bottom of the first screen. The Fish Society answers its biggest problem, trust in buying frozen fish online, with a scrolling ticker of reviews, delivery promises and a money back guarantee. Ooni follows its offer with a row of shipping, returns and guarantee notes.

What to watch: proof that matches the doubt your visitors actually have, and specific claims rather than vague ones.

The footer

The footer is where people go when they are looking for something specific: contact details, policies, a full list of sections, or the company behind the site. It is also where many sites quietly lose trust by leaving broken links and old dates.

What to watch: a complete, well-grouped set of links, contact details that work, and legal and policy pages that are easy to find. A dedicated article on footers covers the patterns in detail.

How the elements work together

No element is good or bad on its own. A huge headline works on Vercel because there is almost nothing else on the page, and it would fail on WIRED, where a dense grid of stories needs a quieter type scale. The useful question is always relative: compared with everything else on this screen, how much attention does this element deserve?

A practical way to check your own design is the squint test. Step back or blur the screen and see what is still visible. If the headline, the main image and the primary button stand out and everything else falls back, the hierarchy is working. If five things shout at once, something needs to be quieter.

The other guides on this site build on these elements: how to design a website puts them in order for a new project, and WordPress website design shows how to control them in WordPress. The articles below look at each element in depth.

Articles in this guide