AI In Web Development: Our Underwhelming Case Study

We’ve all heard of the promises of AI in web development and web design. And as a web design agency, we were both intrigued and horrified. 

AI has the power to make our jobs easier. 

And it also has the power to eliminate our jobs entirely.

That’s why we’ve made a conscious effort to test out some of the most popular AI tools available on the market today. 

The results?

Dismal. 

Despite some cool abilities, AI still has a long way to go before it can design, reason, code, and problem-solve like a human website pro—or like we do in our case studies

Check out our table of contents for more. 

Setting Up Our AI Case Study

The Results of Our Case Study

When Might AI Be A Good Choice For Web Design And Web Development?

Final Thoughts On AI In Web Development

Get More Web Design Support

 

Setting Up Our AI Case Study

For our internal case study, we started with this scenario:

Let’s say we have a client who wants to leave their host. They want to keep their website, but they can’t get a copy of it for us. We’ll need to rebuild the website from scratch and host it ourselves. 

Our goal was to rebuild an existing website as quickly as possible—leveraging AI to move us as quickly as possible. 

For this project, we ultimately leveraged two tools:

  • html.to.design – This tool tales an existing website and generates a Figma design from it. 
  • Yotako – We used this tool to build a new WordPress site from the Figma design html.to.design created. 

With our tools picked, we were ready to start building! 

 

The Results of Our Case Study

The resulting website would have been passable as an interim website until something better was established, but it would have been terrible as a long-term solution. 

Here’s why:

1. The Code Was Bloated

Common sense (and best practices) tells us your HTML and additional code should be as lean, simple, and intuitive as possible so anyone on your design or development team can examine the code, immediately understand it, and add necessary edits. 

But that wasn’t the case here. 

The resulting code was much longer and denser than it needed to be, and that made it difficult to understand and even more challenging to edit (something we’ll discuss in more detail in a moment). 

2. The Hardcoded Design Was Unresponsive

As bad as the bloated HTML was, the design it generated wasn’t responsive, meaning it didn’t look great when switching from desktop to mobile device to tablet (which is a UX best practice no-no). 

In an ideal situation, you’ll work inside of a WordPress theme (or something similar in another platform) then use styles to guide how different elements appear on different screen sizes. 

The AI didn’t do that. 

Instead, we had to go in and manually add responsive elements—just as we would in a typical custom WordPress project

3. It Didn’t Really Save Time—And It Created More Headaches

AI got this project off the ground, but it took nearly as much time parsing through the complicated code and making edits as it would have taken to build the site from the ground up. 

And every time we opened the code to make edits, we had to go through the tedious process of identifying the error and creating a custom solution—something that would have been easier if the code wasn’t so bloated. 

4. It’s Not A Free Solution

No one says AI has to be free. And, to be fair, these tools hold so much promise that their creators deserve to charge something. 

But AI is often pitched as an inexpensive silver bullet for web design/development, and that’s simply not true. 

For our test, html.to.design was free (although a paid version is available), but Yotako can run users anywhere from $19.99 for a single use to $49/month.

All tools will have their own prices attached, and that’s something worth mentioning when measuring the pros and cons of AI. 

 

When Might AI Be A Good Choice For Web Design And Web Development?

As much as we disliked using AI for web design and web development, I wouldn’t rule it out in all cases. 

Here are a few scenarios where AI could work:

  1. As a basic alternative to a WYSIWYG (What You See Is What You Get). Using AI in this manner could provide a quick alternative to setting up a website through a platform like Wix or Squarespace. 
  2. As a short-term solution. We would never feel comfortable at Redtree handing an AI-built website like this to a client and declaring our job “done.” But in certain scenarios, AI could be a convenient tool for your team to build a temporary landing page until you can build a long-term alternative with more robust functionality. 
  3. As a quick strategy for launching a temporary website. Building with AI is fast—even faster than working with a WYSIWYG. If you simply need a static page to showcase a product, event, or service, an AI-built site could be your answer. 

 

Final Thoughts On AI In Web Development

AI isn’t the hero it’s been heralded as—yet. 

Despite their flaws, the AI tools we used are already quite powerful. But they’re just not sophisticated enough to completely streamline the process. 

Internally at Redtree, I liked the idea as a designer because it allows a website to be built exactly as I intended. And our in-house UX Designer, Alicia Faivre, tends to agree. 

As developers, however, we both dislike it. There are simply too many shortcomings, headaches, and troubleshooting for these tools to qualify as reliable shortcuts on major client projects. 

Still, the current AI tools have the potential to assist on extremely simple projects, and I expect they’ll continue to grow from there. 

Only time will tell!

 

Get More Web Design Support

To learn more about web design support and options available to you, check out our insights or contact us. We’d love to talk about how AI (or humans!) could support your next web project.  

Don't Branch Out Alone

We know that your time is limited but taking your website to the next level is essential. Don’t branch out alone. Tap into our team of experts to keep your site ahead of the curve.

Let Us Help

Share

Similar Posts
Also tagged Design

Overcoming UX Apathy to Build A Website That Truly Supports Your Business Growth

Also tagged Trends

The 4 Best Company Websites: Imitate These Sites For Online Success

Also tagged From Us

10 Best WordPress LMS Options: What to Look For