Design System
Day 2
Design Principles
& Design Tokens
Nutan Khangar
Ui/ UX DESIGNER
Swipe Left
1. Core Design Principles
Understanding and applying foundational
design principles is crucial for creating
effective and user-friendly digital products.
Nutan Khangar UI/ UX Designer
Consistency
Ensures uniformity across all elements of a
product, making it easier for users to navigate
and interact. Consistent design reduces
confusion and enhances user experience.
Accessibility
Designing products that are usable by people
with diverse abilities. This includes
considerations for visual, auditory, and motor
impairments, ensuring inclusivity.
Scalability
Creating designs that can grow and adapt to
increasing content, features, or users without
compromising performance or aesthetics.
Nutan Khangar UI/ UX Designer
2. Design Tokens
Design tokens are named variables that store
design attributes like colors, typography, spacing,
and more. They serve as a single source of truth
for these attributes across an entire brand or
system.
Nutan Khangar UI/ UX Designer
Role in Design Systems
Consistency
By defining design attributes in tokens, teams
ensure uniformity across all product interfaces.
Flexibility
Tokens allow for easy updates to design elements.
Changing a token's value automatically updates all
instances where it's applied.
Scalability
They bridge the gap between designers and
developers, providing a common language and
reducing misinterpretations.
Nutan Khangar UI/ UX Designer
How to Implement ?
Color Tokens
Define primary, secondary, and tertiary colors,
ensuring brand consistency.
Typography Tokens
Set font families, sizes, weights, and line heights to
maintain typographic hierarchy.
Spacing Tokens
Standardize margins and paddings, creating a
harmonious layout.
Nutan Khangar UI/ UX Designer
3. Real-life example
IBM's RealThings
Design Methodology
IBM's RealThings design methodology exemplifies
the principle of consistency by using images of real-
life objects in software interfaces. This approach
creates a natural and intuitive user experience,
allowing users to focus more on their tasks and less
on computer artifacts. For instance, IBM's
RealPhone application utilized familiar telephone
imagery to provide a consistent and user-friendly
interface.
Nutan Khangar UI/ UX Designer
Thank You For
Reading Till The End
Follow for more such content!🚀
Got thoughts or questions? Drop them in the
comments—I’d love to hear from you! 💬
#DesignSystems #UIDesign #UXDesign
Nutan Khangar UI/ UX Designer
