---

This post is about the greater good. Designing a website is an odd thing. Whether you’re a solo freelancer or part of a larger team — and however collaborative your process, at some point you’ll sit down at your design tool of choice, and create something by yourself. No amount of wireframing or user research can get around the fact that design tools are designed to be operated solo.

I mean, Figma has it’s “multiplayer” thing, but I don’t know anyone who actually uses it to co-create a design in tandem — that would be chaos. A single designer responsible for the execution of a website design is curious when you think about the sheer number and diversity of people from all walks of life who will use a design in the real world, once it’s built. The design decisions that we as individual designers make will affect people with ways of seeing and thinking that are vastly different to our own. Even within our team the diversity of thinking is pretty broad. Which is why getting a design review has huge value.

In Andy’s last post, he used the word interrogated to describe our internal design review. We go in pretty hard in these reviews, and that’s ok. In fact, it’s good, because it’s all for the greater good, meaning that inviting a broader perspective helps us make resilient websites that work for everyone.

We’d identified a few areas as tricky or problematic in the design. Here’s how we tackled them.

The easy stuffpermalink

Some of this stuff was easily handled. Folded corner graphics could be dropped, and offset outline in buttons whilst a lovely design detail could be removed to reduce the impact of theme styles on the wider design system. A little compromise, but no big thing.

The not so easy stuff, such as switching the display font for JavaScript for Everyonepermalink

We made the call — the readability of the display font for JavaScript for Everyone was too far off the mark to be viable.

Ouch, now we’re into painful territory. Yes, my heart sank. Repressed memories of clients dropping bombs like this at the eleventh hour came flooding back.

• Client

  Ah, now that you've finished the design, we wanted to let you know we only have the budget for free fonts, could you just swap them out?

• Me (in my head)

  WHAT!?

But this time it wasn’t a client whim, but my own design decision that had come back to bite me.

These situations can seem huge at the time. I mean I wrote a whole post about how the typeface selection was the cornerstone of the whole design! Yes, I was nervous that the whole thing would topple over. Not to mention the fact we’re working in the open here. But that’s the point of this whole thing — to share the whole process, even the messy “in-between” moments that nobody ever talks about.

But when the dust settles, there’s always a way forward. Here’s how I approached this one…

Retrofitting a retro-futuristic font

Our foundation — the messaging that’s built around the idea of taking your skillset way beyond remains untouched. We want to stay in the visual territory we’re in, inspired by sci-fi film and retro futuristic computer game design cues, but we want to dial up the readability on the display font, whilst retaining the integrity of the design.

When I say integrity of the design here, I don’t refer to visual standards or some kind of aesthetic ideal. I’m referring to retaining the integrity of what we’re trying to communicate through each element of the design. Careful consideration is also needed to ensure the new font either works out of the box with the other design elements or that the other elements can be tweaked to work with the new font. Importantly, it needs to do this whilst still communicating the same messaging effectively.

As I explained in my last post, each design decision builds off the last, so let’s just say I was a little nervous that the design would lose some of its impact. It would be much easier if we were swapping out a generic sans-serif here, that’s for sure.

Here’s a reminder of the font we dropped. Oof! I’ll miss this one.

Cue more digging for fonts. Deep cutouts or heavily unusual letter shapes were off the table, so I put my focus on looking for typefaces with bold angular shapes, and future retro aesthetics. Here’s the shortlist I made.

Eurostile was an option that would give us an easy route into sci-fi territory and the angles in those X and Y characters work great with our iconography. It’s pretty much the definitive font if you want to give an instant impression of “this is in the future”. It’s also from the 60s so it’s got retro covered too.

Going all the way back to our brief, Mat wanted us to avoid playing the techy/futuristic look straight off the bat, so this one remained on the cutting room floor.

Raptor V2 had the angled shapes I was looking for and some much more subtle cutouts which would tie nicely into the iconography and graphics. I was leaning towards this one, but was it retro enough?

Right Grotesk had a nice monospaced influence and shared the sharply angled corners with our lede font Azeret Mono, making it an easy on to make work with the rest of the typography but personality wise, it was a bit on the quirky side. At this point I was feeling a bit like Goldilocks after the first two bowls of porridge.

Then along came Cartridge, a font quite literally designed to give that feel of an 80s Atari game cartridge or a VHS box. Instant retro vibes.

I was feeling it. In terms of tone it was a different direction, but one that I thought we could make work with a few tweaks. Firstly, shape wise, this threw a few spanners in the works. What we were gaining in vibe, we were losing in connection between the shapes in the font and the shapes in the graphics. I’d need to find another way to tie the graphics into the design assets.

The other spanner was that this font had very different letter shapes to our lede font, which lessened the harmony in our type combinations. Here’s a reminder of those shared curved corners I talked about in my last post.

Here’s was where serendipity came to the rescue (as it so often does if you’re paying attention). Our lede font Azeret Mono has a huge set of alternate characters — and would you know it, I was able to swap out most of Azeret’s letters with curved corners for alternates that echo the tapered notches between the stem and bowl in Cartridge. Much better!

Now the headings and ledes were working really nicely together. The tone of the typography was different, but spot on to the brief which left one final thing I wanted to address: the logo.

I’d already been playing with setting the logo in a block capital style and had settled on a font that had the feel I was looking for — the kind of thing you could imagine written on the side of a ship belonging to some kind of distant future corporate space entity. Like Eurostile but with more interesting letter shapes. It also it had to have a good J. Neue Machina fitted the bill nicely.

The aim I had was to use the logo to bring some of what was working so well about Orientation back into the design — the way the shapes reflected the angles and cutout elements within the graphics and iconography but it needed to be more subtle, so as to retain readability. I set to it in Illustrator and began chopping away at the type. Here’s the un-chopped and chopped logos for comparison. It definitely felt a lot more sci-fi now.

I’m delighted, and I’ll be honest a little relieved with the end result. It’s not easy retrofitting a display font into a “finished” design concept, but I think we got there.

The imperfection of humans designing for other humanspermalink

We learnt a big lesson on this project — don’t skimp on design reviews and get them done early in the process. We do exactly that with our clients. We like to call that process, “getting a temperature check”.

We’re normally better at doing this internally too., but for whatever reason on this project, I felt a false sense of security designing for a system that we all knew well, and I took the design too far before inviting feedback. It happens. I was in a real flow with this one, and driven by a genuine excitement about where the design was heading, so I kept my head down working on it. I won’t be doing that again!

Even after 15 years in the industry, I’m not immune to getting caught out, nor would I ever want to give that impression here. We’re humans at the end of the day, designing stuff for other humans (here, here, I can hear Scott cheering!).

So yes, I’ll be getting a team design review earlier next time — it’s for the greater good.