+63 (02) 8971 8926
qwerty logo black

[PART 1] AI ChatGPT Series: Designing a website

 / 
 / 
March 7, 2023

ChatGPT has been making a lot of noise on the internet recently, and for a good reason. The AI tool, essentially a chatbot, engages in conversation with all the knowledge and wisdom from the world wide web. Since it rose in popularity, ChatGPT has been used for generating business content, developing SEO strategies, and even assisting web developers with open-source projects. But can it do the work of an entire SEO content creation team? Is it a tool that can revolutionise the SEO industry as we know it?

This is why our team at QWERTYLABS is testing out how useful and effective this AI tool is in SEO practices. In this project, we'll create, design and audit a new website and regularly upload blogs based on a content plan made entirely by ChatGPT. We aim to see whether creating and maintaining an AI-developed site with little human interaction is possible. Will it rank on search engines? Can it outperform SEO strategies and content made by humans? Join us in our experiment, and let's find out. 

QWERTYLABS’ AI ChatGPT project

As ChatGPT and other AI tools become more popular, people will naturally become increasingly concerned over its risks. This is borne of worry about these tools taking over industries and fear of the threat of job loss and people using them for malicious purposes.

While these concerns are valid, AI advancements will likely continue and become even better. As such, QWERTYLABS wants to see how far these AI tools can go and how to integrate them into our current SEO strategies. Here are the goals we hope to achieve in this project:

  1. Discover ChatGPT’s benefits in website creation and management

We aim to see whether a website made using ChatGPT can compete against the highest-ranking sites on search engines like Google. This means the site's branding, design and content are created using ChatGPT with minimal human oversight.

  1. Gain a deeper knowledge of using AI tools

The fear people feel about AI tools is largely due to their lack of understanding. With this project, we aim to develop a deeper grasp of different AI tools to know how they can be used to improve businesses and branding. 

  1. Understand the limitations of AI tools

Everything has limits; even these AI tools are still being developed and improved daily. Through our project, we want to discover these limitations and how we can address them.

ql-new-cta-banner

The birth of sportsbookbacklinks.com

Now, let's get started. Here's how we built the website sportsbookbacklinks.com using ChatGPT:

  1. Purchasing the domain

To kickstart the project, we bought the domain name 'sportsbookbacklinks.com'. Since QWERTYLABS is primarily a content marketing and SEO company for iGaming brands, it's a fitting website to see whether ChatGPT is the key to a winning content marketing strategy in this field.

  1. Defining the scope of sportsbookbacklinks.com

Afterwards, we asked ChatGPT what it thinks sportsbookbacklinks.com is. As expected, the AI hit the mark in defining what the site is all about. Based on the domain's name, ChatGPT deduced it as a site that provides backlinks to sportsbooks or gambling sites.

image 28

Identifying the branding of sportsbookbacklinks.com using ChatGPT

The next step is establishing the branding of sportsbookbacklinks.com. Again, we let ChatGPT give us ideas on the brand assets, like the site's logo, colour scheme, and overall design. 

  1. ChatGPT provides the design guidelines
image 29

As seen above, it suggested a branding design for sportsbookbacklinks.com. To summarise, here's what ChatGPT proposed a blog site about sportsbook backlinks should look like:

  • Colour scheme: Professional and not too flashy. Neutral colours like white, black, grey, and muted shades of blue, green, or orange.
  • Logo: Should incorporate sports and backlinks. Example: Stylised sports icon with a link symbol or a sports-related image with a backlink arrow.
  • Typography: A clean and readable font with large headings and titles.
  • Layout: A clean and well-organised layout with sections for recent posts, popular posts, categories, and tags 

For fun, we tried to see if ChatGPT could reason why it chose the above colour scheme. Here's what it had to say:

image 27

Now that it has properly convinced us, we went ahead and tried to conceptualise this website design. For this, we used the AI tool Midjourney to generate images that matched the criteria ChatGPT gave us. 

  1. Conceptualising the brand design

Midjourney is an AI tool for generating images. To use it, we headed to Discord and created a server with the Midjourney Bot to develop effective web design concepts based on ChatGPT's answer.

For the concept designs, we prompted the following words: 'beautiful website for sports, backlinks, blog, ui,ux,ui/ux, website, neutral colours, muted orange, muted blue, muted green' into Midjourney. Here are some of the concept designs it gave us:

image 32
image 35
image 34

Using ChatGPT's brand design criteria, Midjourney produced the exact results. However, our team felt like it didn't fit the branding we had in mind for a sportsbook backlinks website. The layout and colours felt too muted and passive for a dynamic industry like sports.

We tried again, and this time, we changed our prompt to specify the colours we wanted using hex codes #BA78D1 and #F77354, which are the colour schemes of QWERTYLABS. We used this prompt: 'beautiful website for sportsbook backlinks, ui,ux,ui/ux, website, #F77354, #BA78D1, blog'.  

Unfortunately, as you'll see below, we also didn't get the desired result:

image 37
image 36
ql-new-cta-banner

Realising that the Midjourney Bot didn't consider the hex codes we included in the prompt, we simplified it and asked for the colour purple and light pink or orange instead. These are the results we got:

image 33
image 31
image 30
image 26

Ultimately, while the concept generated through Midjourney was pretty good, we wanted to go for a minimalistic design. So, we decided to use the same theme as QWERTYLABS and modify it to match what ChatGPT suggested.

Designing the brand logo for sportsbookbacklinks.com using ChatGPT

Since we were set on copying the design of QWERTYLABS, we turned to ChatGPT to see how we could accomplish this.

  1. ChatGPT’s logo design suggestions

