Shaping the Future of Design cover
Shaping the Future of Design cover
Shaping the Future of Design cover

AI for UI/UX Design: Shaping the Future of Design

AI for UI/UX Design: Shaping the Future of Design

Jul 16, 2024

Wenjia Profile Picture
Wenjia Zong

Product Manager, Creatie

Creative industries are in a state of heavy change.

As more powerful and innovative tools enter the market, the future of UI and UX design becomes more difficult to predict. One thing is certain, though: AI UX design tools are going to be a major part of the picture.

As UX designers, we’re standing on the edge of a complete reenvisioning of how we work. But we’re not just talking about a simple re-skinning here—we’re talking about a complete redesign from the ground up, code and all.

In this article, we’ll explore how today’s AI design tools can empower UI and UX designers to work more effectively, push design boundaries, and build more profitable design studios.

What can AI do for UI/UX designers today?

The world of AI and design is moving quickly. AI-powered tools’ current limitations won’t be impediments for long. But we’re about as good at predicting the future as you are, so let’s start with what we can do in the present.

What can AI do for UI and UX designers right now?

Ideation and prototyping

Design user flows and personas

The best UX designs always keep real customer journeys in mind, which is why many designers like to have a workflow sketched out and visible to guide them while they build their UI.

You can use generative AI tools to design color-coded workflows, like this one on FigJam:

A FigJam workflow (Source)

Similarly, you can use these software tools to draft basic user personas—like this one, which we created using ChatGPT:

A ChatGPT response

Of course, user personas are always best when informed by deep customer research, so tread with caution here and use AI-generated personas only as a rough sketch.

Propose design ideas

If you’re struggling to generate ideas or get a page section to really fit, you can use AI design tools to get you out of a trouble area and propose alternative ideas. With Creatie Wizard, AI can assist you in the brainstorming process and generate new design ideas for your project.

Creatie Wizard (Source)

Create a wireframe

Coming up with UI ideas from scratch can be a huge roadblock. Instead, you can use AI tools to generate basic ideas to get you off the blank page and get some ideas cooking.

Here’s an example of a wireframe from Jeda for an online camera store website:

A Jeda wireframe (Source)

Convert rough sketches

Even with modern tech like iPads and digital sketching tools, the trusty pencil and paper are sometimes all you really need to sketch out a basic idea for an interface design.

Turning that physical sketch into a digital outline can be a little time-consuming. But AI products like Uizard can help you scan hand-sketched mockups and turn them into digital designs.

A Uizard AI-generated UI (Source)

Designing

Design mood boards

Mood boards are important for getting a broad idea of your final design at a glance. They’re especially helpful for sharing ideas with clients and getting the sign-off on creative direction before you dig too deep into design work.

You can use AI design tools here to generate several different mood boards and iterate on that “nearly perfect” board your client isn’t quite convinced by.

Here’s an example of a mood board from Midjourney:

A Midjourney mood board (Source)

Choose color palettes

Not pleased with your current color palette? Use AI to suggest alternatives and then plug in those color codes to see them in action.

Khroma is a great tool here. It helps you visualize how color palettes will work in context once you’ve plugged your copy in.

A Khroma color palette (Source)

Suggest font pairings

Finding the right font pairing without falling back on old classics like Garamond and Helvetica can be a huge time-suck during the UX design process. AI tools like Fontjoy can streamline this process with a simple contrast slider and generate button.

A font pairing from Fontjoy (Source)

Create graphics and visual designs

A simple and powerful use case for AI in the world of design is to generate icon sets.

You can do this from scratch using prompts, or you can provide an existing set of icons and ask your AI system to generate additional icons (on its own or based on your specifications) to ensure that all icons adhere to the same style.

Here’s what you can create with Midjourney, for instance:

Icons from Midjourney (Source)

AI design tools can also do a lot with existing images to help you find a better fit for the design you have in mind. You can swap out an image's background, turn it into a hi-fi or vector image, or take an existing image and use AI to expand it even further.

Check out this image before and after Creatie’s AI image enhancer:

An image from Creatie (Source)

Finally, you can use AI to generate 3D icons from a wireframe. You can also give your tool a set of existing 2D icons and instructions to generate 3D versions.

AI tools like Creatie’s Magicon can generate icons like this one:

An icon from Creatie (Source)

Generate a full UI design

There are AI tools currently on the market that can generate a full UI design from scratch. Like any AI system, the output’s quality depends heavily on your ability to engineer effective text prompts and teach and train the system over time.

Consider, for instance, this (not particularly inspiring) design, based on a simple prompt, from AI UI generator Galileo:

A pricing sheet UI from Galileo (Source)

Compare that to this page from the same tool, which used a much more in-depth prompt:

A landing page UI from Galileo (Source)

Auditing and handoff

Audit existing assets against style guides

A solid AI UX design suite will be able to scan all of your current assets, identify reusable components within existing files, and generate a comprehensive style guide that is complete with brand fonts and colors. Creatie’s automatic style guide feature extracts values from your design file and generates a style guide in a matter of seconds.

A style guide from Creatie

