Will AI replace designers? Open AI, Stable Diffusion and the likes have enabled a range of products to bring AI-assisted copywriting, image creation, and even coding to our fingertips. It was just a matter of time until generative AI made its way over to User Interface design.
💭 What if we could generate User Interfaces automatically? To take it even a step further, what if we could predict UIs?
It's only recently that these AI-driven interface design tools are becoming commercially available. There's Galileo, Genius, Magician, and probably many more to come.
🪄Generative design has been coming for years
This current wave of 'generative AI' might seem pretty new for UI design, but work in this area has been ongoing for years, with notable progress back in 2020. That was the year of Salesforce's Einstein Designer – the era of 'cookie-cutter web design' was ending, and AI-assisted design was just around the corner. Some of it was pretty spectacular too, with the AI going as far as personalising user interfaces depending on the visitor:
Imagine a custom interface for every website visitor. It’s not that far away. ~ Jeff Link
So how do today's prompt-driven AI design tools differ from approaches of yesteryear? This article will act as a bit of a recap, covering:
🤖 What is generative design
🤖 The evolution of AI-driven design tools
🤖 How do today's AI-assisted tools compare to previous work from Einstein designer etc.
Letter
Generative Design: From Architecture to UI Design 🏗
'Einstein Designer' (from 2020) was one of the most popular AI-assisted design tools announced that used neural networks to aid UI design. In Einstein’s case, a generative technique was used where multiple variations of a design are created rapidly, leaving a human to choose the best options. That generative design process depends on both human and computer, with the human guiding it all.
In fact, it is the same AI-Driven design approach that was already widely adopted in the manufacturing industry, which provides a blueprint for AI-driven interface design to follow.
Generating variations by mimicking natural evolution
Often used interchangeably with ‘AI-Driven Design’, Generative Design is a design approach widely used in architecture, manufacturing, and structural engineering. Mimicking natural evolution, it iteratively creates thousands of design variations for a given problem, leaving a human to curate the best results. The generative approach enables the exploration of a wider range of possible solutions in a short space of time.
Generative design is an iterative design process that involves a program that will generate a certain number of outputs that meet certain constraints, and a designer that will fine tune the feasible region by selecting specific output or changing input values, ranges and distribution. ~ Wikipedia
In manufacturing, generative design was accelerated by tools like Autodesk, who provided an integrated workflow between human and computer. Until recently, there's been few tools commercially available to do this in web design.
Generative Design is a new and exciting chapter in the field of applied design. It fuses aspects of storytelling, experience and branding with algorithms, human interaction, data, AI and programming. ~ Patrick Hübner
Why AI improves design
The machine-inspired approach of generative design depends on input parameters (such as materials, size, weight and constraints), from which design combinations are created to reach a desired output. This process of telling a computer the outcome you want to see, and providing input parameters to get there is a very different from sketching ideas and coming up with solutions in your head based mainly on your experience, and the capacity of the human mind.
Could we see similar efficiency improvements with computer-aided web design?
Manufacturing companies like Airbus, Under Armour, and Stanley Black & Decker therefore used generative design to come up with new solutions that the human mind couldn't come up with alone. New Equipment explained this, providing a concrete example, where Airbus created an interior aircraft partition that was 45% lighter thanks to a generative technology:
With this example, could we see similar efficiency improvements with computer-aided web design? What applications have there been until now? This great interview from between Claudia Illguth and designer Patrik Hübner suggests so:
Imagine a world in which you don’t design what you already know but rather teach the computer what it is that you actually want to accomplish.
This unique mix of ingredients allows us to build engaging brand experiences and completely novel forms of visual design
Generative Design for Graphics Designers 🤖
In comparison to manufacturing and product design, tools for computer-aided web design were slower to emerge. Luigi Troianoa and Cosimo Birtolo’s paper in 2014 put it down to UI Design being a creative, and more human-intensive task, made up of decisions a human is expected to make.
Designers working on web and UI design have to decide things where human understanding and taste was perceived to be necessary, such as:
📏 Spacing
🎨 Colour palettes
📐 Positioning
🖋 Typography choices
Their study, however, did go on to propose that if a human is kept at the centre of a Generative Design process, positive outcomes can emerge:
Generative design, while keeping the centrality of human creativity, introduces a novel approach to assist humans in finding effective and aesthetically convincing solutions.
AI vs. human designers
Yuri Vetrov (creator of algorithms.design) is another AI design enthusiast who has followed AI-driven design since back in 2012. Similar to Troianoa and Birtolo, he outlined the need for a human touch within AI-driven design, stating that algorithm-driven design would act as an 'exoskeleton for designers'. It would help us construct UIs, prepare assets, and personalise the user experience, but not replace human designers.
It wasn't until towards 2016 that AI-driven website builders and design solutions became more widely available and accessible:
In 2016, the technological foundations of these tools became easily accessible, and the design community got interested in algorithms, neural networks, machine learning, and AI. ~Yuri Vetrov
And here are a few of the tools that emerged during that time:
There were many projects in beta, early access, and some that were just demos. Check out Yuri's website for a complete curation of practical examples and tools during those times.
UI Design, but cheaper and easier
As we moved into 2018, the limitations outlined above start to wain. The introduction of Salesforce's Einstein designer demonstrated that generative design could also tackle those tasks perceived to be more human-intensive.
Sönke Rohde (then vice president of Salesforce’s UX R&D team) showed that things like typography, colour, and style space could be ‘learned’ through analysing training data, and then used to make UI design cheaper and easier.
Generative design could tackle those tasks perceived to be more human-intensive
The data-science approach taken when training for the creation of a desirable UI design lead to AI being able to determine things like preferable colour choices based on industry. For example, these visualizations demonstrated how software companies gravitated towards the colour blue, and pharmaceuticals towards brighter, stronger colours:
Amplifying the creative process
In a later article with Builtin, Rohde showed off more of Einstein's generative design abilities when sharing some practical use cases, such as rendering personalized email banners, hero pages and designing calls-to-actions:
“Instead of manually creating a set of design variations to run a multivariate test, or to do full-on personalization, you can leverage so-called generative design variations to transform the process.”
He referred to this as 'amplifying the creative process', which again suggests that AI won't replace designers, but speed up their work and make designers more efficient.
Designer Pat Riley also highlighted this in Generative Design for Graphics Designers, arguing that a traditional design process doesn’t really differ much from a generative one:
Riley went on to suggest that the main benefits of generative design include time saved from manual and repetitive work, listing the benefits:
🤖 Reduce the time of design iterations
🤖 Easily create drastic variations by changing a single input
🤖 Generate compositions that would be improbable by hand
Instead of manually producing these iterations by hand; you encode the design process itself into a program that generates an output based on the constraints and variables contained within the source code.
The similarity between generative design and a design process was also highlighted by UX researcher, Shane Ketterman, where he shows how design thinking iterations could be generative too:
Related Reads on AI in UX:
Today's AI Design Assistants
With all the mentions of Einstein Designer throughout this article, you might wonder where it is today. Salesforce recently announced EinsteinGPT is on the way, and the designer appears to have been a prototype that was based around the rest of the Einstien AI Suite.
This is a tweet embed February 14, 2023
Bringing it back to 2023's new AI-design tools, it seems that like EinsteinGPT, almost all of them are powered by OpenAI and GPT-3. Also, they all still share the same focus of reducing mundane work.
Diagram + GPT-3
Diagram is probably leading the way, having also started out back in around 2020 with this prototype by Jordan Singer:
Today, Diagram has grown to offer a bunch of generative tools including Genius, which is marketed as an assistant that sits with you and automates away repetitive tasks in Figma:
This is a tweet embed February 14, 2023
Galileo + Dall-E?
Despite appearing to be an image generator, Galileo creates Figma layouts to get you started faster when designing. Similar to the generative design approach described throughout, Galileo is trained on thousands of user interfaces and generates editable Figma designs. It also adds in icons, images and text too, reducing a high number of simple tasks.
Trained on thousands of outstanding designs, Galileo AI turns natural language prompts into high-fidelity designs.
It is unclear how it works because it's not obviously stated, but it looks like it might make use of Dall-E 2...and here's how that works:
This is a tweet embed February 14, 2023
AI won't replace us, or will it?
As we've seen, AI in design can increase creative inspiration, and reduce our workload by removing repetitive tasks. So it's just here to assist us...or is it? In the long run, who knows what will come! 👀 👇
This is a tweet embed February 14, 2023
More reads
Thanks for reading, catch me on twitter for more, or follow along on this website! In the meantime, here's a bunch more AI-related articles - the first couple I wrote, and the rest is a little reading list on generative design that I found helpful and inspiring.
Buy me a coffee
