Create responsive websites with ChatGPT, Miro and Canva in minutes!
Just like in every other field, web design experiences the AI revolution. How to survive it?
My very first gigs in the IT world were designing websites. I remember when Microsoft Front Page was introduced to the market in the mysterious aura of WYSIWYG technology. The term ‘What You See is What You Get’ had already been circulating in IT since the mid-1970s when printing technology first started allowing content to be edited in a form that resembles its appearance when printed as a finished product. Some 20 years later the same idea was revived in web design in Microsoft’s advertising campaigns.
OK boomer
Year 2024 is as far away from 1997 as 1997 was from 1970. So naturally I thought maybe now all you need to do is to give ChatGPT an image and it would write the code for your website? I tried and this is what I got:
I tried several AI tools as well but nothing seemed to be able to painlessly translate the image to a working code. What now? I looked at fiverr — maybe if I spend a few bucks on a gig I could get it done in one day?
I was convinced that it can be done faster and cheaper than that. So I went to see what are some other options. I remember WIX.com — they used to have a free plan that allowed you to quickly design webpages, they also added some AI tools on top of that recently, and if all I wanted to do was to customize a pre-made template I would have it ready in no time.
However, that wasn’t the case — I had the layout already designed. I felt like I was almost there. Just one more step…
But let’s start from the begining.
The creative process
First, I explored some concepts with ChatGPT and dall-e and put them on a Miro board to have an overview of possibilities:
Then I picked the elements that made sense for me and roughly placed them on a dirty mockup:
After that I refined every element, added in-game assets and real testimonials from the feedback we got on social media.
But what to do with them? And how to make sure the layout is responsive, mobile friendly etc? And then I reminded myself about Canva. All my non-artist friends who used it were amazed how easy it was to create beautiful and shippable content in a matter of minutes. So I decided to give it a try.
I simply placed all the elements on an empty page, used layers, and set the largest image as the background.
Then I grouped elements like text and image together:
and aligned elements to each other and to the page itself, made sure it looked ok on different screens:
published it for free at https://zombiekebab.my.canva.site/sign-up, and asked my friends to visit it and tell me if it displays correctly. It did.
The last step was to link my website to this address. We could be paying a monthly fee for Canva premium but as an indie studio we cut all expenses by a rule of thumb. So naturally, I asked ChatGPT how to redirect the traffic from zombiekebab.com to zombiekebab.my.canva.site/sign-up the easiest way. And I received this HTML snippet:
And that’s it!
For the first time since creating the domain in 2013–08–15 it was live. More importantly, it features a prominent button that allows the players to sign up for the upcoming release. The waiting list is growing quickly, and we’ll soon be sending out the newsletter as Valentine’s Day approaches. And what’s better than a kebab on Valentine’s Day?
P.S. Feel free to visit www.zombiekebab.com and let me know if it does not display correctly for you :)
