Ever since the release of ChatGPT last November, the internet has been ablaze with conversations about the possibility of AI web design tools.
Some tout its ability to breezily spit out website copy and suggest ideas for imagery as a way to streamline processes and free up designers for more cerebral, creative parts of their job. But others are more skeptical: AI-generated results can be biased, inaccurate, and even plagiarized.
It's hard to say what its implications will be in the design world just yet. But a baseline understanding of how they can be used is a good place to start. This article explores how to use AI tools to assist your web design process, so you can test out the process for yourself and weigh its pros and cons.
Here is a step-by-step guide on how to create a website (in this case, on Editor X) using AI tools like the image generator Midjourney and text generator ChatGPT.
How is AI used in web design?
Many web designers see AI tools as creative assistants that can be helpful for routine operations and assist with daily web activities. AI can be helpful in a lot of tasks that web
creators face daily, like:
Suggesting web design ideas.
ChatGPT is a text-to-text tool, meaning that it accepts text as input, and generates the output based on it. You can ask ChatGPT something like "Suggest ideas for a promo page that sells shoes," and you will see a list of ideas generated for you.
Generating imagery.
Tools like Midjourney and Dalle-2 can generate visuals web designers can use instead of stock images. It’s worth noting that while these tools are great at generating abstract backgrounds, they have some downsides when it comes to portraying humans: they might add extra fingers to human hands, add extra legs, and incorrect properties. So the results often require human review and refinement.
Generating real copy.
Instead of using Lorem Ipsum placeholder text, web designers can ask OpenAI’s ChatGPT to generate relevant text using a prompt like "write key features of the good sports shoes." Some designers prefer generic lorem ipsum filler copy, but having realistic copy can be extremely important to the web design process. It allows you to adequately align content blocks and create a more relevant visual hierarchy of the page.
Writing code.
ChatGPT can generate decent code samples for the individual web elements. Similar to imagery, the code samples generated by AI also require moderation and refinement.
A video on how to make a website using AI tools by Codex, a YouTube channel "dedicated to the future of design and development for websites." It's had 1.9 million views at time of publication.
How to create a website using AI tools
Creating a website using AI tools will require two additional steps before getting into the editor. The first step is to generate a structure for the page using Midjourney. You’ll then generate content using ChatGPT, and lastly, combine design and content together into a web layout using the no-code tool Editor X.
1. Creating a layout for the web page
The first thing you need to do is create a layout for your future page in high fidelity, and text-to-image artificial intelligence generator Midjourney can help with that. Users submit a text prompt and receive a visualization of their idea, as generated by Midjourney. A lot of people use this tool to generate the imagery that populates websites, but you can also use it to create web layouts.
To generate images, you need to type the command "/imagine [what you want to see]" in a chat. In our case, we need to provide a prompt like "/imagine a beautiful website for shoes" to see AI-generated web design. As you can see, Midjourney was able to generate a few variants of the hero section for us. Some are more usable than others.
The better we articulate our intention in a prompt, the more chances that Midjourney will generate the right visualization for us. Since we want to create a design for the website, it's better to explicitly mention keywords like "UX," "UI" in the prompt so that the tool can understand that we want to see a web layout.
/imagine beautiful website for shoes, ui, ux, ui/ux”
Midjourney also allows you to add a visual reference along with the text prompt. For example, you can find a web design that you like on resources like Pinterest, Dribbble, or Behance and provide it as an input signal to the Midjourney along with your text prompt. The tool will match text prompts to the image you've added and will more likely generate a relevant image for you. Sometimes artificial intelligence tools create a very close copy of the image you provide as a reference, so it's important to moderate the output the system provides in order to avoid copying other designer’s work—and its potential legal implications.
There are a few keywords you can add to your Midjourney prompt to receive a higher-quality visual design that’s close to your specific needs. For example, you can add the keywords "HQ" and "4K" to your prompt, and the tool will understand that you want to see high-quality visualization of web layout:
/imagine beautiful website for shoes, ui, ux, ui/ux, HQ, 4K”
Midjourney has a few critical downsides. For example, you probably noticed that the text on the images the tool generates is gibberish. Midjourney also often adds visual noise to the images, like additional, unnecessary graphic details (like those extra fingers referenced earlier, or extra decorative details on the background). So before using this output in web design, you will likely need to polish it a bit in a photo editor.
2. Writing content for the website
Well-crafted copy directly impacts how visitors perceive your site design. When working on web layouts, web designers often use placeholder text instead of the actual copy, but AI tools like Chat GPT by OpenAI offer a new alternative by producing ai-generated website content instead.
ChatGPT can be used for various tasks you’d rather not do yourself, such as writing marketing copy, product descriptions, and even the entire copy for the web page. I’ve used ChatGPT to generate entire content for the landing page, including error and success messages for visitors’ actions. Even though I had to validate the copy and rework it in some areas, the overall result was great because the tool helped speed up my design process.
Similar to Midjourney, the better you articulate your intention in the prompt, the more relevant the response will be. You need to specify enough detail so the tool understands exactly what you want to see. For example, you can say, "Provide content for the landing page that promotes sports shoes. Content for hero and product features section." As you see, the sections we mentioned in our prompt match the sections we have in the design generated by Midjourney.
ChatGPT tends to generate long text, so you’ll likely need to adjust its output before adding it to your actual design. But the great thing about Chat GPT is that you can ask follow-up questions to receive more relevant responses. Suppose the tool generates a text for the call to action button, and you don't like it. You can create a follow-up prompt to get the tool to generate copy alternatives that are closer to what you had in mind, like, "generate a few more examples of text for a call to action button."
3. Turning our design into a fully functioning website
Once you have the page design and content, use them as references to create the web page using a no-code website builder like Editor X.
Once you’ve defined the structure of your page, you can copy and paste visual elements, like images of shoes generated by Midjourney, and fill out content blocks with the text generated by ChatGPT. (You don't need to dive into code to arrange individual sections or elements when using Editor X.)
The role of AI tools in web design process
A lot of people in the design world are concerned about AI tools, and whether or not AI will replace graphic designers.
There is some reason to be. AI tools are causing the line between creating and copying to blur. Artists filed a class-action lawsuit against Midjourney, Stability AI, and Stable Diffusion, alleging they used artist images scraped from the internet to train their tools without their consent. Some influencers are positioning the tech as a way to get rich quick, selling its potential quantity of output in lieu of dependable quality. And in some instances, clients are in fact opting for AI tools rather than hiring creatives, as recently happened to UK-based Studio AAA.
But when used correctly, the primary objective of AI tools is to improve the efficiency of the person who uses it. Artificial intelligence tools can make the design process more efficient, and free up web designers from routine operations, like writing realistic copy, to give them more time to experiment with design and find unconventional solutions.
Web designers who master AI tools will likely have a significant competitive advantage over other designers, because they will be able to go from ideation to final design much faster. Ultimately, AI web design is about co-creation—not co-opting.
