Website Design Analysis: Rolls Royce v Aston Martin

Competition between manufacturers is a fierce business, especially in one such as motor vehicles. They’re advertised everyday, right before your eyes, without you even noticing as a Ferrari zooms past and a little Citroen dawdles by.

If you want to buy a car from a manufacturer, your first port of call is going to be their website. This week I’ve picked out the Rolls-Royce and Aston Martin websites, but let’s make it clear, I’m in no rush to splash £130,000 on a car. Both Rolls-Royce and Aston Martin are expert car designers, top of the range, professional businesses. It is imperative that their websites and branding reflect this to ensure they are recognised and understood. If you look at their logos, both are rather elegant and crest driven, suggesting a long-serving heritage and royalty of the automobile industry.

The logos of both Royce and Aston stick to using neutral colours, and I think it must be said that Royce’s is much more suited to the web.

Royce’s logo is clean and legible at the expected web size, whereas Aston have had to add their name below the logo as the text in the badge becomes illegible at such a small size. This does seem like the most appropriate design amend, although, you have to wonder why a logo optimised for the web hasn’t been designed. For those with immaculate sight, you are going to read Aston Martin in the logo and then again below.

In terms of header designs, both Aston and Royce have opted for ones where their logos are centrally aligned, which does add a touch of class and difference to many sites that we see with logos on the left. If I was comparing the headers alone, Royce would win this competition hands down. Theirs is clean and precise, while Aston’s feels a little bit messy in comparison. Clean and precise, both terms that I’d imagine Royce would also describe their cars by.

Royce have opted for side menus, which can be activated by the three menu items in the header. These slide and push the rest of the design, which is quite effective and makes it obvious where the menu is. This side menu also contains a search option which users can simply click into and make a search.

I can’t fault the design of this side menu. It’s clean, legible and on brand using a simple  and modern sans serif typeface, while sticking to professional colours. The menu is well structure and all the links fit in the standard browser window size, no scrolling required. While scrolling wouldn’t necessarily be a negative point, making links obvious and all in one place eases a user’s experience on the site.

Aston on the other hand have gone for the standard option for navigation, a menu bar sitting below the logo. From a design point of view there is nothing wrong with this. However, from a user experience point, there are quite a few links in the menu, and then there is also an option to open the full site menu.

I’m definitely not a fan of this full site menu, but design, user experience and purpose all have to be considered. This menu fulfils its purpose and allows users to find the page they are looking for. However, this menu requires scrolling and there are a total of 72 links here, which you don’t really want to have to look through. Although I say this, Aston have categorised pages in the full menu, which does making looking for a specific page a little less tiresome. If you’re on a website such as Aston Martin’s, you are likely to know what you are after, so would just use the search option that sits obviously in the header.

Unlike, Aston, Royce have opted for a sticky menu. This is a design feature I particularly like and can be put to good use when you have long pages. They simply prevent users from having to scroll back up to the top of the page to see the menu bar. Royce’s sticky menu has a smooth transition as it resizes to take up less space and their logo falls gently into place in the bar, a little effect that is aesthetically quite pleasing for us web designers.

The homepage is one of, if not the most important page on a website (depending on the purpose of the site). In terms of features on both of their homepages, content has been kept simple. Aston have kept their page relatively short, with 6 main call to action boxes sitting below the main image, followed by the footer. These are clear cut and it is likely that someone visiting the site will be wanting to use one of these call to actions. In terms of user experience, this is a big plus. The key pages and sections of the site are handed to you on a plate. Despite this, the typography and layout feel someone old fashioned compared to Royce’s homepage. Royce also hand you the main call to actions on a plate with three of these stacked. Interestingly, one of these is the main image.The full width images are eye catching and bold and from an aesthetics point of view, Royce have a homepage that is much nicer to look at, although both achieve what they need to.

Looking through both sites, you get the sense that Royce have put more into their website. Something that appears to be growing in popularity is the use of videos on homepage images. Royce use a video in their main image container and when this has finished playing it is replaced with a static image. This works very well and captivates a user as soon as they set their eyes on the homepage.

Good websites and good design aren’t possible without good content. Imagery is key. I’d say Royce have the nicer photography, but both sites contain professional and impressive imagery. I say imagery is key, but Royce just present theirs in a classier way through the use of full width containers, and their colour scheme and typography also fall into place alongside this. Good content and good design go hand in hand with one another.I think this maybe where Aston falter slightly in their web design. Despite wanting to remain classical and professional, with a heritage, there is a reoccurring old fashion feel and style. A few typographic changes, and Aston’s site could feel a lot more modern.

In terms of interactivity, this is another battle Royce are winning. Both use helpful and stylish hover states and while Aston can’t match Royce’s impressive video, their main image slider has a progress bar showing you how long till the next transition. This is quite a nice feature at first, but after looking at it for a while, it gets slightly irritating. Royce have subtle transitions and movement which creates a welcoming feel and just suggests a classy company. For instance, as you scroll down the pages on the Royce website, images and content bobble up slightly before settling on the page.

Looking at general content pages on both sites, it’s difficult to fault Royce. Content sits in a central column and is broken up into manageable sections with captioned images and call to actions, making for an easy read.

Through the use of the colour scheme and sans serif typography, the page feels modern and it has a good user friendly design.

Now compare that content page to one on the Aston Martin site. This feels a bit more busy.  An increase in spacing between each section of text is what I’d recommend. This in turn would make it easier to follow the text and fulfil that good old design term of giving elements room to breathe.

At the end of the day, this site comparison between Aston Martin and Rolls Royce was a bit of a one sided race. However, this is purely my opinion and preference on design elements. But at the end of the day, both sites are providing their users with the experience and content they need. Yes, Aston may not have the appealing layouts, but the content is legible and obvious. You aren’t there to look at their site design, but to look at their cars or get some information, which you can do fine. Simply put, Aston give you what you need and Royce give you what you need, but also the little fancy design extras that you want or like. Maybe this can translate through to their products. On the Rolls Royce website you appear to be given more. Aston Martin could potentially use similar tactics. A simple, stylish and modern design with a few extra design elements could convey a similar to message to how they wish to market their products. This reiterates my point from earlier about Royce’s header being clean and precise, terms they want to be able to describe their cars by. A website shouldn’t just give the user what they need. It can be used as a branding element and set the tone and style of the company. At the moment I’d say Aston’s website and their products send out mixed messages.

This concludes my site comparison and reiterates the need for websites to be on brand, while also presenting the brand in a professional and suitable way for their industry and their aims.