Custom vector identity
The mark combines a vertical support, a triangular cantilever, and an intermediate chord — drawn as SVG so it stays crisp at every size and can be animated path by path.
Alderspan Engineering
A self-directed concept for an engineering consultancy: an editorial multi-page site with an animated identity and original structural illustration.
VIEW LIVE SITE (opens in a new tab)Opens the deployed project in a new tab
- Type
- Independent engineering consultancy concept
- Year
- 2025
- Role
- Self-directed concept — brand identity, editorial art direction, illustration, and frontend development.
Overview
Alderspan Engineering is an independent concept project, not client work. The consultancy, its people, projects, and statistics are all invented, and every piece of architectural imagery is an original vector illustration rather than a photograph.
The brief I set myself was to make technical work feel readable: an editorial layout with generous type, a filtered project index, and case-study pages that carry drawings, figures, and plain-language description without turning into a brochure.
From the site
Notable details
Logo-to-navigation intro
On first visit the lockup starts centred and oversized, the mark draws itself, the wordmark fades in, and the whole thing travels to its real header position over about 1.75 seconds using the Web Animations API. The header reserves the final space throughout, so nothing shifts.
An intro that knows when to stay out of the way
Session storage skips the sequence after its first completion, a reduced-motion preference skips it entirely, and a resize mid-animation ends it safely.
Content-driven project system
Projects live in one typed data file. Adding an entry creates its route, its index card, and its homepage feature automatically; disciplines and filter counts are derived rather than hand-maintained.
Original structural illustration
Four scalable architectural concept illustrations and an inline load-path diagram were drawn as SVG for the site, keeping the page weight low and the drawings sharp on any display.
Honest about being a concept
Case studies carry a visible “fictional concept” label, and the contact form validates locally and shows a demo acknowledgement without transmitting or storing anything.
See it running
The deployed version of Alderspan Engineering is live — open it in a new tab.
