Portfolio Details: Artgo

Waterloo Design System

Project information

Category: Other
Client: DCSL Software
Project date: 2020-2022

Background

Waterloo scaffolding vue based framework makes enable to use of an iterative rapid application development (RAD) style and the construction of prototypes. These days, RAD is widely used to describe the use of various techniques to speed up application development./p>

Design systems

Design systems are ever-evolving sets of reusable components, principles, and guidelines that give designers and engineers a shared language for consistent product and web design.

The real value of a design system lies in its ability to give designers and engineers the guidance they need to create smoother user experiences and digital products. Good design systems help designers understand what to make and how to make it, but they also provide the rationale and motivation behind the design.

Why Design System Needed?

There are many benefits of a Design System. It helps the entire company deliver better and more consistent design solutions efficiently. A Design System eases out the process of designing delightful experiences for end-users. To maintain:

- Facilitates Consistency
- Better Communication
- Clarity to Developers
- Efficiency
- Team works

Layout and Grid

They can reflect the personality of your brand. They can attract users, and they can better communicate your message. Any UI Design guidelines are likely to mention colors prominently. Color can set the basic mood, tone, concept, and connotation for a brand or product.

Colors

Typography

Typography is part of the overall visual language you use to communicate with your users. Just like the visual elements of color, form and pattern, typography can set a mood, set a tone and present a product the way you want it perceived.

Icons

Icons are images or symbols that represent specific actions or tools in an interface. To achieve harmony for an icon family, we need to maintain the same stylistic rules.

Forms

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Text field component design should provide a clear affordance for interaction, making the fields discoverable in layouts, efficient to fill in, and accessible.