How to Bridge the Developer-Designer Gap
One of the most challenging conversations for frontend and web developers can be the conversation with the designers. Kathryn Grayson Nanz contends it’s because of a language gap and she aims to change that.
Nanz should know: She lives in both worlds, as a UI designer and a React frontend developer with Progress Software. She presented “Learn Enough Design to Be Dangerous” during Tuesday’s Progress 360 conference in Boston, Mass.
“A lot of where we see that friction is with the handoff [with design] or when teams struggle and we feel that fight between the two teams,” Nanz said. “They’re trying to accomplish quite literally the same thing. They’re just coming at it with two different ways to describe it.”
Teach developers the jargon — what kerning or leading mean, for instance — and it can help bridge the gap, she said.
ThemeBuilder Pro Helps Programmers with Design
Nanz sat down with The New Stack to fill us in on Progress’ release on Wednesday of ThemeBuilder Pro, a revamped tool that makes coding design easier for developers.
Originally, ThemeBuilder was more of a tool to skin the components — basically, to change colors to reflect a company’s brand, she explained. The revamped tool supports more in-depth changes, from padding and margins to different typefaces. For designers, the company offered a set of Figma kits that parallels its component library. But there was nothing that really empowered developers at companies without designers.
“For teams that had a designer, they were great with Figma kits,” she said. “The teams that didn’t were really, really struggling because they might not necessarily have a frontend specialist or someone who even — if they have a frontend engineer — is really focused on writing that kind of CSS, which is becoming more and more [of] a specialization. So we wanted to expand what we offer, to allow teams to make those granular changes to the look and feel of our components.”
ThemeBuilder allows developers to customize components with a WYSIWYG-style editor, then exports a bundle of CSS or SASS and drop it into the application.
It specifically targets those who use Progress’ Kendo UI components libraries for jQuery, Angular, React and Vue. Kendo offers a set of pre-made components so that developers don’t have to create components such as buttons, color pickerel date pickers and data grids. In fact, Progress told TNS that data grids are one of the primary drivers for adoption of their Kendo offering.
Developers can start with Material, Bootstrap or Fluent Design, and when done, implement the design system through their UI components across web applications. They can make edits to themes in a visual UI without the need to go into the code.
It’s available across Progress’ Telerik UI for Blazor, Kendo UI for Angular and KendoReact. By using the interface, developers can accomplish in minutes what would typically take hours or days, the company said in a press release.
The 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, according to a company blog post.
The 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 stated. Telerik UI for ASP.NET Ajax will continue using the previous version of the ThemeBuilder for the time being, because of the significant differences in the rendering of the components.
The company also announced new capabilities for development frameworks Blazor, .NET MAUI, Angular and React, to help developers build consistent, high-quality and accessible UI.
Frontend Expanding
In general, frontend developers are increasingly doing more beyond what originally constituted the frontend, both on the “frontend of the frontend and backend of the frontend,” Nanz said, paraphrasing Brad Frost, author of Atomic Design.
“Frontend is becoming so much bigger as JavaScript becomes able to do more,” she said. “We’re seeing these big frontend frameworks, that our frontend engineers writing React or Angular are doing a lot of business logic and backend-type things on the frontend. That frontend line is creeping its way further back.”
Disclosure: Progress Software paid for Loraine Lawson to attend its conference in Boston.
