Harton & Vale Legal — law firm website design

Harton & Vale Legal is a fictional firm of solicitors with an office in Newcastle and clients across the North East: families dealing with separation, people buying a home or writing a will, and owner-managed businesses buying, selling, employing and occasionally falling out. The brief I set was the one a real regional practice would give a web designer: look established without looking stuffy, explain complicated services in plain English, and make it obvious to a worried visitor where to go next. Nobody commissioned it and it was never a paying job. It is a complete working website, built to show what law firm website design can look like when it is taken as seriously as the advice itself.

Two quite different people arrive at a solicitor’s website. One is an individual, often anxious and reading on a phone in the evening, who needs to know whether the firm handles their problem and what happens first. The other is a business owner or finance director who wants to judge competence quickly and find the right partner. The site gives each of them their own route from the first screen, and it never makes either wade through the other’s material.

People choose a solicitor on trust long before they read a fee page, so the design has to earn it without shouting. That meant no stock gavels, no scales of justice, no glass boardroom with a staged handshake, and none of the invented awards, star ratings and “leading firm” claims that so many legal websites lean on. Authority comes from restraint instead: generous space, a measured editorial voice, a clear hierarchy and pages that answer the question a visitor actually has. Each practice area opens with what the service is and who it is for, then sets out the situations it covers, how the firm approaches it, what to expect and who you would work with.

The visual identity borrows from well-made print rather than from other law firm templates. Warm cream paper, a deep mineral teal for authority and a restrained copper accent used sparingly for emphasis and wayfinding. Headlines are set in Newsreader, a serif with the feel of a good broadsheet, with its italic kept for a single turn of phrase at a time. Everything that has to be read (navigation, forms, body copy) is in Work Sans, a calm, open sans-serif that stays legible at small sizes. Both fonts are subset and self-hosted, so the page renders in the right type straight away.

The homepage splits straight away into advice for individuals and advice for businesses, and the same split runs through the navigation, the services overview, the footer and the enquiry form. There are five practice areas on each side: family law, wills and probate, residential conveyancing, employment advice and personal disputes for individuals, and corporate and commercial, commercial property, employment for employers, commercial disputes and business succession for businesses. Every practice area has its own page with an on-page contents list, the lawyers who handle that work, related guides, frequently asked questions and an enquiry button that pre-selects the right area on the form. That structure is what makes solicitor website design work for search, too: one clear topic per page, rather than a single “services” list that cannot rank for anything.

Clients hire people, so each of the six lawyers has a profile covering what they do, who they typically help, their areas of expertise and the guides they have written. Their portraits share one lighting set-up and one colour treatment, so the team page reads as a single commission rather than a collection of different photographers. The people and portraits are fictional: the portraits were generated for the project and do not show real individuals.

The strongest decision on the project was to use real places, properly licensed, instead of generic legal imagery or AI impressions of landmarks. Every location photograph is a verified, openly licensed image from Wikimedia Commons, credited by photographer and licence on the site’s own image credits page, cropped separately for desktop and phone, and given one consistent, restrained colour grade so the set feels commissioned rather than collected.

• Tynemouth Priory, seen through its Norman arch, carries the homepage: stone, age and permanence, framed like architecture rather than a seaside postcard, with the Old Low Light at North Shields as a quiet inset.
• The Tyne Bridge leads the advice for businesses: structure, confidence and the region’s best-known piece of engineering. King Edward’s Bay on a still winter day leads the advice for individuals.
• Grainger Town and the Quayside provide the detail: the Central Arcade entrance for commercial property and a carved Quayside doorway for corporate work. The galleried library of the Lit & Phil opens the firm’s approach.
• North Shields Fish Quay opens the About page: the working fleet in clear winter light, with the fish market sheds and the terraces above. It has a personal connection too, because one of the boats in that harbour once belonged to me.

Service pages and articles are deliberately typographic, so no landmark is repeated and no page carries a picture that has nothing to do with it.

Seven plain-English guides (separating from a partner, updating a will, probate, settlement agreements, buying a business, commercial leases and resolving a business dispute) each carry a named author, a review date, a table of contents and links to the practice areas they relate to. Rather than attach an unrelated stock photograph to each one, the lead guide is shown as a teal contents plate that lists the guide’s own sections, which gives readers something useful before they click.

Most first visits to a legal website happen on a phone, so the phone layout was designed rather than shrunk. The header keeps the call button and menu within thumb reach. The full-screen menu puts the enquiry and call actions at its foot. Service hubs use their own photograph crops composed for a narrow screen, so the Tyne Bridge arch is never cut in half, and every control meets the 44-pixel tap-target minimum. The enquiry form validates as you type, lists any errors in a summary that takes focus and links back to each field, and stays short enough to finish on a bus.

Accessibility is part of legal website design, not an extra. Every page has one H1 and a heading order that never skips a level, and there is a skip link, visible focus states and full keyboard operation throughout. Text and controls meet WCAG AA contrast, and images carry descriptive alt text. Automated checks run the axe accessibility engine on all 41 pages at four widths, test tap targets and horizontal overflow, validate the HTML and crawl every internal link.

Because Harton & Vale is fictional, the site makes no claims a real firm would have to prove: there is no SRA number, no company number, no office address, no awards, reviews, case results or accreditations. The project status is disclosed in one discreet line at the foot of every page, with an page explaining exactly what it is for anyone who wants the detail, so the site stays immersive without misleading anyone. The structured data describes it as a studio project created by SR7 Web Design and deliberately avoids law firm and local business markup. The telephone number comes from Ofcom’s range reserved for drama, the email address uses a domain that can never receive mail, and the enquiry form has no endpoint at all: nothing a visitor types leaves their browser, and pressing submit simply explains that this is a studio project.

The site is a static build with no database and no plugins to update. Every photograph is served as AVIF and WebP with a JPEG fallback, sized for the screen and lazy-loaded below the fold, with intrinsic dimensions so nothing shifts as it loads. HTTPS is forced, the www address folds into the bare domain, and every page has a unique title and description, a self-referencing canonical, share images and an XML sitemap generated from the same route table as the pages.

Measured with Lighthouse on the live site on 22 September 2026, across seven key pages (home, services, a practice area, about, people, insights and contact): performance 99 to 100 on a throttled mobile connection and 100 on desktop, with 100 for accessibility, best practices and SEO on every page tested. Largest contentful paint was between 1.5 and 2.0 seconds on mobile and 0.5 seconds or less on desktop, and cumulative layout shift stayed below 0.02 throughout.

A 40-page law firm website with clear routes for individuals and businesses, ten practice areas, six people profiles, seven guides and a photographic identity rooted in the North East. There are no enquiry numbers or conversion claims here, because it is a project and has no clients. What it shows a real practice is how I approach a legal website: plain-English structure first, genuine photography in place of clichés, careful accessibility, and a premium finish that makes a firm feel established and approachable at the same time.