How strange is this:

• Developers have tooling for editing live websites
• Business managers have apps/plugins for editing business logic on live websites
• SEOers have tag managers for editing different tracking methods on live websites
• Copy writers have CMS's for editing copy on live websites
• Designers have... ?

It's as if designers were completely left out of the loop in the ownership of these platforms, despite being a large part of a website's creation and success or failure.

What is Automated Design Integration?

Design tools have existed for a long time, but we've recently started to integrate them into our staging and live websites. We coined the term Automated Design Integration (or ADI) at Smarter Labs to help define this part of our integration process. It's not just about editing text, but also images, videos, and other assets. It's also about giving them the ability to make visual presentation changes to any part of the website/app without having to go through a developer who then re-codes the design from scratch.

Who is it for?

• Designers who want more agency and accurate designs in the final product.
• Product managers who want to manage promos, new content, and website positioning themselves.
• Developers who want to offload the web design process to graphic designers so they can focus on other things.

What are the benefits?

ADI can significantly speed up the development process. In a traditional web development process, designers design the site in "flat" files and a developer recreates the designs in code. A good ADI strategy eliminates the developer's involvement in the design process entirely. This makes the designs 100% accurate to the mock ups the designers provide. In many cases the mock ups are the final website.

By freeing up developers' time in the design process, this allows the developers to focus their time on developing the unique business logic of the website or application. Developers can pepper in web applications, custom code, and other things the designers can't do that can improve the website in other ways.

Once the website/app is live, design revisions can continue to be made in the visual editor. This can lead to much quicker turnaround times on revisions and new content. Pretty much as soon as you have a new idea, anyone can implement it in a matter of minutes.

How does it work?

Currently the idea of "ADI" is pretty new. Implementing a ADI strategy can vary depending on the technical skills of your team and the underlying technology your website is built on. At Smarter Labs, we use graphic design editors like Webflow, Builder.io, and GrapesJS wired to live websites or application platforms like Shopify, Next.js, and WordPress. But a developer that can do webhook/API integration could pair any visual editor with any platform and it would essentially give you the same benefits. Once paired, the designer makes whatever changes they want to any page or template. Once they have it looking the way they want, they just hit "publish" and the design gets automatically converted to component code that the live website or app uses as a design. This method gives you the best of both worlds: the power of modern frameworks with the control of no-code editors.