How do you enable efficient, consistent visual content creation without sacrificing flexibility and scale? A design system.
But you probably knew that already if you’ve read the first part of this blog series. That’s where we went over the power of a visual identity and how a design system can help reinforce yours.
Lemonly design systems are assets, style guides, and resources to better leverage an organization’s identity and create a more impactful brand experience.
Save time. With a design system in place, designers (and the whole team) spend less time on small, one-time decisions and more time applying design thinking to add value to the whole organization.
Speak the same language. A design system creates a shared design language across the board. Anyone on the team and across departments can access up-to-date assets, templates, and resources. Even non-designers can easily customize email templates, tweak sales pitches, or update business cards. Edits become less subjective with the established design system to refer back to.
But where to start?
Step 1: Research
Complete a visual audit
The first step in building a design system is a visual audit of your current branding elements. Anything your brand is putting out there should get a thorough examination. This includes brand guidelines, recent content or collateral (print or digital), visual assets, apps, websites, presentation decks, social content, etc. Our handy quiz is a great first step to help you assess your existing assets.
Once you start looking at all of your assets, ask yourself these questions:
- Where are there inconsistencies in your pieces?
- Where could design processes and guidelines be more streamlined?
- Are design elements and visual stories created and critiqued based on a standard, or is it up to individual opinions?
With a visual audit, you have the foundation to start design system thinking––thinking in patterns and modules without losing sight of the whole.
Bonus: It also gives you a high-level view of where and how your organization is telling stories and might even inspire some new content ideas.
You probably already have…
Logos: A cornerstone of your brand’s visual identity, your logo (in its various forms and file types) should be easy to find and use for everyone on your team.
Brand story: How can your design system help you communicate your brand’s mission, vision, core values, “personality”, etc.?
Brand colors: Are your stakeholders using consistent brand colors or just getting “close enough”? Even if your brand colors are established in your brand guidelines and used consistently across the board, there are additional considerations when looking at color for a design system. Illustrations and data visualizations usually require an expanded color palette with a variety of secondary and complementary colors. Specific topics, campaigns, or business units might also have specific color associations to keep in mind.
Brand fonts: When developing a design system, it’s a good opportunity to make sure your type works for your brand across digital and print media. There are other considerations to keep in mind for typography as well: For specific campaign and business units, can new fonts be introduced? Is custom or hand-lettering an option for creative assets?
Step 2: Establish your design system goals
So you’ve mapped your current state with the visual audit. Stellar! Take a second to be proud of yourself.
Good. Now it’s time to gather input and get a game plan together.
A design system (obviously) helps designers save time making nit-picky decisions and clears up uncertainties in the brand’s visual identity, but designers aren’t the only group that benefits from an effective design system. Non-designers will be also able to more easily create content and leverage your brand identity. Do not forget this as you establish your design system goals.
Different stakeholders within your brand will have different priorities and perspectives. Designers don’t always think like developers. Developers don’t think like project managers. And your internal team understands your brand differently than a freelancer or vendor. However, all of these roles (and more) will need at least a basic understanding of your design system as you implement it.
- What are the most pressing pain points that a design system could help address?
- What’s a realistic timeline for creating and launching different elements of a design system?
- Which elements of the design system should take priority as you begin creating?
- What does your brand team look like (internal team, outside vendor(s), mix of both)? How will they help educate others about and implement the design system?
Use these questions to plan the creation and implementation of your design system. By beginning with your goals in mind, we can create a design system that best meets your organization’s unique needs.
Step 3: Design and document
The fun intensifies! An effective design system is built of interconnected parts, which means it can be developed piece by piece over time depending on your organization’s needs.
There is no one-size-fits-all solution for creating a design system, but there are several key areas that should be identified to create a system that is easy to use, flexible to build upon, and consistent across campaigns and platforms.
Get started with style guides and visual asset libraries
Style guidelines describe the various visual elements of your brand and how to use them with existing and new assets.
Core branding elements like fonts and colors: You probably already have these established with existing assets. Your brand name and logo, paired with signature fonts and a palette of primary and secondary brand colors, describe the core of your visual identity.
Illustration: How would you describe your brand’s illustration style? Clean, simplistic, realistic, playful, professional, futuristic? How does it tie back to your brand story? What are some “do this, not that”-style guidelines that will help illustrators create new assets? When is illustration appropriate for your brand’s storytelling? For explaining processes, adding personality, or attracting attention?
Photography: Photos are a great way to add a human element to your visual identity. Think about how your brand uses photos––is to emphasize action? to show people engaging with your product? Create guidelines to help in-house designers or freelancers use photos appropriately in new design assets.
Data visualization: Data is an important form of communication for many brands both internally and externally. What guidelines exist for designers when creating charts, graphs, tables, etc.? Color, type, and chart style are often overlooked, but these elements represent your brand just like icons and illustrations.
Asset libraries house visual assets that can be accessed by your whole team to create new content in line with your style guidelines.
Icons: Icons are generally the foundation of a brand’s design language. Set your stakeholders up to quickly and easily show instead of just tell using design across multiple platforms––web, print, animation, social media, and more.
Illustrations: Start with illustrations for the core elements of your product or service, then expand with more specific depictions of typical use cases or special applications. You want a set of visuals that speak to who your brand is but can be applied across a variety of contexts, campaigns, and platforms––explaining complex process, communicating brand values, and adding personality.
Photography: Create photos of your products, users, employees, office––whatever helps tell your brand’s story. If you have an existing library of photos, add tags or sort images using a clear folder structure. Everyone on your team should be able to easily find photos for their needs.
Templates: Having a set of pre-formatted templates for common use cases will further streamline your content creation process. Folks across the team will be able to “plug and play” using visual assets like icons, illustrations, and photos to make emails, sales briefs, presentation decks, or other collateral.
As long as the design system’s creation and iteration builds off of an effective visual style guide, you can take it one step at a time. Take what you already have (see the visual audit) and use it to inform where you’re going.
By the time you’re ready to launch your design system, your assets, guidelines, and educational materials should be well organized and easy for anyone on the team to navigate. We’ll go into more depth on the rollout, organization, and maintenance of your design system in Part III of this series.
In the meantime, read our design system case studies and get started by examining your existing visual content. Chat with us if you have questions about making a design system work for you.