Design to code

AI is also bridging the gap between front-end design and the dark side: coding. Take Anima, for example—it can take a Figma design file and use AI to convert it to HTML or React code.

An Anima UI-to-code output (Source)

How to use AI design tools for the first time

First time using AI technology to design user interfaces? The first thing you’ll need to think about is what kind of AI UX design tools you’ll actually need.

For example, do you just want to design workflows from a few text prompts? In that case, something like FigJam AI is a good option.

Maybe you want something to support the user research process and help with question ideation and prepping for user interviews. Here, ChatGPT and other text-based generative AI tools might be more suitable.

However, if you’re thinking about AI design more broadly—such as using AI to design layouts, create icon sets, and enhance existing assets—a user-friendly AI UX design suite like Creatie could be what you need.

You’ll most likely need a combination of these tools, so before you dive in too deep, keep one tip in mind: don’t try to reinvent the process on your first day. AI design tools are available to help you work more efficiently. Overwhelming yourself with a huge stack of different tools, all with their own learning curves, is going to have the opposite effect.

Start slow, then scale.

Start with one tool and then integrate it into your existing workflows. Choose whatever seems like it’ll have the biggest impact on your design effectiveness, such as tackling a weak area. Once you’ve got the hang of it, move on to the next one.

Similarly, it's a good idea to set aside some time for a few practice runs with a new tool before putting it to work on a real-life client project. This will help you overcome some of the steep parts of the learning curve in a no-pressure environment, and it may even inspire some new ideas for that next project.

AI’s limitations in supporting UI and UX tasks

As optimistic as we are about AI-driven UX design, it's important to recognize that these tools do still have some limitations, at least for now.

Let’s take a look at some of these limitations:

Full UI generation isn’t particularly creative

Yes, you can use AI to generate a full user interface, but most of what these apps spit out is still pretty formulaic.

Take a look at this weather app that Figma’s AI UI generator, Make Designs, produced. You’ll notice that it looks strikingly similar to Apple’s existing Weather app.

A Figma AI-generated UI next to Apple’s Weather app (Source)

The problem here is that most AI-generated UIs are far too similar to existing designs, meaning you might as well use a stock template anyway.

Not a lot of creativity has come out of these solutions just yet, and there are also some plagiarism concerns, as in the case of the Figma UI above.

In short, a lot of human editing is still necessary if you’re going to generate full UIs using AI.

Text within images can get messy

Generating images with text in them can get a little chaotic, depending on what tool you’re using. This issue is getting better, but we’re still not quite there.

Here’s DALL-E 2 (from OpenAI, the same company that brought you ChatGPT) trying to write a letter to Santa:

A DALL-E 2–generated image (Source)

That text is probably supposed to say “Dear Santa.” The letters are there, but it doesn’t exactly look like English.

DALL-E 3 is a bit better. This one at least gets the word Christmas in there, but the rest is mostly gibberish:

A DALL-E 3–generated image (Source)

Even when we specify the exact text to include, DALL-E misses the mark:

A DALL-E–generated image

The data that models train on can impact their output

For AI systems to be as effective as they are right now, they have to train on immense data sets—which already aren’t bias-free.

In other words, the information that those data sets contain can (and does) impact what AI tools produce. Even behemoths like Google are susceptible to such issues, like when it dropped the AI Overview feature into its search product and trained it on Reddit post data.

A Google AI response (Source)

AI design tools still have limits

We’re not at a point yet where we can use AI to generate full designs from scratch without human intervention, and we might not ever be.

What’s important for designers today is to recognize AI tools’ limits but not dismiss them simply because they aren’t perfect replacements for humans.

Instead, we should see these AI solutions as powerful tools in our design arsenal and complement them with human creativity to create successful and innovative UIs.

How can designers anticipate AI’s future in UI and UX design?

Regardless of how you feel about AI design tools in their current state, one thing is certain: they aren’t going anywhere. Instead, they’re going to become more powerful, more ubiquitous, and, eventually, a commonplace part of the design ecosystem that displaces old-world tools, much as Figma replaced Sketch.

As a designer looking to carve out (or hold onto) a career in UI and UX, keeping up with new technological developments should be a priority for you. Here’s what we can expect in the coming years and where you should focus your attention:

  • A rise in AI tools that support product and user needs research, like Ignition

  • More dynamic content and user personalization

  • An increasing adoption of generative design tools like Creatie

  • Enhanced sophistication in design-to-code tools like Anima

  • A growing need for AI skill sets and prompt engineering abilities

Meet Creatie: Your AI UX design partner

As the world of UX design morphs into one where the tools at our disposal take an increasingly large place in the spotlight, there’s a question left on the table: will you be part of the change, standing at the forefront of product design innovation, or will you watch from the sidelines as others embrace these potent and powerful new tools?

Part of the change, you say? We thought so. Better get to it, then.

Try Creatie—our AI UX design tool—for free today.

The best product design tool for small teams

Powerful features, fair pricing

The best product design tool for small teams

Powerful features, fair pricing

The best product design tool for small teams

Powerful features, fair pricing