Arc & Anchor Electrical — electrician website design

Arc & Anchor Electrical is a fictional electrical contractor working across County Durham, Sunderland and Tyne and Wear, covering domestic work, commercial premises and EV charger installation. Nobody commissioned it and it was never a paying job. I set the brief myself, and I set it as an electrician would: look established and technically capable without looking corporate, make it obvious within five seconds what the business does and where it works, and give a worried householder, a landlord with a deadline and a shop owner who cannot close for the day three different routes to the same phone call.

The point of the exercise is that most electricians are sold the same website: a bright blue and yellow template, a lightning bolt, a stock photo of someone in a hard hat holding a clipboard, and a list of services with two sentences each. This is what the same business looks like when the design is taken as seriously as the work.

Three audiences arrive on an electrician's website and they want different things. Homeowners are usually reacting to something: a board that trips, a kitchen that needs rewiring before the fitters arrive, a fault they cannot explain. They want to know it can be fixed, roughly what happens next, and that the person turning up will treat the house properly. Landlords and letting agents are working to a legal timetable: an EICR every five years, a report to the tenant within 28 days, remedial work inside the window. They want certainty and paperwork. Commercial customers want the work planned around their trading hours and priced before it starts.

So the homepage splits into domestic and commercial routes immediately, the landlord material is written for the regulations rather than sold at them, and the ten services each get a page rather than a line in a list.

The first full build was dark, precise and heavily structured: a consumer-unit chart for the services, drafting corner marks on every photograph, bordered cards, boxed section numbers and outlined buttons. It was coherent, and it was wrong. Seen end to end it read as rigid and template-built, because every single thing on the page sat inside a rectangle: the menu control, the buttons, the header, the hero, the section bands, the cards and the form fields.

The feedback was blunt and correct, and the second direction takes the structure out of the boxes and puts it into alignment, spacing, scale and typography instead. Borders came off the cards. Full-width dividing rules came out. Photographs were allowed to break the grid and bleed off the edge of the viewport. Sections were given different proportions instead of an identical band each time, and secondary actions became text links with a restrained arrow rather than a third outlined button.

The first identity did the obvious thing with the name: an anchor drawn from circuit parts, with a terminal for a shackle and an arc for the flukes. It was neat, and it made an electrical contractor look like a marine business. Literal trade symbols are exactly the trap that gives electricians' websites their sameness, so it went.

The replacement is typographic. "Arc & Anchor" is set in Instrument Sans SemiBold, tightly tracked, with all of the character carried by a single italic serif ampersand borrowed from Lora, subset down to that one glyph, so the whole personality of the mark costs 824 bytes. The ampersand is mineral blue on light grounds and amber on dark, and on its own it becomes the app icon and the favicon, which is the only part of a wordmark that survives at 16 pixels. There is no symbol to misread, and nothing that will look dated in three years.

