On this article, we’ll characteristic Telerik’s Progress Design System, an end-to-end design language for creating easy, intuitive and delightful experiences. We’ll talk about how the Progress Design System is a UI design answer that stands out from the gang, and the way this method can place the element library as the premise for good UI.

We created this text in partnership with Telerik’s Progress Design System. Thanks for supporting the companions who make Pylogix attainable.

Desk of Contents

Telerik’s Progress Design System

Telerik’s Kendo UI element libraries are highly regarded within the growth group, and the demand for UI design is rising. The Progress Design System has a singular method to UI styling, as a result of it’s tailor-made for each builders and designers alike. This ensures {that a} growth effort is ready to ship in a well timed method, with out being slowed down with UI points.

Progress is about aside from the competitors by way of its distinctive method that enhances staff collaboration. This design system provides themes, instruments, and documentation to assist most design wants. A very good information for getting began is obtainable within the Design System Introduction web page.

Many customers of Telerik and Kendo UI are back-end builders who don’t have time or the talent to deal with superior styling necessities. Designers additionally work with builders by way of instruments to assist them contribute to the design effort. Progress tackles each of those makes use of instances in a design and growth effort.

About Design Techniques

A design system usually helps a staff ship a constant UI that’s person pleasant and intuitive. That is what cements the appear and feel of an utility.

A key success of any utility growth effort, whether or not for inside or exterior use, is its capability to satisfy UI design necessities. If the UI isn’t constant, nice, and intuitive, customers gained’t get pleasure from utilizing it. the assist burden and prices may even improve, as a result of the UI expertise is inconsistent or complicated.

If the UI isn’t greatest in school, the competitors will outshine. A growth staff can create probably the most modern utility, however that is all for nothing when customers don’t undertake the brand new UI.

The issue is time, sources, and expertise. Builders should waste time to get the CSS excellent, after they would slightly be engaged on performance and engineering. A growth staff could get mock-ups from a design staff, a method information, or perhaps a full-blown design system. In any case, the perilous CSS work, and the forwards and backwards between growth and design, makes this complete effort daunting and typically even unrealistic. Even a effectively deliberate growth undertaking can rapidly go sideways when staff members need to redo any of the work.

Groups that don’t have any enter from designers also can profit from the Progress Design System. Full-stack builders typically don’t have the design chops to construct good UIs. Progress is aimed toward serving to obtain nice UI design with minimal effort.

Progress has a singular method to fixing this drawback, which is the Progress Design System equipment.

Let’s speak about what this Design System has to supply.

Out-of-the-box Themes

The Kendo UI element libraries include 4 professionally designed themes (Default, Materials, Fluent, and Bootstrap). Builders and designers can select any of those, and this might be mechanically utilized persistently throughout the undertaking. That is the simplest path to an awesome UI if no customizations are wanted.

The themes are a rigorously crafted collections of visible attributes like colours, fonts, and spacing. The design techniques accessible like Materials, Bootstrap, and Fluent are extensively well-liked and well-known. When you apply a theme, you obtain a constant look with none additional effort.

There are tons of of demos on Telerik’s web site. Remember to change the theme and coloration palette to see these themes for your self. For instance, take a look at the grid component and the out-of-the-box choices which might be accessible.

grid component options

CSS-free Customizations (Fundamental or Superior)

The ThemeBuilder is a really highly effective design device that helps builders and designers make both international or granular customizations with out the necessity to write advanced CSS.

There’s virtually no studying curve with the ThemeBuilder, as a result of it’s a visible device. You’ll be able to type each factor of your Telerik and Kendo UI element, from the high-impact main coloration to the smallest element.

Builders can give attention to wealthy performance whereas designers can create lovely experiences that delight customers. CSS is tough, and it’s a talent set that’s greatest left to hardened professionals.

You’ll be able to set international properties comparable to coloration, border radius, and typography in a couple of clicks, or you may go into superior mode and make customizations all the way down to the atomic degree. The ThemeBuilder is an internet utility that means that you can type parts with ease.

As soon as a designer nails down the undertaking design, they’re in a position to share their customizations with only a few clicks.

