Website Design Examples: 836 Sites, Sorted by Idea

Type first

The largest group. No photograph carries the page, and the headline is set big enough to be the design. Palmetto runs a heavy rounded display face at over 100px in near black on cream with one hot orange doing all the pointing. Skender sets 100px type straight over site footage. Call Thelen sets cream capitals so large the line runs off the bottom of the screen. Midi puts two lines of 154px condensed capitals along the bottom edge of a photograph. Gotham Gym goes to 160px hairline serif caps on a scratched black ground and punches a narrow vertical video panel through the middle of it.

The newest galleries push it further. The Belonging runs two lines of 194px white capitals over dim teal video. Hagyard sets the single word TRUSTED enormous in cornflower blue beside a bay horse lit against black. Terra prints its own name in a grotesk so large it runs off the right edge. Kristin Teig fills the whole screen with her name in an italic serif and shows no photograph at all.

What makes it work is almost never the typeface. It is the size, the tracking pulled in tight, and the discipline to put nothing else on the screen. Terremoto splits its own name across two lines at poster scale and then hands three grid columns to a single photograph.

One photograph, no headline

The riskiest approach and the most striking when it lands. Peter Dab shows one curved cedar shingle canopy over the sea and writes nothing. Hocker puts up an ivy wall with two windows cut into it and no text at all. Wagner Roofing fills the frame with a copper standing seam roof in full sun. Lobs runs a full bleed photograph of a lit hotel lobby with a project name in the corner and the word Menu. Laurel Hill, in the childcare gallery, gives the whole screen to a faded 1970s photograph of two children on a climbing frame.

Thorncrown gives the screen to a glass chapel glowing gold in blue winter woods. Sterling Bay fills it with the Chicago skyline and prints only a wordmark, five links and a slide counter on top. Jason O'Rear pins one architectural photograph right of centre on white and runs his contact details vertically up the left edge.

It requires a photograph good enough to carry the whole argument, which is why it clusters in construction, landscaping and photography. Try it without that photograph and the page just looks unfinished.

One colour, everywhere

A field of a single saturated colour with type on top. BlocPower fills the screen with electric violet. Pilot uses deep violet with a faint engineering grid. Bub and Grandma's floods the fold with amber and draws its own storefront on it in navy ink. My Piece of Cake runs hot pink across the whole hero with two people sitting on a stack of pink crates. Lucé goes near black with a chunky orange display face and splits the headline across two colours mid sentence.

Gentry runs a pure black field for a dental practice. Keker puts a yellow headline on dark green for a litigation firm. Middle Child splits the screen white and bottle green and builds a smiley face out of a circle, a bar and a half-moon bowl.

The common thread is that the colour is not the brand colour used loudly, it is a choice the category does not expect. In pest control, where everything is green or red, Blue Beetle running Kansas City blue against hard yellow does more work than any amount of copy.

No hero image at all

A quieter group and worth studying if your photography is not ready. M Powered sets a single sentence in a big contrasty serif on warm paper. Andersen opens with a serif line, three paragraphs of grey text and a lot of white space, then a split band halfway down. Hiline centres two lines of green serif on cream. Dozen lays a widely spaced wordmark over a black slab of hours and address and nothing else.

Munger Tolles draws a red wire frame loop on warm off-white and writes two sentences. Cravath blows words from its own headline up until they bleed off both edges and uses them as the background. Bartlit Beck shows a logo, four links and some press quotes.

These pages win on confidence. They work because the sentence is worth reading, which makes them the cheapest approach to build and the hardest to get right.

Where to go next

The trade galleries are listed above and each one carries the full write up for every site in it: the display face and its size, the body face, the palette in hex, the grid and container widths, the platform, and a note on how the page asks for the job. Pick the trade nearest yours, then come back here and read the three approaches you did not choose.

If you only read one gallery, read the one closest to your own trade, then read construction for ambition and plumbing for conversion.