Design systems are essential for creating beautiful, professional, and consistent website experiences. In this guide, I will show you the basics of design systems and how they can help you as a new web designer. I will break down what design systems are, why they're so popular with designers right now, and how they can help you as a new web designer.
Knowing which fonts, colors, and styling will work best with your content and brand is essential. When you standardize these things, it's called a design system. Design systems help you maintain consistency, so you're not making random color and font choices at every turn. They're also beneficial when working with more than one designer because everyone will be following the same set of design instructions, if you will, i.e., Headings are always this font size, buttons are this color, corners are rounded at 32px, and so on.
What is a Design System?
A design system is a collection of design rules that dictate how your brand should look and behave online. It can include things like font choice, color palettes, and margin and padding settings.
Once you have a design system in place, you can use it as a roadmap for all of your web design projects. This will ensure that your site always looks cohesive and on-brand, no matter who is working on it or what project they're working on.
Additionally, design systems can help with organization and efficiency when working with other designers. If everyone is using the same design system, then everyone will be on the same page when it comes to design.
This guide was meant to introduce you to design systems and explain why they're so popular right now. Let's jump in!
When to use a design system
Design systems are critical when working with a team or building a large project. They help maintain consistency across all design elements, which can be very helpful when multiple people are working on the project. Design systems can also help speed up the design process by providing a set of guidelines that everyone can follow.
That said, do you always need a design system for every project?
When to skip the design system
Not every project needs a design system. In fact, for small projects or one-off landing pages, they can be more of a hindrance than a help. In these cases, you can probably skip the design system and go with your gut instead.
How to Create a Design System
Alright, let's talk about how to create your first design system.
Step 1: Audit your design
Before creating a design system, it's helpful to audit your current design or wireframe. This means looking at all of the UI elements and layouts you're using and noting what works well and what doesn't. You might also want to consider what fonts, sizes, colors, and design styles work best for your brand. This will give you a good starting point for building your design system.
When auditing your design, make sure to pay attention to the following:
- font types and sizes
- color palette
- layout and grid system
- design style (e.g., minimalistic, modern, etc.)
Step 2: Create a Consistent Design Language
A design language is made up of a few key pieces: Typography, Sizing, Color and Graphics. When you standardize these key pieces, designing your websites and applications will be so much easier, more professional, and consistent — especially as your project grows in size over time.
Design Language: Typography
Typography is a huge part of design, and when it comes to the web, there are a few things to keep in mind.
One of the best things you can do for your web design is to keep your font choices simple. When you have too many fonts, it becomes difficult to create a cohesive design and the text becomes harder to read. Plus, too many fonts can slow down your website's loading time.
Simplifying your font choices will make it easier to design around a single typeface and make your website look more professional. So when starting a new project, try to stick with two or three different fonts at most. This will help you create a more polished design overall.
Where to find great fonts
There are a few great places to find free fonts for web design. My personal favorite is Google Fonts. They have a huge library of fonts to choose from, and they're all free to use.
Another great option is Font Squirrel. They have a good selection of fonts and offer some free commercial licenses.
If you want to keep things simple, I recommend using System Fonts.
System fonts are a collection of fonts that come pre-installed on most computers. They're typically simple and easy to read, making them a good option for web design. Arial, Helvetica, Times New Roman, and Tahoma are some of the most common system fonts. Check out systemfontstack.com for more information on using System Fonts in your websites.
Inter is a carefully designed typeface developed by Rasmus Andersson, and it is probably my favorite sans serif font for user interfaces. It's available for free on Google Fonts, or from rsms.me/inter.
If you have an Adobe Creative Cloud subscription, you can also use the Adobe Typekit Library to add even more fonts to your collection not available in free font libraries. The Typekit library has a vast selection of professional fonts, and they're all licensed for commercial use.
A word of caution: just because you have many choices to choose from does not mean it is a good idea to choose many. Too many font choices can be overwhelming and can make your design look cluttered. It's always best to stick with a few well-chosen fonts and use them consistently throughout your design.
Design Language: Sizing & Spacing
When it comes to sizing and spacing, consistency is key. This means using the same font size, line height, and margin throughout your design. This will create a more polished look and make your design easier to experience. You might also want to consider using a grid system to help with sizing and spacing.
Design Language: Color palette
A well-established color palette is an integral part of any design system. It ensures that all elements of your design are cohesive and look polished. Plus, it can help make your website or application easier to use by providing a visual reference for users. When choosing colors for your design, try to stick to a few fundamental principles:
- Use a limited number of colors (3-5 is ideal)
- Use different shades and tints of the same color to create variety
- Stick to a light/dark contrast for easy readability
- Use complementary colors for maximum impact
Color Palette Tools
If you need help choosing colors for your design, there are a few great tools to help you get started.
Adobe Color CC is a free web-based tool for creating custom color palettes. You can choose from various color models or create your own set of hex codes.
Colormind is a free online tool that generates color palettes based on an image. All you need to do is enter an image URL, and Colormind will generate a palette of colors based on the image.
Coolors is another free online tool for creating custom color palettes. You can choose from a variety of different colors. Coolors also provides a resource of trending, popular and appealing color palettes that you can draw inspiration from.
Copy Your Favorite Brands
One great way to get started is to draw color palette inspiration from your favorite brands. Check out their website or social media pages for a look at their color palette. Try to mimic their colors in your design, or use them as a starting point for creating your own color palette.
Design Language: Graphics, Imagery & Icons
Graphics and icons are a great way to add visual interest to your design, but when using them, be sure to keep things simple. Too many graphics can make your design look cluttered and overwhelming. When selecting graphics and icons, try to stick with a limited number of styles and shapes. This will help you maintain a cohesive design throughout your website or application.
Check out The Noun Project for great icons
Step 3: Create a Design Library in Figma
A design library is a great way to keep your design elements, colors, and typography organized and consistent. When creating a library, be sure to include all of the following: fonts, colors, shapes, graphics, and icons. This will make designing your websites and applications easier using a cohesive style.
Figma makes creating a design library very easy, allowing you to create Global Styles, Components, Typography, Sizing and more, so that your designs are more consistent. Another cool thing about Figma is when you update or change something in your Global Design Library, it will reflect everywhere else in your design.
Step 4: Document as you go
As you work on your design system, it's important to document and update any changes you make. This will help keep your project consistent, even as your design and brand changes over time.
Conclusion
Okay, so we've looked at the essentials of creating a design system for web designers. We discussed the importance of consistency and how to create a design language using typography, sizing, color, and graphics. We also looked at how to build a design library and why it's essential to document changes as you go. By no means was this a comprehensive deep dive into design systems, but this should be enough to get you started and to help you improve your design skills along the way.
Now go build something!
- Brad
