What is a Design System?
A Design System is a complete source for all elements the team may need to design, develop, and improve a product. It consists of a group of deliverables that should be continuously updated with the product and current technologies. In other words, it is a whole process that the company builds and maintains to strengthen their brand and to deliver excellent user experiences.
What are the Elements of a Design System?
The system can contain numerous elements, such as:
Brand Guideline
The brand guidelines are the way the company represents itself as they intended. It is a handbook of how to represent the brand in any scenario to avoid wasting time on small decisions when it comes to how the company’s identity should appear. Furthermore, the guideline unifies the company’s image regardless of the number of people producing collateral pieces and always ensures an excellent user experience.
The brand guideline usually includes:
- Color Palettes: The primary color palette used in the logo as well as the secondary color palette to be used as supporting colors including all colors’ exact names and numbers in various uses.
- Logo Variations: Logo color variations (black and white, on light background, on dark background, full color, etc) and logo tagline variation, and logo shortened versions if any (abbreviations or acronyms).
- Typography: The fonts and typefaces used to represent the company. It includes the main fonts and secondary fonts for headlines and body.
- Space requirements: the minimum space required around a logo or how much space is needed when placing the logo near a margin.
- Placement: How is the logo presented in different platforms and environments such as websites, social media, presentations, printed media, etc.
- Brand Tone: The language used for communications whether it’s formal or informal and their grammar.
- Examples of acceptable and unacceptable uses: How the brand guide elements should be used in different situations and sizes, and how it should not be used to maintain the company’s image.
Atoms
Atoms are small individual designs that serve a purpose and can’t be broken down any further without losing its functionality. For example a button on a mobile app or a header text in a website. All those small designs still need to represent the company and its brand.
Components
They are smaller parts of the design system, yet larger than atoms, that can be reused in different combinations to serve various purposes while adhering to the Brand Guideline.
UX guidelines & Principles
The Design System must follow UX guidelines to deliver an excellent user experience such as: Hierarchy, Consistency, Confirmation, User Control, Accessibility, and more.
Why Do you Need a Design System?
When struggling with inconsistent UX of your products and services or incurring recurring costs for designing new products/services/platforms, that’s an indicator that a Design System is needed.
The absence of a Design System can result in incomplete use case scenarios that correspond to a component or a pattern. For example: When “Progress indicator” component guidelines do not include “determinate” indicator scenarios.
When a Design System is not executed correctly, it can cause a lack of shared purpose when the design system organisms are not in complete harmony with the product’s purpose and the brand. Issues can reach the programming level when equivalent “Code” can not be effectively created for the Design Modules in the system which causes poor synchronization with engineering.
HUED Success Stories
MONSHA’AT
First ever Design System for a governmental entity in KSA. We did it when Design Language Systems were starting to become mainstream.
AL RAJHI TAKAFUL
The most robust enterprise level Design System. The new DS enables Al Rajhi Takaful to build new digital solutions that offer consistently delightful user experience.
Impact of Design Systems delivered by HUED
