Ten design directions for your website. Same content, same structure, different visual approaches. Click to view each one.
Dark, bold, high-contrast. Near-black backgrounds with amber accent. Full-bleed imagery. Feels like the inside of a workshop.
Clean, light, technical. Warm off-whites with blue-steel accent. Serif headings with structured grid. Feels like a technical specification.
Warm, textured, grounded. Earth tones with rust accent. Split-screen hero, bold typography. Feels like a well-used, respected workspace.
Built from your actual logo colours — navy blue, steel grey, and welding-spark yellow. Navy header, yellow CTAs, I-beam inspired mark. The most "on-brand" direction.
Same brand colours, different attitude. Condensed industrial typography, horizontal service bands, square project grid, diagonal section cuts. More editorial and structural.
Brand colours pushed hard. Massive ghost type behind the hero, staggered service rows that alternate sides, asymmetric project grid, yellow corner-bracket image framing. The one that stops you scrolling.
The page IS a steel structure. I-beam SVG section dividers with bolt holes, diamond-plate texture strip, structural grid overlays, cross-brace patterns, flanged plate connections between image and text in service cards. Placeholder images show where workshop photography, drone shots, and detail close-ups should go. The most thematically committed concept.
Steel grey IS the dominant colour — not navy, not blue. Charcoal darks, warm concrete background, spark yellow accent. The site looks and feels like the material itself. Same structural I-beam elements as D4.
Dark gunmetal, warm concrete, hot metal orange accent. Like walking into the fabrication workshop lit by welding torches. Warm and industrial. Same structural elements.
Cool blue-grey zinc tones, crisp off-white, safety yellow accent. Clean and precise, like freshly galvanised steel. The coolest and most technical-feeling direction.
Risograph print zine. Fluorescent pink + federal blue overprinting on cream, halftone dots, intentional 3–4px misregistration on the wordmark, rotated polaroid stickers with hand-drawn marker arrows. Workshop apprentice fanzine energy with real typographic discipline.
Post-Swiss modernism. Schibsted Grotesk + JetBrains Mono on warm paper, deep signal red accent. 12-column grid discipline, services as numbered catalogue table, A–Z capability index, crop-mark hero. Vignelli rigour applied to a Somerset workshop.
Ivory drafting paper with prussian-blue linework, rust-red revision accent. IBM Plex family, 8mm grid, drawing-sheet frame with crop marks and title block. Real SVG gate elevation with dimension lines, isometric I-beam, services as bill of materials, footer as engineering title block with hand-drawn signature.
Victorian trade card / 1880s ironworks letterhead. IM Fell + Rozha One on tea-stained paper, oxblood and muted gold. SVG arched headline, custom WF monogram seal, 5-line playbill hero, services as Roman-numeral trade catalogue with leader rules, projects as rotated cabinet cards. Asterism dividers throughout.
Logo-led classic. New royal-blue + steel + weld-spark amber identity. Centred logo masthead with a thin amber rule glowing beneath, DM Sans, restrained. Built around the new logo as the centrepiece — the version Richard could ship today.
Logo on a full-bleed photo of the workshop. Royal blue + spark amber from the new logo, Schibsted Grotesk. Vertical weld-spark underline under "hand" in the headline, numbered blue tabs pinned to the corner of each service photo. Spark amber rationed to one accent throughout.
Asymmetric split hero — type column with the logo as the largest piece of "type" on the left, building photo on the right. Cobalt + weld-spark amber from the logo, Schibsted Grotesk + Sora. Rotated vertical "EST. 2011 · SOMERSET" label sitting on the hairline divider, file-number caption system (WF-PF-07) running through services and projects.
Modern-clean, procurement-grade. Warm off-white, slate-blue, single safety-orange CTA. Hanken Grotesk + Source Serif 4. Italic pull-quote of values, numbered services index, contact block rendered as a real business card. Real building photo from the live site. The "we won the contract" Worsdale.
Modern-clean, warm and human. Cream + walnut + clay terracotta. Hanken Grotesk + Instrument Serif + Caveat. Oversized handwritten "Richard Worsdale" signature, "How a job moves through the shop" strip with hand-drawn numerals, tilted "Established 2011" stamp on the hero. The approachable craftsman Worsdale.
Modern-clean, photography-led. Ink on bone with rust italic accents. Hanken Grotesk + Instrument Serif italic. Fixed left-edge running TOC that highlights as you scroll, full-bleed building photo with mix-blend-mode type in the corners, asymmetric photo-as-card services, Plate I–V Roman-numeral captions. The art-directed Worsdale.
Editorial broadsheet. Cream paper, ink black, oxide-red accent. Fraunces serif masthead, drop-cap lead story, numbered service entries, magazine project grid, "colophon" footer. Frames Worsdale as a craftsman written about in a design journal — the opposite direction to D4–D7. Full creative mode.
These are design direction prototypes — same content and page structure, just different visual treatments. Pick the direction that feels right and we'll build from there.