Bear with me here, Reader: I'm going to talk about Formula 1 in this issue of the dispatch. But I swear it's design-related.

I was a passive viewer of F1 many years ago but in 2019, after season 1 of Drive to Survive came out on Netflix (it's a great show!), I became a passionate fan who watches every single race.

For those unfamiliar with the sport; it's 20 drivers (two from each of the 10 teams) racing on tarmac circuits around the world in super fast single-seater cars. It's the fastest road racing in motorsport, and also one of the most expensive sports in the world.

What design language would you associate with a sport of that description? Probably large italic type, a super masculine vibe, maybe some chrome or carbon fibre texture accents?

Here's a look at the current F1 website.

The first time I saw it I was pleasantly surprised by how well it was designed. No offence to motorsport in general, but it's not an industry I expect to have great graphic design. Racing cars often have garish color schemes and they eschew the idea of negative space in favor of adding yet another sponsor logo to the side of the car.

The F1 website balances a visual language that matches the power and speed of sport, with subtle design touches that lend an air of quality to the site. I want to talk a little about the changes the formula1.com design team has made to get to this point, and what we can learn from it.

Refining the design language of Formula 1

Taking a look at other official websites for motorsport competitions, it's clear how much the F1 site stands out.

Nascar's site is surprisingly lacking in any type of personality, with a barrage of links and content and very little hierarchy.

The Indycar series site has a very 'motosport' feel in its font choice and a better UX than Nascar. But it's lacking something visually when compared to F1.

Looking back (thanks Internet Archive!) we can see that in 2018 formula1.com had similar issues to the Indycar site. The design was tidy and functional, but it didn't have the level of polish we see today.

So, what tweaks did the F1 design team make to level up the design language of the site? Let's dig in to it.

Small details make a big difference

In comparing the old with the new, there are a lot of similar ingredients in the design.

We see cards with an image above and text below linking out to pieces of content on both the old and new site. They both have a section with flags and dates indicating the race calendar. We see black and white, with red accents on both.

The difference is in the details.

A new font

The site now uses a custom font (called simply 'F1' according to the CSS) modelled after the F1 logo. It's got a similar retro-future style to the font used on the Indycar site, but with unique features like the angled 'a' and the gap between the right and left sides of the 'R'.

They use this font for their navigation and for headings. But unlike the Indycar site they don't go overboard with it, using a sans-serif called Titillium Web for body text and smaller headings to keep things readable.

This custom font brings so much more on-theme personality to the site when compared to the generic sans serif used previously, and because it has been crafted especially for F1, it reinforces the brand wherever it is used not only on the site but in other content too, like the captions for their team radio videos.

More unique cards

Every digital designer has created a card at some point. They're a standard way of presenting information, especially content like a blog post or video in a grid. formula1.com's cards are still an image above with a white section below with black text, but the rounded grey border along the bottom and right side imply the shape of a card without it being a complete block.

It keeps the content organised and clearly groups the image above with the text below it, but it's lighter on the screen due to the gap in the border. A super clean way to make an information-dense area feel more open.

Brand design elements

And speaking of that border on the cards, this is a design element that's repeated elsewhere in various forms whether it be a very subtle frame around the circuit image in the header or the thick red border on the featured content or content section.

These lines mimic the curves of a track and the border radius is similar to the curves in their custom font. There are some places on the site I feel they might be going a little too overboard with this design element, but overall it's working well to frame content and reinforce the visual brand.

Another nice subtle element is the use of texture, as seen below the Monday Morning Debrief image above. These light patterns have a nice tie-in to the carbon fibre the cars are constructed with, but without being overt and cheesy. They bring some depth to the design while still keeping it light and airy.

What can we learn from this?

To me this site is a great example of how small details can make a big difference to the overall quality perception of your site. A card doesn't have to have four distinct sides that stand out from the background to be functional. A custom branded font doesn't have to be used everywhere to be effective (and in fact, it's more likely to have an impact if you don't).

Most importantly though, it shows that you should look outside of the niche you design for when getting inspiration. You can pay homage to stereotypes or expected visuals within a niche while still moving in a new direction. By motorsport standards, the previous F1 design language was absolutely fine. But by investing in these changes they've elevated it to a whole new level – holding themselves to their own standards, and not that of the industry in general.

I hope you enjoyed this maybe slightly unusual writeup on something I've been thinking about as I visit the F1 site for news of team changes for next year.

​

---

For your downtime

I had a reply last week from a newsletter I actually sent a few months ago where I'd shared some totally not-design-related things I'd been enjoying. The reader told me how much she enjoyed the issue, saying "I've honestly found that sometimes the best inspiration and the most growth can be found in seemingly unrelated places."

She encouraged me to share more like it, so to end todays issue I want to share a few content things I've been enjoying recently.

​Missed Apex podcast​

To go along with the F1 theme, this is a podcast I listen to after every race. I love hearing the hosts and guests break the race down, share news and speculations, and just generally nerd out on F1.

​Project Hail Mary by Andy Weir​

I absolutely devoured the latest book from the author of The Martian on vacation recently. I not only read the ebook, but I then listened to the audiobook too! I'd highly recommend them both.

​DIY Danie on YouTube​

I adore watching home renovation and room makeover videos on YouTube and have recently started watching Danie's series Home Made Home where she's making over her 150 year old farmhouse.

Get to know your favorite designers on 8px podcast​

Just today, Luis (a designer advocate at Figma) launched episode 1 of this new podcast featuring yours truly! It was a fun interview because it focussed on who I am and the things I enjoy outside of design. Very lighthearted and I'm looking forward to more in the series! Listen to episode 1 here​

​

---

​

I sometimes fear that it's the details I called out in today's issue that are getting lost as more and more designers prefer to focus on UX than on the visuals. Both are equally important when it comes to building a product, a website, a brand... anything really. I've been working on a piece about the 'death' of graphic design that I might share in next weeks issue that goes into more detail about that!

Until then; have a good week and happy designing,

Charli