> Markdown version of [/videos/794-bridging-the-gap?t=110](https://www.wearedevelopers.com/videos/794-bridging-the-gap?t=110). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Bridging the Gap

Tired of constant friction between UX designers and frontend engineers? Discover how a unified design system bridged the gap at IONOS, eliminating rework and accelerating deployment.

- **Speakers:** Philipp Kremer
- **Event:** World Congress 2023
- **Published:** October 23, 2023
- **Duration:** 6:16
- **URL:** https://www.wearedevelopers.com/videos/794-bridging-the-gap

## Summary

The relationship between UX designers and frontend developers often involves friction, with developers frequently wondering, "How should I make that?" when faced with complex animations or inconsistent design choices. While UX designers naturally focus on user research, testing, and prototyping, frontend engineers must prioritize functional implementation, responsiveness, and performance optimization. To bridge this divide and eliminate the tedious process of building every interface from scratch, teams must establish a unified workflow centered around shared, pre-approved assets.

At IONOS, this collaboration gap was resolved by developing a proprietary design system—a customized adaptation of Vuetify intertwined with Material Design principles—to align both disciplines and enforce corporate identity. Designers leverage Figma to outline standard components like navigation patterns, dialogs, and buttons, which are then translated directly into a shared front-end library. By altogether avoiding complex, custom animations that easily break on smaller screens, developers save significant implementation time. Furthermore, publishing these standardized components in a tool like Storybook allows product owners and UX designers to review interfaces in an isolated environment, ensuring visual consistency without having to inspect the underlying code.

The tangible result of this streamlined cross-functional alignment is evident in platforms like "Deploy Now," a developer-centric hosting tool that integrates with GitHub repositories for automated staging and deployments. By utilizing structured templates and a comprehensive component ecosystem, technical teams avoid reinventing the wheel for every new feature. Ultimately, standardizing design components proves to be one of the most effective strategies to improve workflows, save organizational resources because "time is money," and deliver highly performant web applications rapidly.

**Keywords:** UX and frontend collaboration, frontend development workflows, shared component libraries, UI design standardization, design system implementation, vuetify customization, material design integration, figma prototyping workflows, storybook component review, responsive animation issues, automated github deployment, developer hosting platforms, cross-functional team alignment, corporate identity consistency, rapid frontend scaling

## Chapters

1. **Bridging the gap between UX and frontend** (00:03) — Challenges between designers and developers often stem from differing priorities around aesthetics and implementation.
1. **Defining team roles and collaboration tools** (01:02) — Clarifying distinct responsibilities and utilizing structured collaboration processes establishes boundaries between design and development.
1. **Improving collaboration with a custom design library** (01:50) — Developing a custom component library based on material design ensures visual consistency and simplifies frontend development.
1. **Implementing custom component libraries with Figma** (02:24) — Utilizing Figma for reusable component design saves time and maintains uniform performance across various product platforms.
1. **Managing automated staging deployments with Deploy Now** (03:50) — Integrating automated platforms with repositories enables continuous staging updates and live reloads while leveraging standard UI templates.
1. **Supported frontend frameworks and hosting capabilities** (05:38) — Hosted deployment platforms establish simplified infrastructure for modern single page applications and various popular frontend environments.

## Related Moments

- [Bridging the deployment gap with Figma Dev Mode](https://www.wearedevelopers.com/videos/992-bridging-the-gap-between-design-and-development) (from "Bridging the gap between design and development")
- [Transitioning from graphic design to large scale frontend architecture](https://www.wearedevelopers.com/videos/100153-microfrontends-lessons-learned-from-growing-a-design-system-and-shared-libraries-across-20-teams) (from "Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams")
- [Bridging the gap between software development and design](https://www.wearedevelopers.com/videos/577-learn-enough-design-to-be-dangerous) (from "Learn Enough Design to Be Dangerous")
- [Recapping frontend scaling patterns and distributed UI techniques](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Strategic practices for integrating UX into agile developer workflows](https://www.wearedevelopers.com/videos/1467-ux-in-the-dev-cycle-moving-from-handoff-to-handshake) (from "UX in the Dev Cycle: Moving from Handoff to Handshake")
- [Addressing collaboration challenges in design to code workflows](https://www.wearedevelopers.com/videos/1169-nocode-livecode-leveraging-ai-tools-to-craft-fully-functional-apps) (from "NoCode LiveCode: Leveraging AI Tools to Craft Fully Functional Apps!")

## Related Articles

- [Are design and development really just the same thing?](https://www.wearedevelopers.com/magazine/520-are-design-and-development-really-just-the-same-thing)
- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [10 Essential Figma Plugins for Frontend Developers in 2023](https://www.wearedevelopers.com/magazine/262-10-essential-figma-plugins-for-frontend-developers-in-2023)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**