Thought

Design

The Value of Design System

<p>The Value of Design System</p>

In designing digital products, whether websites or applications, SUFFIX always seeks ways to make the design process smoother and more efficient. A Design System is crucial for coordinating work between Designers and Developers, as well as other team members. It ensures data accuracy and streamlines workflow.

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."

Share

Writer
UI/UX Designer

Netsuwan Hammer