How to Bridge the Developer-Designer Gap

One of the most challenging conversations for frontend and web developers can be talking to the designers. Kathryn Grayson Nanz claims it’s a language gap and she wants to change that.

Nanz should know: She lives in both worlds, as a UI designer and React frontend developer at Progress Software. She presented “Learn Enough Design to Be Dangerous” during Tuesday’s Progress 360 conference in Boston, Mass.

“We often see that there is friction during the handover [with design] or when teams fight and we feel that fight between the two teams,” Nanz said. “They are literally trying to achieve the same thing. They just come up with two different ways of describing it.”

Teach developers the jargon — what kerning or line spacing mean, for example — and it can help bridge the gap, she said.

ThemeBuilder Pro helps programmers with design

Nanz sat down with The New Stack to update us on Wednesday’s Progress release of ThemeBuilder Pro, a revamped tool that makes coding design easier for developers.

Originally, ThemeBuilder was more of a tool for skinning the components — basically changing colors to reflect a company’s brand, she explained. The revamped tool supports more in-depth changes, from padding and borders to different fonts. For designers, the company offered a range of Figma kits to match its library of components. But without designers, there was nothing that truly empowered enterprise developers.

“For teams that had a designer, they were great with figma kits,” she said. “The teams that didn’t do that had really big problems because they might not necessarily have a frontend specialist or someone who – if they have a frontend engineer – is really focused on writing this type of CSS, which is becoming more and more [of] a specialization. So we wanted to expand our offering to allow teams to make these granular changes to the appearance of our components.”

With ThemeBuilder, developers can customize components with a WYSIWYG-style editor, then export a CSS or SASS bundle and drop it into the application.

It is specifically aimed at those using Progress’s Kendo UI component libraries for jQuery, Angular, React and Vue. Kendo offers a number of pre-built components so that developers don’t have to create components such as buttons, date pickers with color pickers, and data grids. In fact, Progress told TNS that data grids are one of the main reasons for launching their kendo offering.

Developers can start with Material, Bootstrap, or Fluent Design, and then implement the design system into web applications through their UI components. You can edit themes in a visual interface without having to dive into code.
It is available through Progress’ Telerik UI for Blazor, Kendo UI for Angular, and KendoReact. By using the interface, developers can do in minutes what would normally take hours or days, the company said in a press release.

According to a company blog post, ThemeBuilder supports all of Progress’ web-based UI component libraries, including jQuery, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, ASP.NET Ajax, PHP, JSP, and Blazor.

Support for Kendo UI for jQuery, Telerik UI for ASP.NET MVC, Telerik UI for ASP.NET Core, Telerik UI for PHP, and Telerik UI for JSP will launch early next year, the company said. Telerik UI for ASP.NET Ajax will continue to use the previous version of ThemeBuilder for the time being due to the significant differences in how the components are rendered.

The company also announced new features for the Blazor, .NET MAUI, Angular and React development frameworks to help developers create consistent, high-quality and accessible user interfaces.

Frontend Extension

In general, frontend developers are increasingly doing more than what originally constituted the frontend, at both the “frontend of the frontend and the backend of the frontend,” said Nanz, paraphrasing Brad Frost, author of Atomic Design.

“The front end gets so much bigger the more capable JavaScript is,” she said. “We see these big frontend frameworks, that our frontend engineers who write React or Angular do a lot of business logic and backend-style stuff on the frontend. That front-end line keeps creeping backwards.”

Disclosure: Progress Software paid Loraine Lawson to attend his Boston conference.