First, we asked ChatGPT for its suggestions for a logo design. We specified a minimalist design copying QWERTYLABS's colours (hex codes #BA78D1 and #F77354). 

image 23

Here are the design criteria ChatGPT gave for the logo to achieve a minimalist design:

  • Use a simple, abstract symbol or shape to represent the website. Example: stylised letter 'S' or a graphic.
  • Colours could be used in a gradient or bold contrast, with #BA78D1 as the primary colour and #F77354 as the accent.
  • Use typography as the primary design with a bold sans-serif font and simple graphics to complement it.
  1. Conceptualising the logo for sportsbook using Midjourney

Following ChatGPT's suggestion, we used Midjourney for a purple and orange logo for sportsbookbacklinks.com. Here are the results:

image 25
image 24
image 22

Although these designs aren't bad, we had a few issues using Midjourney to create a logo. The first problem is that since it can't read hex codes, we're limited to inputting generic colours that aren't aesthetically what we wanted. Secondly, we can't customise the designs beyond choosing from the variations Midjourney Bot provides.

As a result, we decided to use the graphic design AI tool called 'Looka'. However, the details ChatGPT provided for the logo were insufficient, so we asked for better design guidelines. Here is what ChatGPT had to say:

image 21
image 20
  1. Creating a logo design using Looka

Here are the design guidelines from ChatGPT that we kept in mind when generating the logo design on Looka:

  • Use sports-related symbols such as football, basketball, or baseball. These will be used to represent the sportsbook identity of the site.
  • Stylising the letters' S' or 'B' of the website's name or creating an arrow or chain symbol to represent the backlinks identity of the site.
  • A colour scheme associated with sports, such as green (for fields and grass) or blue (for water and skies).

Then, we created a logo in Looka by inputting the website domain and providing what industry it's part of.

image 19
image 17

Looka asked several more questions, including picking logo samples, colours, and symbols. For this, we referred to the information we got from ChatGPT and selected them. 

image 18
image 16
ql-new-cta-banner
  1. Create a website slogan using ChatGPT

Another thing Looka asked for is the website slogan, which we decided to get from ChatGPT. As expected, ChatGPT didn't just give one but ten slogans to choose from:

image 15

We chose the first slogan ChatGPT provided and inputted it into Looka to finalise the process. 

image 13

After a few minutes, we got several design suggestions from Looka that closely matched all the information we put in.

image 14
image 12

After looking through the suggestions, we customised the simple one to achieve our desired results. See the changes from the variations we got from Looka:

image 11
image 10
image 9

The final design we used for sportsbookbacklink.com incorporated all of ChatGPT's design guidelines, as seen below:

sportsbetbacklinks
  1. Additional design elements

The logo is just one of the many images we needed to complete the design of sportsbookbacklinks.com. To generate the images we needed, we turned back to Midjourney Bot on Discord and developed images for the homepage with the help of BlueWillow AI.

When you look at QWERTYLABS' homepage, you'll find an adorable robot welcoming you to the site. We wanted to imitate this and asked Midjourney Bot and BlueWillow to provide us with an adorable robot.

Here's what we got from Midjourney Bot:

image 8
image 7
image 6

Meanwhile, here are the results from BlueWillow:

image 4
image 5

Both AI art tools provided us with great options, but we ultimately went for one of the robot images we got from Midjourney.

Afterwards, to further enhance the homepage and some text descriptions, we asked Midjourney Bot to generate more sports-related images to serve as banners and additional design elements. Here are some of the images generated for us:

image 3
image 2
image-1
  1. The final result: The sportsbookbacklinks.com design

After such a long design process, you must wonder what the final results look like. Fortunately, you can check it out when you visit sportsbookbacklinks.com, which is now live. To give you a little preview, here's a sneak peek of the homepage:

image

ChatGPT series: What comes next?

If you found this process intriguing, you'll be happy to know that there's more to come in our ChatGPT project. In the succeeding weeks, you can follow our journey as we use ChatGPT and additional AI tools to create and manage a fully-functioning website.

To give you an idea about the other topics we cover, check out the following articles we have:

We've got an exciting month ahead of us as we explore the capabilities of ChatGPT as a tool for SEO content marketing. As you can see from our journey in developing a design for sportsbookbacklinks.com, there's quite a lot these AI tools can accomplish when you know how to ask the right questions.

However, what more can it accomplish? We're determined to find out and document the entire process for you, so visit QWERTYLABS weekly to follow along.

ql-new-cta-banner
Recent Posts
The ultimate guide to web testing your brand's website

Getting a website off the ground is challenging, especially when you are looking to build a brand with a website that has a good function. That is why building one has become vital to any business around the world. In the process of having a website, you should be ticking all the boxes of a […]

Read More
7 web coding mistakes every web developer should know

Discover common coding mistakes like skipping code validation to help you write bug-free code. Build better websites with the expertise of QWERTYLABS.

Read More
Embrace the future of web development with web testing automation for your online casino

Stop wasting time on manual web testing! Discover the efficiency of automation with QWERTYLABS. Explore tools, benefits, and trends for streamlined testing to improve your online casino brand.

Read More

Boost Your Business’ Performance With Our Help

qwerty logo black
We offer full-scale casino and sportsbook SEO, content, and design services for your brand
facebook-icon-blackfacebook-icon-colorinstagram-bnwinstagram-coloredyoutube-iconyoutube-icon-colortwitter-icon-blacktwitter-icon-colorlinkedin-icon-blacklinkedin-icon-color
Contact

8F, One Trium Tower,
Filinvest Avenue, Alabang, Muntinlupa, Metro Manila
Philippines, 1799
[email protected]
+63 (02) 8971 8926