A design system is a set of tools, and resources that help your team scale design processes. With shared workflows and assets, your team can follow brand guidelines be more efficient. It helps solve the following problems:
This guide is broken down by each of the key aspects your design system should include and how to effectively share your design system within your organization.
Refer to your organization's current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available. And any design patterns that are used for your marketing efforts.
The most important part of any campaign is the message it's communicating, the text itself. Your design system should include some guidelines around how copy is written. From the mechanics of the content, to the voice and tone.
Use these general tips to develop the rules around your organization's writing approach:
A design system shouldn’t feel like something that stifles creativity. Don't make it too rigid, a certain level of hand-crafting is important. It should allow for greater creativity within a set of guidelines. The long-term benefit is that a designer can take greater care and give better thought to solving each solution instead of rushing to put together something that comes along.
Static components answer the how. Guidelines provide answers to: why, when, and where. "Can we?", "should we?", and "what if..." They should educate on constraints: workflows, habits, and best practices. Having this information leads to a reduced need for everyday problem-solving and decision-making.
Show examples of how to be creative with structure. Encourage “off-roading” to evolve system. Consider examples from other organizations to help show ways to utilize a system without feeling boxed into a boring design.
Documentation as a web page is the best way to go when developing your design system:
Some examples of design systems presented as web pages:
This guide has been put together by the Blocks Edit team. Having a design system of reusable components for your organization to use, Blocks Edit makes your components visually editable. So anyone on your team can build emails and landing pages on their own while ensuring they are following brand guidelines throughout the process.
