Style Guides - Craig Jamieson

What is a design system?

A design system is a living ecosystem that serves the teams working on deploying products. As a central repository, it can be a combination of a coded components, design guides, brand assets and rules of engagement. This is usually an independent project run by a dedicated team who maintain the overall repository, code all the components, deploy updates and create all the assets for consumption by the teams across an organization.

The following are some of the most common categories within a design system.

Styleguide Commonly referred to as a living style guide is a visual reference of all the design assets that make up a brand and it’s supporting media and include things like colour, type, layout and other assets to help the design team consistently utilize the brand assets. This is constantly growing as more and more assets are added and the brand evolves.

Visual Language The brand will share the visual assets and their usage to best communicate effectively across media and contain a variety of produced assets such as video, icons, illustrations, and photography.

Design Language Every great design starts with a definition of the values and the standards to which a design effectively comes together and communicates seamlessly across multiple media. Principles are shared to help teams better understand why decisions were made and how best to apply them.

Pattern Library A coded repository of atomic-like assets for developers to easily consume to reduce the amount of churn and repeated assets that need to align across a project and function in a consistent way. This is usually html and css and some basic javascript. It can be, but not necessarily include complicated coded assets such as angularJS, jQuery and React, as technology changes so quickly code might be redundant before going live. The coded assets are both visual, functional and can be executable.

Voice & Tone Effective content and communication requires a brands voice and tone, while also including guidelines on how to effectively add content to communicate consistently across media.

Brand Guidelines Brand assets can be downloaded and appropriate guidelines shared to ensure consistent brand usage and avoid dilution of the brand and incorrect deployment creating confusion when developing brand assets.

Added to that, guidelines, legal documentation, how to contribute, get support and update logs are essential to maintaining a design system.

I hope you found this very basic guideline useful. Design systems are ever increasing in their detail and functionality and I’m sure in the future I will explain in more detail all the new features you can add and why you would need them. Whether you’re a designer, a developer or running teams and projects, a design system has to be the best way to create a consistent product, increase productivity and align your teams to your companies product vision.

System design: Block builders

In a big organization, there are a lot of moving parts across various departments and projects and when the goal is to create a single design language, keeping a consistent design can become almost impossible. My strategy for this was to develop a core design team who would be responsible for designing the individual components of our design system which could then be deployed and consumed by designers who worked within project teams. This was met with a huge amount of resistance as people seem to think that having bums in seats within projects would speed things up and deadlines would be achieved. However, the goal is to have a consistent design and building up a living style guide would provide us with a platform that all teams could understand and consume the required components in which to apply to their designs. Ultimately project teams should be more focused on other priorities like functionality, better user experiences and align all projects into the specific channels that will deliver these to the people who will use them.

In order for me to explain this over and over again, to which I have mildly had some success, I have managed to create the analogy that this core design are busy creating the system, which if I get my way, will consist of pairing up designers with developers so they can dev these components and test, break and animate them before committing them or rolling out several static designs, is call these my Lego block builders. Their responsibility is to make the Lego blocks which the Lego builders will consume to make the Lego models. There is a very generic list of components almost every project may consume from (atoms), there’s how you piece these components together (molecules) and then there’s the way they work together (organisms). The Lego builders consume this within their various projects and should they need a specific block that does not exist, it is their responsibility to identify it and bring. it to the core design team who will then work with them to create the blocks and how they work together to deliver on the projects needs, feeding back into the system for all other Lego builders to consume. I have borrowed some language from Atomic design principles, and we have probably all played with Lego, so this should be language most people can understand.

I am often told that this is not agile and this is creating silos etc. Maybe, but it’s necessary if you want to have a single look-and-feel that represents the brand consistently. Spreading the design out across multiple teams, on multiple projects, in various buildings would simply not work. While I could move across all teams and keep alignment, the task is too great and much easier to control by giving out a set of guidelines for teams to follow. It’s a subject for another post, but living style guides and designs systems are necessary and utilised by most big organisations who want to create seamless experiences for their customers, but throwing tons of resources won’t develop this any more successfully than rather putting a core team together who work with each other to solve the visual design challenges and deploy them into the style guide and then iterate accordingly. I think the challenge is to identify the brick builders from the Lego designers who consume the bricks and make sure that there is still enough design challenges for everyone to be inspired no matter which role they are best suited. The other is getting people to understand the vision and hopefuly make them understand that in order to be consistent and speed up the design process, a small core team is the most practical solution I can think of.

Living style guides for new team members

There are so many good reasons for any team to build a living style guide, but one of the most obvious ones for me, given the movement of talent in the industry, is for onboarding new talent into projects. I cannot tell you how many times I have seen designers join a project and be expected to start rolling out designs straight away and more often than not, fail to meet any sprint deadline due to the huge learning curve and asset collating they go through.

I always try and think of what I would want when I join an agency and a living style guide is a perfect place to accumulate everything someone new will need. The most common elements are fonts, icons, PSD’s, style guides, pdf’s and so on. These can all be built into a living style guide, so not only can they download the files, but they can view how they are made up and work in the real scenario.

Hopefully, if the style guide is not an afterthought, it would be current, which is in the sorting of working files can be very confusing. Of course giving a designer a sketch file or access to a creative cloud library of colours, components etc that they can drag and drop into layouts, already speeds things up.

Designers shouldn’t be focussing too much time on designing pages, they should be working with these components and utilising what’s already been built and build on from that.

Onboarding is easy when you have all the working assets in one place, with a reference you can actually interact with which allows you to work in a modular manner and will help new designers get up to speed quickly, focussing on smaller tasks which will make getting into things, even faster. Another win for living style guides.