Consists of a few major sections:
Carbon shows emphasis on using the
tabindex correctly and allowing a
Skip to content option when there is lengthy navigation so a user may access main content faster.
An example of a personal, basic implementation can be found over at the blog for Qantas.
Conversation levels for Carbon have been established with examples to portay a tone reflective of the company values. What is the difference between voice and tone? As IBM puts it:
Simply put, we have the same voice all the time, but our tone often changes. Consider this: You have one voice, but you most likely use a certain tone when you are having coffee with friends and a different tone when you are meeting with your boss.
Tense and sentence structure have continued to haunt me since high school English, but thankfully we now have well thought out and refactored methods and examples to help us out.
The style section gives an overview of the standard colours, grids, iconography, typography and motion. Each section provides video examples and even copy options where relavent (colours as an example of a hover that allows you to copy the hex on a click).
The components section gives examples of implmentation and shows images of the buttons in different states.
When it comes to accessibility, your goto reference must be the A11y style guide.
The structure is broken down into the following:
For anyone who has had the pleasure of writing forms in HTML, this style guide is worth its weight in gold.
It also contains more information on implementing
One line worth considering in your mantra comes from the base of the
Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later.. Can I get an hallelujah?
Worthy notes on videos is to offer a transcript or alternative audio track to allow users the option to read or listen to the video.
One of the stronger points of this style guide is coverage of devices and screen sizes it keeps reference too. The
motion section (a personal favourite) is pletiful with useful gems.
The guide puts an emphasis on
larger screens vs
mobile devices, something I hadn't even considered prior to reading through their
The choreography section itself has many elegant examples that guide you through their principles in practise - something even someone like myself, a layperson to the great church of animation, can appreciate.
Material Design even has an incredible palette available to help you with deciding upon colour schemes.
The section I am most impressed with is the
Patterns section. This section itself places an emphasis on employing healthy, regulated design patterns to put into practise.
Another section seen sparingly across style guides is a section that details customer-application communications. A simple use case applicable to all application builders is an onboarding process, and explains three onboarding models that are accepted and when and when not to employ a particular model.
Platforms section of this style guide also gives insight to platform adaption.
Viljami Salminen is a Finnish product designer. A personal ode to his own design guidelines viljamisdesign.com. Whereas most style guides on this list are highly regulated and continually improved naturally over time through corporate implementation, having a reference to a personally written style guide echoes an individual's mantra. This is both a great way to convey to clients the culmination of your own style and experience.
Hot off the heels of their new AUD$10 billion dollar valued office in Sydney CBD and during the beta of their latest iteration of their product line, this is a great chance for you to watch Atlassian push their design practise from staging to production. The guide holds many similiar stables in the concept of writing style and foundations, but a great addition to their guide is a section to inform good practise on
presentations, a necessary skill if you ever plan on wooing a room full of people.