Design

Tesla & SpaceX – Reusing The Blueprint

27/11/2020

If you’re here for the engineering, scientific and technical world in which Tesla and SpaceX belong, well you’ve come to the wrong place. Bear with me though, as I can guarantee you design analysis, persuade you that templates can work and will definitely try to deliver a rocket load of space puns. Four astronauts (3 from NASA, 1 from Jaxa) blasted off on 15th November using a SpaceX rocket and Dragon capsule, destination: the International Space Station. I reviewed the NASA website a little while back now, and if you’d like to give that a ganders, you can here. But today, I’m going to be dissecting the SpaceX and Tesla websites.

Owned by Tesla owner Elon Musk, the SpaceX website isn’t too different from its electric car business cousin. I was a little surprised to find that out myself. I’d never looked at the Tesla site, they’re definitely out of my price range, whereas with SpaceX and NASA, that’s big news. Elon’s net worth is apparently 90.8 billion USD. I know, he could get at least 500 million bespoke websites with that (but saving for his pension, right?). Being as global as his businesses are, I do think he could’ve forked out on the SpaceX site. In the time I’ve taken to get this far, he’s probably earned enough to cover it. But we can’t all be Elon Musk and sometimes it’s easier and suitable to reuse what you’ve already got.

The Tesla site is perfect for the industry, it feels like a car manufacturers website. It has imagery doing a lot of the work, it’s usable and easy to navigate and Elon listened when his designers said the logo doesn’t need to be bigger. The homepage (above) is clean and minimal and features full page blocks, providing you with a trip through the models and features Tesla want to signpost.

And then we have SpaceX. Even without a background in web design, you can see they’re pretty similar. I’m sure Elon didn’t just pick a template off Envato Market, this is a bespoke design that has been repurposed and reskinned. Tesla and SpaceX mirror each other in functionality and features with, of course, some obvious differences, you can’t buy a car from SpaceX, or a rocket for that matter.

Straight away you can see the similarities in the header with the logo, links and hidden side menu. Then we have the image blocks. While the text position may be different between Tesla and SpaceX, it’s not breathtakingly different. To be honest, who can blame them? SpaceX’s Dragon capsule isn’t brand new every trip, there’s definitely checks, tests and probably a few modifications between uses, but you don’t rebuild something that does the job without reason. The SpaceX website is no different. The fairly basic appearance and functionality of Tesla’s homepage is transferable and it works for SpaceX, it’s just been rebranded to suit. The blueprint is the same, the paint job is different. There is one thing I will say about this blueprint, I don’t think the functionality needed to be as simple as it is. They’re high-end, advanced and superior businesses, I’m sure they could’ve added some flair to the homepage, whether it be some parallax scrolling or scroll to the next block straight away on command, the sites didn’t need to be quite so static.

You can see the template in action again in the side menus. Tweak the spacing, brand with the typeface, invert the colours and boom, lift off. It is the same menu, just utilised to suit.

While there are also deliberate core functionality changes between the two websites as they do have different purposes and services/products, it’s not surprising to see similar layouts and elements used. It might not seem it, but both a car model page and a rocket page follow the same approach with a full width main image and title, followed by information blocks featuring data and descriptions down the left with a model image on the right. The Tesla site of course has more elements on vehicle pages as it’s got to sell it to the public, the technology within the car has to sell it. The ins and outs of the Falcon 9 rocket on the other hand is definitely more need to know.  While the (extremely) wealthy can hire their launch services, this isn’t a straight out of the box eCommerce website, you’re not adding space trips to your basket and checking out with PayPal (another brainchild of Elon Musk).

SpaceX and Tesla do a great job of differentiating themselves from each other. The aforementioned tweaks in layouts and functionality differences do play their part, a lot of this is down to their branding.

Without getting too graphic jargon heavy, Tesla’s branding is proper nice. The custom typeface in the logo is smart, sharp and simple. There is also the ‘T’ symbol. It’s not just a fancy ‘T’, it actually represents part of an electric motor, but to those of us that didn’t know that and can just about change their screen wash, it’s an identifiable and memorable symbol. It’s also presented stacked above the word ‘TESLA’ and thanks to its shape, acts as an arrow which the eye follows down to the name.

The SpaceX logo uses a similar custom typeface, along with some extra thought with the ‘X’, hinting at a rocket launch. I say ‘extra thought’, I can’t not see the Reebok symbol in that ‘X’, I’ll say no more, see below.

A logo isn’t the only thing that makes a brand of course. The typefaces used by each brand are different and suited to their industries, product and perceptions they want you to have. There are also colour palettes to consider, and they too have noticeable differences.

Another key element of branding is imagery. Imagery is crucial to the branding of Tesla and SpaceX. If you’re selling cars, you need good photography and Tesla have that in abundance. The first image on their homepage is also branded accordingly with a ‘Tesla Red’ coloured car. Branding on point. SpaceX too, use the imagery you’d expect. Dark backgrounds, space and rocket shots say exactly what they’re up to.

So what am I saying? I’m saying if you have multiple brands, whether they be sub brands or completely different, there is no need to start from scratch on each website. If you get the branding right and make the necessary functionality changes for the purpose of the website, you’re good to go. Tesla and SpaceX are doing it. That should tell you all you need to know, this process works. Here at WDL we have had clients follow a similar approach. Challs own Buster and Knaus, to name a couple of their sites. You’ll notice that these are similar. They follow the same bespoke template that our team put together. We then took their already established branding and firmly stamped it on the sites. As standalone websites they appear completely bespoke. Alongside one another you can see the similarities and also get the sense they are part of something bigger (Challs).

If you’re like Elon Musk and own multiple businesses or perhaps one with numerous sub brands and are looking to bring them online, we can help. To discover how we can help all of your brands with a bespoke template branded to suit, please do get in touch.