You’ll be able to take a look at ThemeBuilder by way of a 7-day free trial.

themebuilder home page screenshot

Collaboration Constructed In

The ThemeBuilder is a cloud app that shops tasks securely in your account. When staff members have to contribute, all they should do is log in and open the undertaking. There’s no have to share recordsdata manually or by way of supply management. This permits designers to collaborate and share concepts with builders seamlessly.

ThemeBuilder is accessible to each designers and builders. This places the device on the middle of all UI customizations and minimizes silos between staff members.

Moreover, managers can set permissions to every undertaking for added staff management. The staff can merely give attention to getting the job performed with out being buried by a bunch of irrelevant tasks.

DIY for Designers

Usually, designers lose monitor of the undertaking as soon as they hand their design over to a developer. This may imply quite a lot of spherical journeys between the designer and the developer as the applying is refined.

ThemeBuilder is code-free and simply accessible, so designers can log in and replace the precise design themselves with none forwards and backwards. Builders will also be granted entry to the device, to allow them to keep updated with the most recent designs accessible. The device helps the event undertaking achieve momentum, so the staff can deal with difficult UI design points with relative ease.

As Telerik and Kendo UI evolve, designers are in a position to sustain with the most recent element options by way of computerized updates. This seamlessly adjusts your types to match the up to date HTML, guaranteeing a constant expertise and thrilling new element options.

Figma Assist

Designers can incorporate Sass/CSS variables from Figma into ThemeBuilder. Design tokens like colours, typography, and results will also be imported.

The ThemeBuilder plugin for Figma can export the next from Figma:

  • Kinds comparable to colours, typographies, and results: these are Sass or CSS tokens
  • Customized SVG icons: these are exported and transformed to icon fonts

To put in the plugin for Figma, all you want is a Figma account as a prerequisite. Then, discover the Progress ThemeBuilder plugin for Figma (accessible by way of Figma’s Community page) and click on Set up.

To additional improve the designer–developer handoff, Telerik and Kendo UI assist Figma in two methods:

  • Figma UI kits: Progress offers Figma UI kits that signify each element within the library. Designers could make pixel-perfect designs of what they suppose the ultimate product ought to appear like.
  • Import design tokens in ThemeBuilder: Builders can get design tokens straight from Figma to additional streamline the designer–developer handoff.

The Progress Design System is constructed with each designers and builders in thoughts to reduce surprising delays in delivering a undertaking.

Detailed and Interactive Frontend Documentation

Telerik and Kendo UI have best-in-class documentation. It’s detailed, complete, and interactive. Builders and designers can learn in regards to the Progress design system normally, and also can study in regards to the markup, styling, and configuration choices for every element.

For instance, a developer can go to the docs, set some properties, and examine the markup. For a fast take a look at the docs, take a look at the documentation accessible for the button component.

button component overview page

One particular instance is the autocomplete component documentation inbuilt React. Builders can rapidly assess the markup and what props can be found. They will additionally choose between JavaScript or TypeScript because the markup language.

If React isn’t your device of selection, there are different choices accessible, comparable to Angular, Blazor, jQuery, and Vue. The documentation is complete, so that you’ll get assist irrespective of which device you choose.

This system can enormously improve the event of backend techniques — comparable to APIs that should combine with the UI design. For instance, a backend developer can examine the design and start to think about what the area knowledge mannequin would possibly appear like. With a transparent imaginative and prescient of the area, a developer can rapidly start to flesh out different components of the answer like DTOs, backend storage, and caching.

Notice: Telerik and Kendo UI are nonetheless engaged on the documentation and as of this writing not all parts are lined. The hope is to succeed in that time by 2024.

Change the Manner You Work

Telerik and Kendo UI have been trusted by builders for excellent UI experiences for many years. As UI styling calls for proceed to evolve, so does the Progress Design System and its instruments. At the moment, Progress has reached a degree the place designers and builders have a singular styling answer that stands out from the competitors. Whether or not you want one thing out of the field or a really distinctive customized design, this path offers you the simplest solution to really delight clients.