Alf’s Cycles: A Design Reflection

Building a Brand Identity from Scratch

30 January 2026

When I first opened the brief for Alf’s Cycles, I thought I was designing a website for a bike shop. I was wrong. I was designing a memorial for a cat who believed the world belonged to him.

That realisation changed everything.

The Beginning

The project started simply enough: create a responsive website for a family run bike shop in Keswick. Four pages. Clean navigation. Mobile-friendly. Professional but approachable. I sketched wireframes in my notebook, planned colour palettes, researched competitors. Standard design process.

Then I read about Alf the sharp eyed, fearless cat who sat through repairs, rode atop bicycles, and ruled Tom Harding’s garage like a king. Suddenly, this wasn’t about selling bikes anymore. It was about honouring a legacy. The design needed soul.

Finding the Voice

I spent hours staring at vintage British cycling posters from the 1960s. There was something in their bold typography, their limited colours, their unapologetic confidence. That’s what Alf deserved not corporate polish, but character.

The colour palette came naturally: cream like aged paper (#EDE8D0), bold red for energy (#d5161b), dark grey softer than pure black (#383838). Together, they felt distinctly British, slightly vintage, wholly unique. The cream background became my favourite decision warmer than stark white, inviting like an old photograph.

Typography took longer. I needed fonts that commanded attention without shouting. Anton for massive display headings condensed, bold, impossible to ignore. Anybody Condensed for navigation clean but distinctive. Helvetica for body text—reliable, readable, professional. The combination created natural hierarchy. Your eye knew exactly where to look.

The Struggles

Nothing worth making comes easy. I faced problems I hadn’t anticipated.

First, the CSS became a battlefield. Multiple stylesheets fighting each other the repair page inherited homepage animations and looked broken. I spent an entire afternoon untangling specificity issues, eventually consolidating everything into two files. Lesson learned: plan your architecture before you start coding.

Second, the About page layout defeated me three times. The heading was too large (15rem!), completely invisible. The image sat in the wrong position. I’d used absolute positioning thinking it gave me control instead, it gave me chaos. The solution was simpler than I’d imagined: flexbox, vertical flow, let content breathe naturally. Sometimes bigger isn’t better.

Third, mobile readability. My line height was 1.3 far too tight. Text felt cramped, suffocating. Increasing it to 1.9 changed everything. Suddenly, paragraphs had room to breathe. Reading became pleasant instead of painful. Small details matter enormously.

The Breakthrough

The turning point came when I stopped trying to make a “modern” website and started asking: “Would Alf approve?”

That question guided every decision. The horizontal scroll section that lets you drag through services Alf would’ve prowled through those cards. The dark backgrounds for storytelling sections—intimate, like tales told in dim light. The massive headings that refuse to be ignored Alf never did anything quietly.

I wrote and rewrote the About page copy four times. The final version has rhythm: short sentences for impact, longer ones for flow. Specific details Station Street, Honister Pass, Latrigg. Showing rather than telling. “Sharp-eyed” not “looked sharp.” Every word earned its place.

What I Learned

Design isn’t just about making things look good. It’s about capturing something true. Technical skill is useless without narrative direction. I can write perfect CSS, implement flawless responsive layouts, optimise load times but none of that matters if the soul is missing.

This project taught me that constraints breed creativity. Limited colour palette, simple layouts, semantic HTML restrictions forced innovation. It taught me that details compound: the breathing animation, the hover effects, the line-height adjustments. Small touches create big impressions.

Most importantly, it taught me to listen. Not to trends, not to other websites, but to the story itself. Alf’s story demanded something memorable, lived in, bold but never corporate. Once I stopped fighting that and started honouring it, the design found its voice.

The Result

The final website isn’t perfect. I’d change things if I started again better CSS planning, mobile wireframes from day one, component libraries for consistency. But it’s honest. It feels like Alf: a bit scruffy, wholly authentic, impossible to forget.

Every time I questioned a decision, I returned to one question: “Would Alf approve?” A cat who rode bicycles, ruled stone paths, and sat through countless repairs deserved more than generic corporate design. He deserved something with teeth.

I think we got there. The website lives now, telling his story in cream and red and bold typography. And if you look closely really closely you might imagine Alf there still, perched on a digital saddle, one paw stretched out, ruling the screen like he always ruled everything else.

Some spirits don’t leave. They just become part of the code.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *