DS Analysis : Audi
I didn’t expect much when clicking on this DS made by Audi but I was wrong, it’s pretty good and there are a lot of good ideas to steal in there ! Let’s have a look !
Main Principles of Design at Audi
I hadn’t seen a DS that detailed it’s most important design principles so clearly and consisely before.
Through a series of Dos and Don’ts, the DS lists the most important design principles that apply everywhere at Audi. It very simple to read for anyone and gives a really good overview of the most important concepts. This might be even better than listing brand characteristics or company values, this shows how they’re actually implemented.
Downloadables everywhere
I didn’t expect it but it makes sense considering how much content for the brand isn’t digital, but is actually print that Audi shares so much downloadable assets. Fonts, logos, print templates or Sketch libraries, whenever something is mentionned in a page, there’s a good chance there’s a link to download it somewhere too, which is very convenient !
Slick Components with great documentation
Even though the Design and Code specs are kind of split in two, with the pretty docs being mostly designer oriented and the Storybook version being mostly developer oriented, it offers very well put React Component with extensive documentation to use it well in all kinds of projects.
Unlike most dev documentation, Audi’s also include usage guidelines of all components to ensure they’re not being for the wrong use cases. If that storybook was the only thing available, it would already be a very good start to be honest, as it includes a lot of information while being very pedagogic in how it’s presented. If right now your DS looks like the not-so-great doc for an old JS library, definitely aim for something like this as your next step !
Most components’ docs include informations about accessibility, best practices, along with all possible variations and states. Keeping this all as easy to naviguate sub pages also prevents the pages from getting very long and provides easy access to relevent information.
Useful external resources and standards
This should be in all DS really…
This part is about Accessibility and list all useful resources to produce content that is up to Audi’s standard when it comes to accessibility. It’s really not that difficult to come up with list like those for the most important aspects of product creation and it’s a very good way to help everyone involved learn everything they need and be on the same page.
Documentating Animation Principles
This one is rare and I’m very happy to see it : animation principles ! Featuring simple videos and example Audi goes over the different contexts in which an element is animated. This isn’t fancy and doesn’t cover all cases, but it does provide with a framework on which to improve on !
A full page details how elements appear and move on a page and how the different kind of effects give context and meaning to the user. All these principles are then implemented in the components too and give a very complete look and feel of quality and attention to details to the whole library.
Conclusion
I focused on the User Interface part of the DS because this is what’s of most interest to me and what’s most comparable to other DS, but Audi’s doesn’t stop there and includes sections about Branding and Sound work for example, unsurprising for a company that does a lot of video advertisement.
Overall it’s very clear that this DS is built like a Visual Identity mindset that’s very common in Branding and Print design, and it’s great ! It’s both beautiful and concise, and it provides whoever needs it with all the relevant information and assets.
I wish the React Library was a bit more integrated in the Design DS, but even as it is, it’s a great documentation as well and shows a real focus on design too.
