Introduction
In this video, you'll get a quick introduction to the course and an overview of what you'll learn. Here are the steps we'll follow:
- Generate a website concept using ChatGPT.
- Create the website using the 10Web AI builder.
- Customize the website, using ChatGPT to add text and Midjourney to create graphics.
- Reflect on the experience of building a website with AI and discuss the benefits and challenges.
Here are links to the AI tools we'll be using in the course:
You can also find some great resources for your web design projects on Envato Elements. Download stylish graphics, photos, fonts, and much more.
Generating the Website Concept
Now let's create a concept for our website. I'll show you how to use ChatGPT to generate ideas for a business. Then we'll ask it to suggest some good names and describe the services our fictional company offers.
It usually takes a bit of back and forth with ChatGPT to get the results you want, so watch the video to see an example of how that works from start to finish.
What we end up with is:
- a company name and description
- a basic website concept
- a description of the company's four main services
We'll use all of that to build our website in the next section.
Creating the Website Using an AI Builder
We'll be using the 10Web AI builder to create our website. It's based on WordPress and the Elementor page builder, and it helps you build a site quickly using AI-generated content and a simple drag-and-drop interface.
Here's how it works.
What you'll get a few seconds later is a basic website design, with images and text generated for you based on the information you submitted.
The website is responsive too—you can preview how the mobile version looks.
It's not perfect, of course, but it's a decent starting point. We can customize it in the next section.
Customizing the Website Content
To edit the website, you'll need to sign up for the pro plan, but don't worry—you can get a free seven-day trial to see how it works. Once you've signed up, you'll see a new dashboard that lets you click on each page to edit it.
You can then move around elements on the page and edit the text easily, using an interface that will be familiar if you've used WordPress and the Elementor page builder before.
There's even a built-in option to generate text using AI:
Generating Graphics With Midjourney
To make some new images and graphics for our website, we'll need to turn to Midjourney. Once you've signed up for an account for $10 a month, you can generate images by typing /imagine prompt and then entering text that describes the image you want.
As with other AI tools, it can take a few attempts to get what you want. For example, I tried creating a logo for our website by entering the prompt logo for a pet grooming salon called Pet Purrfect Grooming, fun, and here are the results:
After refining the prompts, I ended up with this, which could at least be a starting point for a logo design.
I also used Midjourney to create some imagery for our site. Again, it took some time to get what I wanted, but here are a few options it came up with:
We can use one of them as a hero image to make the website look more engaging.
And that's it! We've used AI tools to generate a website and customize it with text and imagery.
Reflecting on the Experience
Let's finish up by reviewing what we've achieved here and summarizing the pros and cons. Overall, we've created a decent-looking website very quickly and easily. A professional web designer could do a lot better, of course, but the AI tools have certainly done a lot of work for us and given us a design that we could refine further.
Here are some thoughts on each tool.
| AI Tool | Pros | Cons |
|---|---|---|
| ChatGPT for generating text | Creates well-written content quickly and easily. Can help you generate ideas and concepts as well as text for your website. | Not reliable for factual information. Doesn't always respond correctly—often takes a few tries to get the results you're looking for. |
| Midjourney for creating imagery | Generates very detailed images from your prompts. You can refine your choice by creating variations. | Results vary a lot and aren't always useful—can take several attempts to get a good design. |
| 10Web for designing the website | Creates a decent design very quickly using a few prompts. Built on WordPress and Elementor. Easy to customize. | Design is a little generic and would need work to make a final website. Responsive design didn't work well for all page widths. |
To summarize, AI is not currently at the stage where you can simply use it to generate a great website automatically. It can spit out a website quickly, but you'll need to put in quite a bit of work to make that website look good.
In future, of course, the AI tools are likely to improve. I can see them becoming more useful, but I think there'll always be a place for the professional web designer. Instead of replacing web designers, AI will offer tools that web designers can use to save time and accomplish certain tasks quickly and efficiently.
As AI tools take over the more basic tasks, web designers will need to show that they have the necessary skills to handle the more complex elements that require human judgement. You can acquire those skills by reading the free web design tutorials right here on Envato Tuts+ and by watching these helpful videos:
