read.me

Hi, I'm Ben.

This site collects bits I've enjoyed making — agency work, side-experiments, the occasional render or character. Some of it is polished; some of it is me figuring something out at 11pm because I wanted to.

I like the work that lives in the gap between graphic design and code — brand systems that have to ship as websites, illustrations that have to scale across surfaces, motion that has to fit into a CMS. Most of what's here came from problems like that.

The formal bit: senior creative, 10+ years, across graphics, digital, UX and motion. Most of that was agency-side at 26, working with brands like Arla, Vodafone, HMRC, Claridges and Tag Heuer. Currently Design Lead at Skipton Building Society, looking after brand and design output across digital, social and print. CV below — or if you'd rather just say hi.

Skills

Core: Graphic design · Typography · UX/UI
Also fluent: Print · Illustration · Animation · 3D
Tools: Figma · Cinema 4D · After Effects · Claude
Process: End-to-end project leadership · Brand systems · Cross-functional collaboration · Mentoring

Experience

Oct 2025 — Present

Skipton Building Society · Design Lead

Brand guardian for the society. Refreshed and evolved the brand guidelines, and responsible for design output across digital, social and print.

Owning the brand system end-to-end — from foundational guidelines to applied work across product, marketing and internal comms.
Designing across a wide surface area: digital products, social content, printed materials, and the design system that holds them together.

Dec 2015 — Sep 2025

26 · Senior Creative

Ten years at a small, restless agency — leading some projects, slotting into cross-functional teams on others.

Built microsites for Arla UK — including Open Farm — plus in-CMS games and competitions, and refreshed social animations to the global brand.
Primary UX designer for Vodafone UK — converted and updated the component library and digital asset management platform.
Built UX libraries in Figma for HMRC's intranet redesign.
Designed 26's current identity — selected over external brand agencies in a closed competition.
Concepted and presented for winning pitches including Claridges and Corinthia hotels.
Mentored junior team members in Cinema 4D and Figma.

Feb 2013 — Dec 2015

Ratrace Adventure Sports · Graphic Designer

Sole designer responsible for every event the company ran — brands, websites, signage, banners, medals, apparel, print adverts.

Jul 2012 — Feb 2013

ANPR International · Graphic Designer

Responsible for all design output of the company and sister companies — signage, advertisements, flyers, e-marketing and online presence.

Education

2007 — 2009 BA (Hons) Graphic Design, Sheffield Hallam University

2004 — 2007 Landscape Architecture & Planning, University of Sheffield (transferred to Graphic Design)

Download CV Email LinkedIn

BEN PATTISON

Senior creative.

About me Mendl's Bakery · Web Hand of Glory Covent Carbon Capture Beer the Festival DFDS · Anniversary 26 Agency · Brand Robot · 3D Grills Gone Wild Radiohead · Animation Pixelated Landscapes Float · Character Renders · 3D Pure Radio · Infographic Swap Shop · GIF Wonderment · Motion Arla Open Farm Sayings · Print Lightspeed · Characters Icons · Skeuomorphic Previous showreel · Motion re: hi Hey, saw your portfolio and wanted to ask… Alex Walker · Web

score 0

lives 3

high 0

score 0

lines 0

lvl 1

score 0

colophon

About this site.

Designed and built collaboratively with Claude (Anthropic's Opus 4.7). Every visual decision, copy choice, animation curve, and interaction came from me. Claude wrote the code, debugged the edge cases, and pushed back when something didn't sit right. We iterated.

The work

Most projects in the grid are human work — designed and shipped over the past decade at 26, at Skipton, and as side experiments. One is also a Claude collaboration: the Alex Walker portfolio site. Same pattern as this site — design direction mine, implementation a collaboration.

Stack

HTML · CSS · vanilla JS. No build step. No frameworks. Static files, served direct.

Fonts

Departure Mono · Space Grotesk · Inter

Palette

Phosphor green on near-black. CRT-inspired.

Notes

Browser View Transition API for the tile expand morph.
Sub-pixel SVG cursor art with three states (default, reticle, expand).
Grid load cascades by visual position, top-left to bottom-right.
Panel slide uses a dramatic S-curve; shadow fades faster than the slide so it doesn't pop on close.
Respects prefers-reduced-motion throughout.

Case study · Brand identity · Mark design

26 Agency — brand mark.

brief

After nearly a decade at the studio, I’d watched the wordmark carry the brand for a long time. It was starting to feel limiting — it couldn’t sit in places a symbol could, and it asked the type to do all the personality work.

The studio opened pitches for a proper mark: three brand agencies invited externally, and the internal team welcome to enter too. I did. There wasn’t a formal brief beyond “design us a symbol.”

approach

I’ll be honest about the order things happened in: I drew the shape first, then justified it after. The mark is an infinity loop bound to a forward slash. The loop became “ongoing creative momentum”; the slash became a nod to the studio’s existing typographic system. Both readings are real and intentional, but they arrived after the form did. The form arrived first, just from looking at what felt right.

process

One constraint I locked in early: the mark had to be an ambigram — read the same upside down. Not for any conceptual reason. Purely because I wanted a 180° launch animation that lands back on itself with no visual continuity break, and that’s a constraint that has to be baked in from the first sketch.

Stroke-weight and joinery iterated more than anything else — making the loop and the slash feel like one object with shared logic rather than two glyphs forced together.

The pitches went to a panel. Three agencies pitched, plus two of us in-house. Mine was chosen.

Before — the wordmark in service for years

After — the symbol mark, designed to graduate the brand into icon-scale contexts

[construction lines · TBD]

Geometry — radii, angles, and the shared stroke logic that ties the loop to the slash

outcome

The mark shipped. It went onto the site, social, and internal merch — I still have the launch hoodie somewhere. A separate studio was later brought in to layer a colour system on top, which is its own kind of funny when the original brief went to a design agency, but the mark itself stayed unchanged.

credits

Role: Designer · brand mark
Year: 2023
Tools: Pencil · Illustrator

Case study · Concept · 3D illustration · Interactive microsite

Arla Virtual Farm — an open farm that never closes.

brief

Arla Open Farm is a real scheme: every year LEAF runs Open Farm Sunday, and dairies open their gates so the public — mostly families with kids — can come and see how a working farm actually runs. Arla wanted an online version that could carry the same energy: a hub for parents and teachers, and something fun enough that the kids would actually want to use it.

There wasn’t a fixed brief beyond “take Open Farm online”.

approach

I worked the concept up end-to-end — the world, the eight locations, the structure of how a visit through it would feel — and pitched it to Arla as a fully-realised animation rather than a static deck. The thinking was that you couldn’t really sell an interactive illustrated world by showing static slides; you needed to give them ninety seconds of the thing already half-existing.

They commissioned the build off the back of that pitch, and it’s been live ever since.

Tonally: warm, toy-like, friendly. No corporate gloss, no glassy renders. Rounded forms, soft daylight, Sunday-afternoon palette. Cardboard-toy energy. The whole place had to feel like somewhere you’d want to wander, not a website with a town drawn on it.

process

The master scene — the “town” you drag around on the map — was the anchor everything else hung off. Once that read right, I built variants: a summer-fete dressing, a winter version, a portrait crop for mobile, a version retargeted to push the lighting harder. Eight pinned locations — farm, shop, factory, coffee shop, recycling, renewable energy, exports, the Open Farm intro — treated as camera moves into the same scene rather than separate assets, so the whole thing held together as one drawn world.

Smaller props were modelled as standalone scenes so they could be re-comped wherever needed — cars, boats, the wind turbine, a flock of birds (the brief had a flocking-boids moment I’m still fond of), a little lightspeed ship that ended up in the exports modal as a self-indulgent detail.

For animation, I rendered sequences out of Cinema 4D and built motion comps in After Effects, then handed everything to the 26 web team to assemble in the front-end. The draggable map, the modal system, the quiz logic, the wellie-wanging physics — that was the web build sitting downstream of the illustration work.

outcome

The microsite launched in 2020 and has been live ever since — roughly five years of being treated as the day’s online home for Open Farm Sunday and, in between, an evergreen part of arlafoods.co.uk. More activity packs, more videos, more modals have been layered in over time. It’s the longest-lived piece of work I have on the internet, and a useful reminder that the things you build to be temporary sometimes end up being the things people don’t bother to retire.

Visit the virtual farm

credits

Role: Concept · 3D illustration · scene design · motion
Year: 2020
Client: Arla Foods UK
Agency: 26
For: LEAF’s Open Farm Sunday
Tools: Cinema 4D · After Effects · Photoshop · Illustrator
Live: openfarm.arlafoods.co.uk

Case study · Concept · Installation · Live data viz

Covent Carbon Capture — a screen that watches the traffic and pays the planet back.

brief

26’s London office sits on Bow Street, in the middle of Covent Garden. Ten metres of road outside the front window is one of the busiest stretches in the UK — thousands of vehicles a day driving past the building, each one trailing emissions nobody’s really looking at.

It started as an internal idea: could the building itself be made to do something useful about the carbon driving past its window?

approach

I worked the concept and the mechanism end-to-end. Number-plate recognition on the road outside → DVLA lookup for the vehicle’s emissions class → tally the CO₂ → fund a real offset against the running total. Then put the whole loop on a screen in the foyer so visitors and passers-by could see what the building was doing.

The pipeline was the unsexy half. The screen was the payoff: an illustrated little world with a smoking factory at its centre, parallax islands receding into mist, and cars driving across the bottom in real time — each one drawn to match what the camera had just clocked outside.

The whole thing had to be calm enough to live in a working office foyer all day, and clear enough that a visitor could read what was happening in five seconds.

process

Built the world in Cinema 4D — backplate, near and far island parallax, smoking factory, two cloud layers drifting at different speeds. Each car type — EV, sedan, SUV, muscle — modelled and animated as its own loop, so the live feed could spawn the right vehicle when the plate-reader flagged a match. The mix of cars across the screen ends up reflecting the actual mix of traffic on Bow Street.

Designed a small “carbon pop” graphic for the moment of accounting — the little visual receipt each car leaves as it passes. The intro screen and the on-screen system chrome sit in the same illustrated world; the project wordmark was supplied, and the graphics were built to live around it.

For the technical build — the ANPR rig, the DVLA lookup, the live data into the screen, the offset tie-in — I worked with Luke Cunningham’s team at Brave Spark, MSQ’s in-house tech studio. They handled the wiring; I handled what the wiring fed.

The intro screen — the still moment between live updates

Live state — the scene mid-tally, cars driving across the foreground

outcome

The installation went live in the foyer at 34 Bow Street in summer 2023. In its first four months it logged 1.4 million vehicles passing the window and offset roughly 1.5 tonnes of CO₂ through Ecologi’s biochar removal scheme. The Drum covered the launch; MSQ has said it’ll roll the same rig out to other offices and offer the service to clients who want to do the same thing outside their own buildings.

Visit the project site

credits

Role: Concept · mechanism · design · 3D illustration · animation
Year: 2023
Agency: 26 (MSQ)
Tech partner: Brave Spark — Luke Cunningham & team (ANPR rig · DVLA lookup · live data pipeline)
Offset partner: Ecologi — biochar carbon removal
Press: The Drum, 31 July 2023 · MSQ launch piece
Tools: Cinema 4D · After Effects · Illustrator · Photoshop
Live: coventcarboncapture.com