Developing Semantics for user-centric design systems to empower users with control points, enabling seamless customization of their interface based on individual preferences. The system provides users the flexibility to adjust design elements, ensuring a personalized and tailored experience.
About The Platform
A no-code platform for end-to-end app creation. It leverages data model/data operations(CRUD) and makes UI creation at the end. It also empowers users to build scalable apps. Implementation of Dynamic Design System for UI would be primarily focused on data first approach.
Backend
Neon(PostgreSQL)
Cloudfare Workers
Frontend
Tailwind CSS
React
The Problem
The current design systems had themes. A theme describes the fundamentals of Design Systems to elemental level, the tokens for colors were mapped with only few components.
There have been developments in building fundamentals, layouts, UI but the major problem faced that we lacked component system that mapped to UI.
Design Process
but how?
Data building/modelling
Pre-defining attributes and relationships with visual interfaces
Permissions
View Authorizations, Providing Domain names
Deploying UI
prioritizing functionality by visual approach from defining logic and workflows to button, forms etc
This is where Dynamic Design System starts
Writing down Fundamentals
Design elements are the basic building blocks of a user interface. The first step in creating a comprehensive design system is to define its base level elements. These elements combine to determine the components of your product.
Tokenisation includes setting up Values and Variables(explanation later in this section). Tokenization of individual fundamental was done which has to be different from Tailwind CSS. The nomenclature/ naming convention played an important role in the initial stages.
Typography
UX
Token Generation
Server Testing
Typographic scales in design systems ensure consistency and readability across various screen sizes. While offering users the freedom to choose their own size might seem appealing, it can lead to inconsistency in design language. To maintain a cohesive visual experience, we have provided predefined typographic scales within the system.
To use it, the user control points are common scale ratio(like Major Third, Golden Ratio etc) and text base value.
Type styles includes: Display, headline, title, body, and label.
Variable- Scale and Text Base
Color
UX
Token Generation
Server Testing
Color System follows an hierarchy where previous is dependent on the next. User can set colors(Primary, Secondary, Accent) which gets automatically assigned to every element of the UI. It had the following layers.
Color Palette
UX
Token Generation
The palette is generated with respect to the Primary/Secondary color chosen which is then assigned number nomenclature goes under Variant.
The palette generation was initially an Arithmetic series of HSL values taking user input color as base but the generation lacked accuracy when saturation is too low or high. Then came the Parabolic approach (in HSB) of palette generation that means the colors generated lie on the parabola with base variant at the vertex.
This generation took some serious brainpower (and coffee) to create!
Color Themes
UX
In simpler words pairing colors that would go well taking two main color at a time. An Extensive combinations of color Variants and Values were take through Color Contrast Test to arrive at a repetitive/common theme. The theme would not be a part of user selection, it will aid us in color roles.
Final Outcome
Max accuracy-
Color Roles
UX
Token Generation
Server Testing
Color Roles are set to define what color property goes where. Each color role follows the same logic for all tokens, but not all tokens are defined for each color role. Working on color themes has set bounds and eased the process by narrowing down the color set samples. It was essential since design token should map data sets UI.
Final Outcome with Tokens
Final Outcome -Visualization
Spacing
UX
Token Generation
Server Testing
Deciding control points for spacing was difficult since it would give too much freedom to the user, confusing and giving unsatisfactory results. This has minimum control points which includes base value and follows a fibonacci.
Spacing set includes Margin, Padding and Gap.
Token generation and assigning Variant was done is such a way that atom, molecules, Organism follows an hierarchy, for example gap between an icon and text in a button(atom) will be lesser than gap between two buttons(molecule) and so on.
Testing and Info gathering, tokenisation
Taxonomy
The naming convention derived from the taxonomy is ordered from the most generic categories to more specific. This is an intentional way of ordering each category to build upon one another, resulting in tokens that have natural, human-friendly names
Property
This specifies the UI object that the token relates to. It answers the question, “what object uses this token?”. Eg. bg
Value
It signifies the visual hierarchy, or how much an element visually stands out. It answers the question, “how visually distinct is the object using this token?”Eg.primary
Variant
It signifies the quantitative element of the value . It answers the question, “how much of the value is used?” Eg.300
Purpose
The general purpose that the token communicates within the UI. It answers the question, “what is being said to the user?” Eg. validation
State
It refers to current condition, which can communicate various things to the user. Eg.hover
Component System
UX
Token Generation
Server Testing
Component system combination of fundamentals, organism of its own. It offers a structured and efficient approach to building user interfaces by making it reusable, scalable and consistent.
While working on it, I was gathering different UI components which were used in our platform along with new components which were made by fellow team mates for clients.
Since the platform follows data first approach, API calls and design also plays an important role.
Diving further, atoms in a component system can be organized using hierarchical approach. There are different levels of complexity in components with different purpose
Starting with what’s there
Jotting down the list of components that were used in the platform and were available (outside the platform).
System generated Model Elements
Known Components
Diving Deep
The platform uses terms like “create one”, “get many”, “get one” widely, these were divided under the same umbrella to find common grounds
Categorisation
Making of Component System
Create One-Form
Create ones are mainly forms which are used to retrieve data from the user. They are generated by selecting model type as-Create-One
Next Steps
Forms can be of many types, which is more towards customization and will be next step of the process.
Nice to have second level of interaction intervention- like progressive disclosure.
Get One- Viewing Data with actions
Get one are viewing form the data we collected from users by Create One Model Type. They are generated by selecting model type as-Get One(Card) > choosing the model
Can also be get many
Findings from above sorting
1st level of Investigation
Answers
2nd level of Investigation
Answers
Can we train our system to identify these?
Image can be done
Final Outcome- System Generated Get One
Final Outcome-After Custom changes
Thanks for Visiting!