The Value of Design System

Our experience shows that Design Systems are extremely important for teamwork, including collaboration with other departments and designers within the team. Without a Design System, more time is spent understanding how other designers work, what fonts they use, why certain colors are chosen, etc., which can delay the process. A Design System clarifies the entire framework and allows for easier future adjustments if the website or app changes.
Additionally, Design Systems are vital for users (User) in creating a user experience (UX), like the consistent placement of “Next” or “Back” buttons for user familiarity.
Creating a Design System
Grid Systems
Grid Systems are indispensable in website or app design, providing organization and consistency across devices, from computer screens to phones.
• Bootstrap is a well-known tool for creating responsive websites.
• The 8-Point Grid technique helps in layout spacing and sizing, including font sizes.
Color Systems
Color Systems involve defining primary, secondary, and neutral colors for use on websites or apps. Primary colors are main brand colors for recognition, secondary colors enhance primary colors, and neutral colors (often black and white) are used mainly for text or backgrounds.
Typography Systems
Typography Systems ensure consistency in design through style fonts, font sizes, and font weights. Brands usually specify 2-3 fonts, categorized for headlines, subtitles, text bodies, and buttons. Font sizes and weights are standardized across different sections.
Icons & Symbols
Icons & Symbols should be consistently sized and styled, using techniques like 8-point Grid for uniformity. The style (e.g., strokes or fills) should align with the overall design concept.
Images
Images play a key role in storytelling on websites or apps, especially when text alone is insufficient. They attract user attention and aid in understanding. Image selection should align with the product or service and be consistent across the platform.
Implementing these components in a Design System before starting design saves time and allows for adaptation to different projects, especially urgent ones. This illustrates the "benefits of a systematic design process."
Netsuwan Hammer