Systems are the fundamentals of any business that plans to scale and grow their business. Everything from the ‘may I help you’ to, ‘do you want fries with that’ is a system that creates an efficient and consistent way that people not only work in your business but experience your brand.
So if that’s true with the things you do in your business, why can’t it be the same with the way your designers approach design tasks?
I’ve long been an advocate for design systems. My passion for both business and design has led me to creating templates and systems in organisations such as Yahoo! to Air New Zealand and even within my own freelance business.
If there’s a way to design something so that in the long run, others can benefit – then I’ll create it.
So what’s a design system?
The exact definition varies online.
What is ultimately comes down to is the things you do within the design phase in your business that ultimately allows it to scale.
Take for example something like a Style Guideline.
Style guidelines allow you move from one design to another without having to explain the vision for your brand, and to ultimately get the same result you’ve had before – in terms of style without having to explain it over and over again.
So rather than it being just about the brand. Design systems can extend to things like your website and app that defines a structure; and even a process where your designers can work efficiently to produce high-quality results that are consistent.
and the key here is consistency.
Consistency with your brand, your customer experience and consistency within your team.
So how you create a design system?
As shown in the diagram above you’ll need 3 key elements.
- A brand guidelines and/or style guidelines that detail your brand, your company mission and how to use logo.
- A tool that allows you to create a design system like Sketch cloud libraries, or Invision’s design system manager (DSM)
- A process that allows designers to collaborate and share assets as well as hand over design in HTML/CSS format to developers.
The key to combining a great design system that transfers nicely to development teams is having someone in the design team that understands frontend code.
When you have a clear understanding of the problems and pitfuls of both the development site and the design side, you’re able to make informed decisions that ultimately affect how quickly you design and execute an idea.
So let’s go into more detail:
1. Brand Guidelines
Brand guidelines should outline who you are, what your vision is for the company and some basic guidelines like your colour palette, your fonts (web and print). How to use your logo and so forth.
This can be as simple as a couple of pages or as big a the encyclopedia of Britannica. I’ve seen those before. They’re generally created by graphic designers which start with the company’s mission and end with recommended use of their logo. Where not to place it and which colours are permitted.
This is the bare bones of a design system. Alone, a design system doesn’t exist.
2. Design library & Digital Guidelines
Design systems should allow for fast feedback and a tool that allows us to store and document user interface assets. This is where tools like Sketch come into play. Sketch cloud allows you to sync up libraries and use them as a reference based on the digital guidelines you create. It allows for continuous design integration within teams, and means that rather than designing from scratch each and every time – we’re designing collectively and with a shared vision for the product.
To be able to implement any design you’ll need to be able to convert design to code quickly – this leads to the next step.
3. Prototype to HTML/CSS process and stylesheet version control
My go to for prototyping and HTML/CSS handover is Invision. When you sync it with Sketch it allows for an iterative design process that you’ll simply grow to love. This means that when you’re after a change in design I simply make changes in Sketch and upload it. Within 10 seconds of syncing, it’s available for clients to view and test out AND shared with developers.
The other benefit of a prototyping tool is that you can start testing right away! With online tools like user testing, you can recruit and test your designs instantly, meaning more design feedback quickly.
The last part of this is version control. When you’re working in a team or are future proofing your design system so that new designers can pick off where your old designers left off – Version control allows you to track and view changes working towards a ‘master’ file.
This ‘master’ file means that changes can be reviewed by other team members and conflicts between team member codes can be notified and rectified so there is one source of truth. This typically sits within something like Github or
What do you get is something like the below.
However, in most organisations I’ve worked for, I’m used to seeing the below:
So to ensure you make the most of design systems, ensure you have all of these parts.
Design systems for remote teams
If you’re like a lot of companies nowadays who are remote, it’s key to design a system that takes into consideration the time barriers and distances that are becoming increasingly common on the web.
With a design system, it allows us to collaborate in the most effective way possible. Active syncing and sharing allows everyone and anyone you want to hire in future to join the design system and share assets instantly. So you’re never starting again from zero.
Tools like Invision, Sketch and User testing allow you to do all three of these things remotely for fast effective feedback.
In any organisation this system can be pushed aside and ignored until the problem gets worse. I’ve see multiple designers tackle the same project, without having a design system setup. Results in multiple UI libraries and products that take longer to build due to multiple libraries and stylesheets that need to be maintained.
So before your next project, make setting a design system something you create and implement at the start, in order to future proof your business and products.
Latest posts by Tania (see all)
- How to Give Designers Feedback (for non designers) - April 9, 2019
- The reality of Design Systems - January 30, 2019
- 20 Spots you have to visit around Auckland Airport & Mangere - January 1, 2019