If you have been in the design world for some time, you would have probably heard these word in some order or form: Design System, Design framework or a patterns library thrown in somewhere. They all refer to the holy grail, the only and absolute source of truth for any product design – the grand library of all sitting components in your designs. It consists mainly of all the design patterns, standards, rule of thumbs, UI patterns and components that are used throughout a product to serve as it’s design language.
So….where do we start?
If you’re at the beginning of a project and starting something from scratch, Design system becomes a lot easier to plan and navigate through rather than the end of it. It gives you plenty of time to think about styling of components and the visual direction you might want to take for the project. However, creating and developing a design framework when you have started shaping up the UI design of the product is a lot easier as well as you can see patterns emerging from your designs – all you have to do then is collect and place them in one place. The best practice would be to collect these components and add them in a library and just build on top of that as you go along.
Why do I need a Design Framework?
A. Kill inconsistency in your designs
In a Post-covid world, it has become increasingly important to focus on efficiency, how the team collaborates and how to manage communication between design and product team. When there are multiple team members involved with many working on the design at different points of the entire process, it is unavoidable to see conflicting patterns, wrong designs or various other interpretations of the designs. Which is why it is better to set a standard or a guide to allow designers to play by the rules.
B. Streamline your processes
Having a design system can greatly streamline your communication process and provide clear standards and direction to all stakeholders involved. Instead of asking for hex codes or shadow opacity or font styles – anyone working on the project can simply pick up the details from the design system.
C. Late stage design changes
If you have worked as a product designer, you’d know how frustrating this stage is. The design has left your desk in the outside world of suspicious developers and very unhappy stakeholders. This is their chance to prove to the world how they could have been the best designer in the world. And you are suddenly under a plethora of design changes and ‘improvement suggestions’. Not sure what to do? Once you set parent components with all it’s states in your design system, you can easily make design updates to the components you’re setting in the library and they’ll be automatically updated in all of your designs. How cool would that be?
How to Create my Design Framework?
Now that I have you convinced you absolutely need a design system for your project, here’s how to get started on it.
The design system can be a file on any software you use for designing. That is Sketch or Figma or Adobe. My personal preference is always Figma but any software that has a cloud version should suffice to lay out your components in. There is a Free design system template that you should check out for inspiration.
To create a design system, you need to divide the entire library into a solid visual hierarchy. Start your design with the most important components and then strip them apart to see overlapping or emerging design patterns. Then work your way to the smaller and finer details in your design to keep adding to what you have already designed.
Color Styles
By now you’d have figured out a logo or a general theme of your next product. Setting up a color scheme should be one of the first decisions you should make before taking on the design work. It sets the theme, positioning of the product or brand and would go a long way in setting the overall look of your design.
Example taken from Airbnb Design System
You can start with the main set of primary colors that you would be using. Ideally these will be used the most in your product.
Secondary colors would complement your primary color scheme by adding either a contrast or muted tones to what you’re designing. You can even add slightly varying shades of your primary colors to increase or decrease emphasis over something.
Feedback Colors should be the set of colors that are meant to grab visual attention whenever used. They come in handy while designing warnings, errors, or important notices, including success states.
Setting up Text and Font Styles
Typography is one of the key building blocks of your product. It not only helps you communicate with the user but also sets the tone of your designs. You can break it down into this order: Headers and paragraphs and component copy like text on buttons, headers, navigation or input.
Define styles for each style of Heading in H1,H2,H3 and body text in B1, B2,B3, Captions and sub-text
Same would go for Component copy. It also helps if you create component styles and copies along at this stage.
Grid
If there’s anything that needs most of your braincells, it’s this. Planning out your Grid can be one of the most rewarding early exercises that you will thank yourself (and hopefully me for) later on in the project.
A grid keeps all the other components on the page in the right place and order. This is the overall design space. There are two types of grids: vertical and horizontal.
The vertical grid is the one that is most commonly used and keeps everything aligned horizontally. There are many popular grid systems like Bootstrap or the older 960px grid.
A horizontal grid isn’t that common. A horizontal grid is used for typography. It creates vertical rhythm for paragraphs and is commonly seen in newspapers.
I really like the 2x Grid approach in IBM Design language to create consistent and scalable design units only going by the rule of 2.
Example from IBM Design language – 2x Grid
Elevation and Modifiers
This group of components is responsible for uplifting the aesthetics of your product. It consists of different shapes, elevations, design patterns that you can possibly combine to complete the finished UI.
Example taken from Material.io
Search and Input
Input fields are one of the key components that allow users to communicate with the product. Not only that, it allows users to do many important tasks like upload data, provide important information and so on. It’s usually best to create input fields with different states just so it allows the user to understand the action is taking place but also developers to build an intuitive interface as well. You can start with Filled and an empty state in the beginning.
Example taken from Muz.li
Buttons
Nothing stands out more in a UI screen than a Call to action. Why? This is where your users choose to make decisions and interact with your product.You may start with defining the size and shape of your primary button, you can then create a secondary button in active, inactive state. And then you can build up on all other states.
Example taken from Eva
Errors
For mobile or web applications, having error states designed comes in handy in tricky situations. You can decide a suitable component for your product whether it’s a toast, error in input field or a pop-up modal. Start with a basic title, message and two possible action button. You can then repurpose and reuse this throughout the app.
a Example taken from ANT Design System
General Tips
- Keep scalability in mind – your final product will not have just a few buttons or input fields, it will host many other complex and non-complex components. Always come up with UI elements that you can combine to scale up or strip down to simpler elements.
- Stay Organised – Monica Organised! It takes a lot of effort to make a usable design framework. I often find a weekly walkthrough with the designers over newly added patterns and components very helpful.
- Add Context and Design notes – everywhere! Designer notes help the viewers and developers understand the context and when to use the component.
- Spacing – Padding and margin isn’t really a component but it is very important to set a few thumb rules, guides so your designs are always consistent.