In this trilogy, we explore the possibilities and downsides of using AI for website creation in 3 articles. We kicked off the series with a copywriting and wireframing perspective. After going into detail on the influence of AI on design in this article, we will talk about web development.
You’ll love how fast you can get online and look amazing! Answer a few simple questions and Wix ADI will instantly design a stunning website just for you.1
The design phase is where we convert black and white wireframes into a creative outburst that impresses clients and, ultimately, users. There are a bunch of AI tools out there that allow you to create not only the wireframes and copy but also all the visual elements. Starting from the logo to the visual identity including colors and typography and, finally, the website design and prototypes. According to HubSpot Research, 50% of web designers use AI to create complete web page designs.2 But, is this actually doable?
How can you use AI for visual elements?
Before starting with website design, you need to have your visual identity settled. Needless to say, there are plenty of AI tools out there that pretend to do the job for you.
Long before AI entered the design game, online logo makers were already making design suggestions. Now, tools like designs.ai, for instance, leverage AI to generate a logo. Pick style, colors, and you are ready to go. Obviously, this does not provide much room for creativity or for considering your brand personality and other important brand attributes that are crucial for creating a powerful tech startup logo.
.png)
Apart from that, your logo not only has to work for different media and applications, you also need to know how (not) to use it: you need to consider different backgrounds, sizes, and formats and establish brand guidelines to maintain consistency across channels. These estimations cannot rely on purely data-driven decisions by algorithms but need to be cross-checked.
AI can suggest different color combinations that are harmonious and eye-catching and combine them with fonts that are easy to read and suit the theme of the website. Some guidance on the visual identity of your brand is essential, though. By solely considering the “look” of your brand, you might neglect your essence and your brand strategy that should drive all decisions.
Working together with an experienced startup branding agency helps to create a branding that aligns with your brand personality, attracts your target audience, and serves as a solid foundation across years.
On-demand images created by AI
While we previously had to rely on already existing photographs on different platforms, with the launch of platforms such as Midjourney and DALL-E, creative possibilities seem infinite. AI has already created as many images as photographers have taken in 150 years.3
AI image generators are the latest trend, also outside the professional context: AI-generated photographs don't fail to impress users on social media, giving rise to controversy. With the right prompt, you can create stunning visuals with all the elements you would like to depict. This opens up a wide range of possibilities for tech startups, especially if you haven't got an MVP yet or if you cannot capture the essence of your complex solution in a photograph.
Have a look at the futuristic photograph we created: on the right, a real photo of The Branx office as the starting point. On the left is Midjourney's answer to our question about how our office might look in 50 years' time.
However, it is not as easy as it seems: prompt creation has become a real, tedious task. Finding the perfect words to receive the desired outcome is not easy, and the expectations for the imagery are growing, as you can customize every pixel. No wonder that there are already “prompt generator” jobs out there.
Also, besides matters of ethics, AI images aren’t without flaws: people in the images tend to not look quite “right”4—no wonder, they are made out of data.
For the biotech startup Vivici, we leveraged Midjourney to create the photographic elements of the illustrations, as they did not have any product images we could use. With the help of the AI tool, and after tinkering a lot with prompts, we generated images of yogurt and other dairy products in a style that harmonizes perfectly with the visual identity. To add a spark of originality to these visuals, we further customized them by adding illustrative elements.
By combining AI-generated imagery, with a lot of human input for the prompt, and branded illustrations, we reached a unique illustrational style for the startup. This is indeed a way to cleverly leverage the advantages AI holds for design.
Also, have a look at the AI images we created for the SaaS startup Revolear and the HR tech startup HRBench. By the way, their creation was not as easy as you might believe: we needed quite a lot of attempts for prompts and to retouch the photos manually.
From A to Z: Wireframing, design, and prototyping made by AI
Taking the wireframes into design
If you have your visual identity settled, the next step of our web design process would be to take the low-fidelity wireframes into design. This usually involves a lot of back and forth, the input of the whole team, and various feedback loops in order to perfectionize every detail.
AI has also a stake here: not only can it create low-fidelity wireframes, it also assists you in the design phase. One of the website builders that has been there for quite a long time, Wix, has incorporated AI in their website builder: after filling in the company name, you are ready to start. Choose our preferred theme and layout and let the creator do its job. You can then customize it with the AI generator, which is connected to Open AI: provide some keywords and AI suggests different variants of a section, which you can drag and drop wherever you want.
Copy, structure, wireframes, design, and prototype: The non-plus-ultra?
The Autodesigner 1.5 from Uizard (currently available in the Beta version) takes another approach and outshines Wix. Starting right from the beginning where we took off in the first part of our Webdesign meets AI series, it provides you with everything from copy to the prototype. It sounds very promising, indeed:
“You bring the ideas, AI does the rest. Use Autodesigner to generate a whole prototype and then update your project with new screens, themes, and images using simple text prompts.”5
Just like in Relume, all you need to do is provide a brief company description in order to get your low-fidelity wireframes and your designed wireframes, which you can switch between. By choosing some adjectives for the style of your website, you at least lead the direction of the design.
Next, you can edit colors, shapes, images, icons, buttons, and forms. The range of possible creative options is much broader than the Wix creator. Also, it allows for collaboration on the design, as team members can join your activity, and you can export pages, sections, or single elements. What is more, it allows you to prototype your website design easily instead of having to manually connect sections.
AI for web design, just an illusion?
Considering the possibilities and speed of AI website builder tools, we are not surprised that 78% of executives believe that generative AI will allow design processes to be more efficient and streamlined.6
All that glitters is not gold
Up to a certain point, AI can inspire your web design, it can help gather ideas and create the basic structure, which you need to break to design something more inspiring, branded, and unique. It might save you time getting done the first really raw draft and also help you create unique photographs that no one has ever seen before.
Jesus Coto, CEO and Co-Founder of The Branx, points out:
“AI will seduce you to believe you get faster results. But you will most likely be as far from creating a unique website as you were before using AI.”
So, at first sight, you get the impression that you have built your sitemap, wireframe, etc. within a mere fraction of the time that it would take without AI. However, taking a more detailed look you realize that the output lacks uniqueness, creativity, and the human touch that characterizes engaging branding and websites, meaning that there is still a long way to go. This does not mean that the AI results are not useful at all—you can use them for inspiration or to gather more information on what would probably work or not, enabling you to make better decisions.
Why the human element is critical in web design
Usually, with all the structuring, copywriting, and design efforts, we spend hours on a single section of a website. This is because it is a creative, innovative process until you reach a unique and compelling digital experience. AI-made designs, however, are standardized, quite the opposite of unique. Damian Bello, Web Designer and Co-Founder of The Branx, points out:
“AI-generated websites don't stand out and don't push boundaries. They fail to create the brand experience every user is looking for.”
Hence, designs created by AI lack the humanity and the strategic alignment that you get by working with a human designer. Also, effective web design goes beyond aesthetics and functionality; it hinges on understanding user needs, emotions, and cultural contexts. AI is primarily data-driven and can't fully comprehend the nuanced aspects of user experience, particularly emotional and cultural details.7
Be unique or be nothing
Thus, if the unreflected use of AI in web design continues to rise, websites might end up being very similar to each other in terms of layout, wording, and visuals. No startup is able to stand out and attract investment with a website that is a replication of what has already been created.
In order to offer a unique digital experience to users, you need to align and leverage the skills of brand strategists, copywriters, designers, and, for the last step, developers. AI is able to help each of them at some stage by providing alternatives, quickly coming up with ideas, and, with specific human-made prompts, creating useful content. Thus, relying solely on AI tools will most probably not help you reach your branding and website goals.
Enjoyed the read? There is more to come: the last part of our series will talk about the use of AI for web development. In the meantime, feel free to browse our branding and web projects for startups.
By the way, if you are curious to see how our AI images integrate into the respective websites, check out the Vivici case study and the HRBench case study.
Sources:
1 Wix
2 HubSpot
3 EveryPixel
4 The Meisle
5 Uizard
6 Capgemini Research Insititute
7 Sophisticated Cloud