The palette avoids the royal blue and safety yellow that the sector defaults to. The ground is a deep marine navy (#071B26) with a warm off-white paper (#F3F0E8), a mineral blue (#0C5364) doing the quiet structural work, and a controlled safety amber (#E8A12E) that appears only on calls to action, status details and small highlights. Amber never fills a panel and never sets body copy, which is what keeps it meaning "act here".

Typography is three faces with clear jobs. Instrument Sans carries everything spoken, at a large tight display size for headlines and a comfortable 17px for reading. Barlow Condensed sets the numerals: service numbers, step numbers, the phone number in the footer. IBM Plex Mono sets the small tracked labels that give the site its engineered feel, the way a schedule of test results does. All four files are subset and self-hosted, totalling under 50KB.

Photography decides whether a trade website reads as real, and an electrician will spot a fake immediately. Every frame was generated for this project against a written image plan: one crew, one set of workwear, one colour grade, UK fittings throughout. That means British three-pin sockets, UK plate switches, metal-clad consumer units with a main switch and a row of RCBOs, grey twin-and-earth cable, and UK brick terraces rather than American clapboard.

Safe working practice was part of the brief for every shot: no showers of sparks, no exposed live conductors in anyone's hands, no one working inside an open live board. Where a generated frame carried a real manufacturer's name on a consumer unit, it was retouched out locally rather than shipped. The set covers the work rather than decorating the page: first fix in a stripped period room, testing with a multifunction tester, a finished board, recessed lighting, a commercial fit-out, an EV charger on a real-looking driveway, and the same two electricians throughout.

Domestic work, commercial work, rewires, consumer units, EICRs and landlord checks, fault finding, lighting, EV chargers, outdoor power and emergency faults. Each page follows the same structure because customers compare them: what it is in plain English, the warning signs that bring people to it, what the price includes, how the job actually runs, photographs of that work, frequently asked questions, the areas covered and the related services. The facts are the ones a real electrician would stand behind: BS 7671, Part P notification, the five-year inspection interval and the 28-day remedial window for landlords in England, and Northern Powergrid as the network operator to notify for an EV charger.

Three case studies show the work end to end: a full rewire of a Victorian end-terrace in Sunderland planned around original cornices, a landlord EICR and consumer unit upgrade completed between tenancies, and an EV charger with garden lighting at a modern home. Each one sets out the requirement, the constraint, the work, the safety and disruption, and the result, with no invented savings or timescales.

Most of these enquiries start on a phone, often standing in front of the problem. The phone layout was designed rather than shrunk: the header carries a call button within thumb reach, a sticky bar at the foot keeps Call and Request a quote visible on every screen, and the hero photograph drops in flow with its caption overlapping the lower edge instead of floating over the copy. Every control meets a 44-pixel target, and the emergency section leads with what to do right now, including calling 105 for a power cut, before it asks anyone to call the electrician.

Because the business is fictional, the site claims nothing it could not prove. There is no NICEIC or NAPIT membership, no TrustMark, no company number, no insurance figure, no years in business and no named electricians. What it does instead is show a real contractor exactly where those things belong: a three-part credentials block on the About page and a matching row in the footer, marked as reserved, for scheme registration with a link to the scheme's own register, the insurer and level of public liability cover, and the registered company details.

Reviews are handled the same way. Six sample reviews are labelled as illustrative in the layout itself, with a note explaining that a trading business would show verified reviews linked to an independent platform. Nothing on the site presents an invented customer as a real one.

The enquiry form is the conversion path, so it asks what an electrician actually needs to price a job: the service, the postcode or town, the property type, how soon it is needed, a description, the preferred contact method and an optional photograph of the fault or the consumer unit. Fields are underlined rather than boxed, errors are written in plain English and announced properly, and the consent checkbox is explicit.

It is also completely inert. There is no endpoint, no fetch and no storage: nothing a visitor types ever leaves their browser. On submit it clears the form and says so, in one short message: "This is a portfolio website. No information has been sent or stored. For web design enquiries, contact SR7 Web Design." The telephone number throughout is from Ofcom's range reserved for drama, so it can never ring a real business.

The site is built to WCAG 2.2 AA. Every page has one H1 and a heading order that does not skip levels, there is a skip link, visible focus states and full keyboard operation, and text and controls meet AA contrast on both the navy and the paper grounds. Images carry alt text that describes what is actually in the frame. Motion is restrained by design — a short fade and rise as sections arrive, a line that draws, an arrow that moves four pixels on hover — and it is switched off entirely when the device asks for reduced motion.

Checks run on every build: the axe accessibility engine across all 37 pages at four widths, tap-target and horizontal-overflow tests, a crawl of every internal link and in-page anchor, and a content gate that fails the build if an accreditation claim, a company number, an insurance value or a development URL ever appears in the output.

The structure is built for the way people actually search for an electrician: one clear topic per page rather than a single services list, so consumer unit replacement, EICRs, rewiring, fault finding and EV charger installation each have a page that can rank on its own. Five area pages cover Sunderland, Durham, Seaham, Washington and Chester-le-Street, and each is written around the housing stock and the work we see there, with the surrounding towns listed on the areas page rather than spun into thin duplicate pages.

Every page has a unique title and description, a self-referencing canonical, Open Graph and Twitter data, breadcrumbs and internal links to related services and projects. Because the business is fictional, the structured data describes the site as a CreativeWork by SR7 Web Design and deliberately avoids Electrician and LocalBusiness markup, which a real contractor would add with their genuine details on day one.

The site is a static build: no database, no plugins to update, no page builder. Photographs are served as AVIF and WebP with a JPEG fallback, sized for the screen, lazy-loaded below the fold and given intrinsic dimensions so nothing shifts as it loads. The stylesheet is inlined and the only JavaScript is a few kilobytes of vanilla code for the menus, the reveals and the form. HTTPS is forced, www folds into the bare domain, and the sitemap is generated from the same route table as the pages.

Measured with Lighthouse on the live site in September 2026, on the homepage, a service page, a project case study and the contact page: performance 95–99 on mobile and 100 on desktop, with 100 for accessibility, best practices and SEO on every page tested.

Thirty-seven pages: a homepage, ten service pages, three project case studies, five area pages, four guides, and the about, reviews, FAQ, contact and policy pages a real business needs. No stock clipboard photography, no invented accreditations, no wall of badges.

There are no enquiry numbers or conversion claims here, because it is a project with no customers. What it demonstrates is the approach: a clear route for each audience, service pages that answer the question rather than list the trade, photography that a qualified electrician would recognise as their own work, a quote form that asks what you need to price a job, and a phone layout built for someone standing in a hallway looking at a tripped board.