We designed an in-house design system for Zetwerk Brand, to have similar components and interactions in all our products.
The design System was defined to make it easier for the development to incorporate components and use them in all the products.
Timeline
This was an ongoing process that took approximately 6 months to complete
Background
We created this project to bring consistency and coherence across Zetwerk’s product ecosystem. Previously, each product was designed with its own visual style and structure, which led to a fragmented experience and a lack of clear, recognizable brand language.
To address this, Zetwerk decided to build a unified design system that could represent a harmonious brand across all products. The design team developed a system that aligned with engineering constraints, supported design scalability, and stayed true to Zetwerk’s overall brand identity.
Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses.
Anatomy
1. Label
This should indicate what sort of information the field requires and is left-aligned directly above the input area.
2. Placeholder text
Let people know how they should use the field, for example, “Start typing to see names.”
3. Input area
This is where people enter text.
4. Helper text
Gives context about a field’s input.
Variants
Label
This should indicate what sort of information the field requires and is left-aligned directly above the input area.
Error
When the user interacts with an input field and provides invalid or incorrect data, the system can display an “error” helper text. This is essential for notifying users about input validation issues and guiding them to correct their mistakes. The error message should be clear and specific to assist users in rectifying the problem.
Success
The “success” helper text can be shown when users successfully complete a task or action. For instance, after submitting a form, displaying a success message lets users know that their action was successful, providing positive feedback.
Warning
The “warning” helper text is useful when users need to be alerted about potential issues or risks. It can be used to warn users of potential consequences or actions that might have unintended results.
A button is a clickable element used to perform an action. It contains a text label and a supporting icon can be displayed.
Button Specs
Icon
Text buttons might be supplemented with an icon to both clarify action and call attention to a button. Icons are always positioned to the left or the right of the text label.
The button can also be used without label text.
Button Size - Regular
The regular button is the default button size.
Button Size - Small
An alternative button size for use in tight spaces.
Filters are used to find the required item by providing specifications. It makes finding the required content easy and quick
