Introducing the Docker Design System

 

Isometric illustrations have been an artistic style for ages, yet using them to convey brand identity is a recent development in the software industry. There is a growing trend in the community which gives us a wave to ride, and hopefully builds the foundation for a solid language. The Docker design system is primarily built on technique.

Abstracting the brand, and the value of isometric illustrations into a guide to follow….

 

The Docker Isometric Design Theorem

 

 

 

The DDS uses this cube as the foundation of all things. If we think about what this cube is, it reflects all the attributes and values we want in our business and products.

The shape is solid… stable, consistent, cohesive… It has a solid foundation – it IS a solid foundation – it is sharp, clean, simple, and delightful… crisp and concise, symmetrical… almost… perfect.

The three dimensions allow us to abstract values using a priority ranking system.

Using the values of Primary, Secondary, and Tertiary to drive conversations.

It allows us to create a simple, cohesive color palette using primary, secondary, and tertiary values in our brand colors.

It drives the principles of uniformity, importance, and breadth.

 

 

 

 

Uniformity

Uniformity is an attribute of quality.

Having elements align and conform using size, space, and color as standards is crucial to the integrity of how the system communicates.

 

Importance

Giving specific data the right value over others.

The system uses the rule of thirds – Primary, Secondary, and Tertiary – to convey the value of the data being displayed.

 

Breadth

Using space, padding, and margins to convey a clear delineation of information.

Breadth allows content to be legible and parsable by the viewer, using uniformity and importance as leading attributes.

 

For example:

Let us take a look at this data. There are shapes in this component. What is the value of one shape over the other?

Which shapes are important, what are their relationships, and what is the hierarchy?

How can you parse this content easily?

 

 

 

 

If we start by applying the value of uniformity – having things align and remain consistent – we can immediately surface legibility and understanding.

 

 

 

 

Now if we apply the value of importance, we can again see the order of information display in a more defined sense of hierarchy.

 

 

 

 

Adding breadth allows us to give a clear delineation of content.

 

 

 

 

Using this method in the typography of the system allows us to baseline our content displays and use a simple structure.

 

 

 

 

 

Creating hierarchy in our product navigation is priority ranked, with the brand, the user and the product.

 

 

We spent much time experimenting with the architecture of information and the importance of content using this method of priority ranking.

 

 

 

 

You can see this transcends all the way into the layers of components in the UI… how things like the main content has a higher ranking order than the navigation, or how the User profile is hierarchically displayed above all of the users resources…. of course – this should be considered standard.

 

 

 

 

As an example for Mac users, the Finder menu of your operating system, intentionally removed from the main view of your computer monitor, tightly positioned into the top of the display set back and aside, or if you are a Windows user it would be found on the bottom right… always available but unobtrusive to any workflow. The data is ranked lower on the order of importance.

 

 

 

 

Using these values, colors, and principles of order, we were able to identify a unified approach to how each product is displaying information in the navigation, and after much rigor and iteration we came to a consensus on the current model.

 

 

 

Docker Trusted Registry – an amazing product, built and maintained by extraordinary people. This product serves as the foundation of our Enterprise offering. The interface and product experience have gone through a tremendous amount of growth… quickly…. With the fast pace of business development and product evolution, it is challenging to enforce principles and guidelines while the pace of the business continues to supersede the need for pause.

 

However, timing is everything… anything particular stand out about this page?

 

 

 

Let us revisit a previous example….

 

 

 

 

There are numerous amounts of fonts, colors, font families and font sizes without hierarchy. The borders separating content are inconsistent and do not follow any pattern or order. The elements of the page are not closely aligned and are difficult to parse. More importantly, the importance of information appears to be lost.

 

 

 

 

 

So, taking all of the discovery, the core values, the learnings, and principles we crafted in our journey with the DDS, we are able to apply the system to our products, and the results are apparent.

This is taking the same content, same data and product value, and applying the DDS.  But this is just the beginning… We have applied these basic principles to the entire Docker Enterprise Portfolio.

 

 

 

 

At the end of the last quarter, we were able to identify the first phase of the DDS: typography, fonts, colors, buttons tabbing. And this is just the start. By mid next year, the intent is to elevate the value of the system by applying more advanced methods to the process, page types, forms, and complex interactivity to name a few.

Last but not least… the value of having the DDS, and the value of having a design system improves risk management. It increases performance with speed and execution. Not only that, it provides consistency and quality, builds trust and brand value. Having a cutting edge, world class enterprise-grade technology means having a product that equates to such attributes. It lowers costs and increases margins.

Most importantly, it unites us internally by allowing us to work together on a unified product.

 

 

After several years of rigor and resolve, the teams have created a vision for the system by using core values and engineering principles to guide our studies and disciplines moving forward.

 

You can learn about these values at https://design.docker.com

 

Cheers,

 

Design @ Docker