In the digital design world, design systems have become increasingly important. They are advantageous not only for designers and developers but also for companies looking to improve the user experience and brand recognition.
Springing up Design Systems
“A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.” - Nielsen Norman Group, 2021
A design system ensures consistency across multiple pages and screens within the product, efficiency, as well as quality in its design processes.
Designers and developers can ensure that the product’s interactive and visual components are uniform and follow accepted design standards with the help of a design system.
A design system can also speed up the design and development process by offering ready-to-use components and templates that are easy to modify and reuse while ensuring a high degree of design quality and consistency that can save time and money.
A design system gives designers, developers, and other stakeholders a common language and a set of rules, facilitating collaboration and effective communication.
The IFS Design System provides a blueprint for all IFS products and consists of the following components:
- Design Tokens are for styling and for creating cross-platform user interfaces. Design Tokens are variables that hold design attributes such as colors, fonts, spacing, etc. Design Tokens make up a design system’s smallest units. Design Tokens create a link between designers and developers, making it simple for them to exchange design information and improve collaboration.
- Consistency across many products and platforms is one of the main advantages of using Design Tokens. Regardless of the team or the developer implementing the design, designers can be certain that all digital goods connected to a brand have a consistent look and feel by creating a collection of Design Tokens. This can boost productivity, minimize errors, and conserve time and money.
- A Design Token comprises several formats, allowing front-end developers to use the same variable without hard-coding static values and making it simpler to update the UI with only minor code changes and making the code more maintainable.
div.background-page {
background-color: var(–granite-color-background);
}
div{
border-width: var(–granite-border-width-regular)
}
Design Tokens are compatible with Angular applications as well as any other Typescript or JavaScript framework, such as React and VueJS.
- Icons provide a selection of icons in WOFF and CSS format. Currently, Ligature and glyph types are supported. To ensure uniform icon usage across products, glyph, and ligature-based icon fonts are used. The IFS design system also provides guidance on how to design icons.
<granite-icon>bookmark</granite-icon>
- UI Component Library is a collection of user interface (UI) elements and tools, such as buttons, chips, menus, checkboxes, and many others. Designing components in Figma and then developing them using the Angular Framework allows us to create a top-notch UI element that developers can insert into already-existing applications. These components can also be further customized using standard interaction patterns.
<button granitePrimaryButton> Example of a Primary Button </button>
<granite-checkbox> Example of a Checkbox < granite-checkbox >
- Foundation Styles and Design Guidelines: Foundation styles are the basic design pieces that are used to create the user experience for IFS products. This contains elements such as colors, borders, a spatial framework, shadows, icons, etc. These foundation styles are used by UX designers while developing prototypes, wireframes, and other product design-related materials. To facilitate the design process for UX designers, IFS also offers templates and building blocks for basic UI elements through the Figma design library. Design Guidelines provide guidance on how to use design principles to deliver a positive user experience, which consists of how to use brand logos, brand colors, and writing styles.
Design systems offer a framework for developing scalable, consistent design elements, whereas accessibility emphasizes making such elements usable for all users.
Accessibility is one of the crucial areas for our team. We continuously seek to increase accessibility to ensure that all our users, regardless of physical, developmental, behavioral, or emotional issues and sensory impairments, have equitable access. Our team considers accessibility as something fundamental, and we ensure and work towards it throughout our design process. Designing for accessibility can improve overall user experience. For users who prefer keyboard navigation or have a temporary illness such as a broken arm, developing keyboard accessibility can enhance their user experience. When we add new elements to our Design System, we ensure that they are compliant with the level AA standards of the Web Content Accessibility Guidelines (WCAG) version 2.1.
The Angular framework is the foundation for the IFS Design System. You can install Design tokens, icons, and components to your Angular project using NPM packages.
My first experience with the Design System was when I had to add a button to a page. If the design system had not been available, I would be using a HTML (hypertext markup language) button and adding hard code values for CSS styles. But with the Design System, it was just a matter of adding the button component with no need of hard coding the CSS styles for disabled state or any other states, which had made it much easier and faster.
In conclusion, a design system can be useful for brands that are trying to increase the speed and accuracy of their digital design procedures while boosting the user experience and preserving brand coherence. It is a constantly changing system that needs to be continually looked after and managed to ensure that it aligns with the goals and values of the business.
This is part of a series of posts from the IFS Technology team in Sri Lanka. The IFS Technology team enable the core technologies that power our solutions, from Oracle PL\SQL to Angular to Java, Kubernetes, and .Net. If you’re interested in joining us in Sri Lanka, see our open job positions in IFS Technology team in Sri Lanka! We are also hiring in other teams and locations, so check out all of our open positions!
For general information about IFS, visit ifs.com
