Roland PokornyikTo better adapt to the new work style based on decentralized teams, many companies are finally investing resources into digitizing and standardizing their processes.
This has resulted, among other things, in an increased interest in design systems.
In this detailed blog post, we will break down what a design system is, go through the different steps you need to follow to create your company’s design system and provide some expert insight into developing an email design system.
What is a Design System?
A design system is a collection of reusable design patterns, modules, code snippets, and templates that are used to standardize the design process.
The definition of a design system is different from brand guidelines. But the concepts are interconnected.
Brand guidelines are a set of rules explaining the brand identity and UI components. Usually highlighting logo placement, colors, fonts, and even brand voice and tone. Design systems are more focused on the functional side of design, providing pre-established components that can be reused and combined.
Examples of a design systems
In this section, we will provide examples of what a good design system should look like.
Apple Design System
A design system should portray a consistent design language that any member could understand: marketers, designers, and developers. Some bigger brands go even further to provide a full-fledged, online design system explaining their design decisions in detail.
Apple, for example, has a thorough online guide where they share their design resources and design system assets: from their app architecture to their signature typography.
They even go into detail about their reusable UI elements for each of their operating systems and tools.
Cava Design System
Check how the different button styles, header styles, form fields, typography, and menus are shown in this example.
A good design system should include design elements that follow design principles, such as text/background contrast and content hierarchy (H1 larger than H2 and so on).
What are the Benefits of a Design System?
Now that we understand what a design system is, let’s dig deeper into why you should care about implementing one for your company.
Maintaining brand consistency
Brand consistency across platforms is key to promoting a coherent brand. It increases brand awareness which makes your brand stand out in the customer’s minds.
As your team gets bigger and your communication channels increase, you might lose control over who designs what and how. And you end up with a scrambled inconsistent brand.
When a company has a design system, it becomes the brand’s single source of truth for design. It becomes the origin of all content created for any distribution channel.
Scaling content production
Having the ability to put together predesigned elements allows teams (design teams, product teams, marketing teams, etc.) to create multiple designs in a timely manner, without having to reinvent the wheel every time they need a design.
Empowering team members
In the past, the design process was exclusive to only a dedicated design team (external or internal). This was because of the lack of design skills of the rest of the company and the importance of maintaining a consistent design.
Using design systems, multiple team members can participate in the design and content creation processes because components are already pre-designed.
Marketing teams don’t need advanced design or coding skills to create visual content for web pages, email campaigns, ads, and e-books. All they need to do is reuse pre-established components and stack them like a puzzle.
Your team members feel empowered. The workload would be evenly distributed while always guaranteeing high-quality productions.
The Key Elements of Design Systems
Design systems are composed of two main components:
- A style guide
- A component library
Style Guide
A style guide is a document that contains design guidelines on how to present the brand visually.
Style guides provide detailed information and instructions on the brand’s visual assets: logo placement, color palettes, typography, and font pairings. But also provide insight into the brand’s tone and voice, like words to use and words to avoid.
Style guides can be a simple presentation or PDF document or can be directly attached to the component libraries.
Component Library
A component library, pattern library, design library, or UI kit is a collection of predesigned, reusable content blocks and code snippets.
The design assets are created separately from each other to be reassembled into a unique, standalone design.
A component is composed of the following main elements:
- A unique title
- A clear and concise description
- Component attributes: elements that can be edited
- Code snippets associated with the components
You can enrich your design library with a pattern library, which is a set of reusable “templates”. While design libraries contain separate blocks, pattern libraries includes groupings of blocks.
Building a Design System
Now that we understand what a design system is and why it’s beneficial for your team, let’s get into more detail on how to build design systems from scratch.
Step 1. Create your style guide
To create design systems, we start by creating a style guide. Centralize your visual brand’s foundation in one place: your logo and all its variations, your logo design typography or fonts, and color palettes, then detail usage instructions and guidelines for each element of your visual brand.
Show the main brand logo accompanied by its possible color and shape variations as well as the recommended padding and margins around it. You can also add a warning of what logo variations are not permitted.
Skyscanner published an amazing brand page recently where they break down their brand identity and explain the symbolism behind their logo, color palettes, and illustrations. This is a little different from a standard internal style guide. Still, it’s an excellent resource where you can get inspiration.
Step 2. Audit your current design components
To determine which components you need to create, start by reviewing your current designs and brand elements.
Audit every page on your website, every screen of your mobile app, and every block in your email newsletters to detect the most used and repeated components.
Then organize them on a board accompanied by screenshots.
Add descriptions or tags to each screenshot detailing the type of the component (button, table, Header 1, etc.)
Your goal is to establish the most exhaustive list of common components that you will later design and set up in your pattern library.
Step 3. Design your pattern library components
Once you have the most important components, you can start building your library. Following your style guide, design and code content blocks that later on you’ll reuse on your website, social media posts, or any other communication channel.
Each component you create should have a unique and descriptive title accompanied by a short description. Make sure that anyone outside of your team can understand each component. You can even add a set of usage guidelines to go with each component.
Mailchimp has a great example of a pattern library where they beautifully organized their components, divided by category: Buttons, Navigation, Feedback, Form Elements, etc.
Each category contains a selection of components and each component is presented as follows:
- The component title
- A visual of the component
- A description of the component and/or important notes
- The code snippet
What is an Email Design System?
An email design system is a design system applied to email design and campaigns. It focuses on establishing a set of predesigned email modules that can be reused in any email campaign, regardless of the sender, content, or audience.
Email design systems recently became popular in the email marketing industry. Marketers now understand the importance of email and realize that it’s one of the most efficient and personalizable channel.
Teams have adopted email design systems as a way to optimize their email creation processes while guaranteeing a unified, coherent look for emails across all campaigns.
Example of an email design system
Every Wednesday, the content team in Chamaileon sends out the blog newsletter. It used to take on average 5 or more hours to create the weekly campaign. Designs were all over the place, emails looked broken and incoherent, and the team dreaded Wednesdays.
We then decided to take the time and set up our blog newsletter’s design system. We created 8 email modules that would always be used in all the weekly blog newsletters.
The email modules we created were the following:
Thanks to our email design system, creating emails became an effortless task that takes just a couple of minutes.
Our blog newsletters now look coherent and consistent throughout the year. And as you can see from the screenshot below, it didn’t prevent us from displaying some creativity or adapting our newsletters to the context. Black Friday or Thanksgiving emails were updated to fit the general aesthetic of the season.
How to create an email design system?
Creating an email design system is similar to creating a standard design system. Start with analyzing your previously sent email campaigns and list all the email modules that have been repeatedly used.
The modules depend on the type of emails you usually send, as well as your industry. A fashion brand that usually sends promotional and transactional emails will have different email modules from an online news outlet.
Here’s a list of a couple of standard email modules that are needed in any industry:
- Email header
- Email footer
- Social media icons block
- Email main header and subheaders
- Email body text
Next, you can move on to designing your selected email components.
In the best drag-and-drop template builders, you can create reusable email modules. Create your email modules and save them. Then simply drag and drop the email module into your email template when needed.
Capping off design systems
If you’ve been hearing the word “design system” being thrown around between every two meetings and you’ve been too afraid to ask: what is a design system, now you know! In summary, an email design system is a set of reusable components that help marketers optimize their content creation workflow while maintaining a coherent brand identity.
Frequently Asked Questions (FAQ)
Rukham Khan
Yauhen Zaremba
