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.
When Might AI Be A Good Choice For Web Design And Web Development?
Final Thoughts On AI In Web Development
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:
- 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.
- 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.
- 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
