AI in UI/UX Design: Friend or Foe?

BACK

April 11th, 2024, posted in learning
by Adelina

As technology advances, AI keeps getting smarter. It keeps getting closer to making our work easier and faster. But can you use AI for anything, including creative work like UI/UX design?

 

We took some time to play around with a few AI tools that can speed up design work. We tested out their ability to produce what we ask for, to create visually appealing designs, and to make design elements we can actually build upon in our design software, Figma.

 

So the question is, can AI help you design things faster or does it slow you down? Here’s what we found out.

 

Finding the right prompts: AI’s biggest challenge

AI tools are most useful when you know what to ask for - this doesn’t mean just being sure of what you want to receive, but knowing how to ask the right questions and adding the necessary keywords that the AI will then pick up and create a design you can actually use.

 

This is one thing we struggled during our AI tool research process: what do we even ask for? In a first experiment, we asked Galileo AI to create “an admin dashboard with a series of charts at the top and a table at the bottom, dark sidebar, poppins font and shades of blue as the primary colors”. This prompt is similar to a lot of dashboards we design from scratch, although we didn’t get too specific with the dashboard’s concept or industry just to test the waters.

 

After we typed this in, Galileo asked us to confirm what we asked for while recapping each element of our prompt:

 

 

To no surprise, the summary was accurate - Galileo simply split our prompt into a series of bullet points to follow. This was a nice touch, as it made it clear it was taking our request into consideration. Until it didn’t:

 

 

To our dismay, even though we only asked for the sidebar to be dark, the entire design ended up being in dark mode. The primary color did end up being the blue we asked for, however it didn’t register our request for Poppins as the font - this can either be a bug or this AI tool is simply conditioned to not play around with fonts.

 

We discovered that Galileo lets you adjust the results it gave you, by changing the primary color, having dark mode vs. light mode, or changing the font. Poppins, which we’d asked for, wasn’t in the font list, which made us wonder if this tool could become smart enough to tell us that at the beginning.

 

 

Overall, the first dashboard Galileo gave us looked pretty good, and the Figma export it provided used auto layout, which makes designing things more efficient. However, it seemed to have nested elements a bit too much, which means we’d have to take our time ungrouping some of them if we turned the dashboard into a proper design.

 

Next, we thought about a design element we tend to spend a lot of time on: charts. And what if Galileo AI could help us speed that up? We went with the following prompt: “a dashboard containing a series of pie charts, line charts, donut charts and bar charts. primary color is periwinkle, complex sidebar”.

 

Unfortunately, Galileo thought the sidebar was a separate request, so it created 2 pages:

 

 

We didn’t know what was more noticeable: the lack of the charts described or the lack of complexity in the sidebar on the second page. But one thing was clear, Galileo might be good at making nice, corporate-looking designs, but it’s not as good at listening to you.

 

The next tool we tested out was Uizard: this was more of a Figma-like tool, which means it doesn’t provide Figma exports. This was a big issue from the start, but we gave it a fair shot. We asked this tool to design a pet hotel manager, and to our surprise, it created multiple screens. Almost enough for an imaginary MVP.

 

 

It seems that getting more specific with the type of admin panel we wanted was actually helpful in this case. However, we weren’t too pleased with the visual look of the screens. And given that we had to edit them within this app, which could prove troublesome when shipping out a design to code, Uizard suddenly didn’t look like a good fit for us.

 

Lastly, we checked out a Figma plugin called Text to Design. This one has a friendly interface with a few prompt suggestions to help you create your own. So we asked for another pet hotel manager, bringing back the same visual elements we asked for before, such as the font being Poppins, having a dark sidebar and royal blue as the primary color.

 

To our surprise, even though it listened to our UI instructions, the page was almost empty. Which begged the question - did we need to specify exactly what should go into the page? Would that make a difference?

 

 

The next time we got more specific and told this plugin to add charts at the top of the page and a table containing occupancy data below. Unfortunately, it looks like we should’ve specified what should go in the middle of the page as well. Not only that, but there were no actual charts on the page, and it seemed to have mixed the font we asked for, Poppins, with Roboto.

 

 

All in all, it looks like you have to be careful when writing your prompts: the key to getting the design you asked for is being really, really specific. But careful specific, as AI won’t be able to guess that if you want a row of charts on top, then the table you also asked for will have to cover up the rest of the screen. In other words, don’t leave any details to imagination, as you’re talking to a robot. They can’t understand nuance, so you have to force-feed it to them.

 

Is AI a good design time-saver?

We gotta discuss the aesthetics of it all: if you gotta use AI to generate quick designs, you’re probably trying to cut costs. But when cutting costs, you gotta sacrifice a thing or two - the way spending less on development means getting less features. Similarly, when using AI in UI/UX design, you might have to sacrifice the beauty of it. Literally.

 

As we’ve seen with the examples given above, AI isn’t too good at creating visually pleasing designs. It’s certainly no trip to Dribbble. If you need a quick design but you’re keen on it looking good, or you have a series of branding guidelines you want the design to follow, you have to either (1) become really good at writing prompts to get exactly what you want, or (2) just hire a designer.

 

As we’ve shown, writing the perfect prompt is tricky: you gotta be fully aware you’re talking to a robot and you can’t leave anything to interpretation. There’s a caveat to this, however - this means spending extra time and money learning how to talk to AI to get what you want. Going from iteration to iteration, when AI tools limit the number of prompts you can ask for free. Which begs the question, is this really a time saver? And most of all, a money saver?

 

A good way to decide if you should use AI to design your app or not is being very sure there’s no other way: if you can’t possibly hire a designer, you could give it a try. More so if you’ve used ChatGPT and similar tools and you know how to ask the right prompts. In that case, it could be a time-saver. But keep in mind you might not get the most usable or scalable design - a design that doesn’t come with a clear design language, a series of components and styles, will be hard to scale up in the future. If you’re creating an MVP for an app, and you’re planning to build on it, you should invest in a real designer. If all you need is a concept, something to show in a proposal, then it might be a good fit for you.

 

Should you use AI as a designer?

Let’s address actual UI/UX designers for a sec. You’ve probably heard of AI tools and you’re wondering if they could help you. Could AI speed up design work? Could AI solve complex user flow issues? Or at least inspire you, help give you ideas?

 

We decided to experiment again: Galileo came back into play, as we noticed it did a better job visually and in terms of scalability in Figma. We asked Galileo to build something we’ve built before, a few years ago: “Design an admin dashboard for oil drilling engineers where they can track daily progress on how much drilling has been done per well, having a total of 100 wells. Include colorful stats per well, pagination, filters, sorting options, a search bar, and the option to see the wells in table form. Main color is turquoise.”

 

 

What we got was pretty interesting: Galileo came up with an interesting concept, helping us figure out data points we might not have known about since we’re not oil engineers. However, this design doesn’t solve the issue of displaying a large amount of data in one screen. But there’s no way the AI could have known about that issue unless we specifically mentioned it.

 

All in all, it seems that AI tools could be helpful when you need inspiration, ideas, anything that’s too specific for Dribbble or even Google. In the grand scheme of things, it could be useful, as long as you know what to ask for. But if you’re a ChatGPT beginner and you’re in a hurry, maybe go back to Dribbble for inspiration, or talk to industry buddies.

 

Should you use AI for design as a non-designer? 

Now, how about those with little to no experience in design? It might seem like using AI is a quick fix for design needs when you lack an actual designer in your team. And if you’re well-versed in ChatGPT overall, as we’ve already pointed out, you’ll have an easier time getting what you’re looking for.

 

However, the key here is what you need the designs for in the first place. As we’ve already mentioned, if you’re gearing up to build a bigger app and want to get started with an AI-generated design, scaling said design might not be easy if all you have is a series of pictures (and not usable Figma files). But if you’re just proposing a concept, a business/app idea and want to quickly create an interface for it, AI might be what you need.

 

Overall, from what we’ve managed to learn, AI design tools seem to be better geared towards research, inspiration and ideas, rather than giving you design elements you can use to build entire apps. But this isn’t bad news - there’s plenty of room for AI to grow and improve. Until then, real designers with plenty of experience aren’t hard to find and will be able to listen to you and understand your needs, unlike a robot.


If you’ve generated some designs through AI and you need them to be polished, contact us and let’s see what we can build together.


About the author

Adelina

Artsy kid navigating the world of tech for the first time and trying to learn as much as possible about it. My biggest passions are video making, writing, and TV shows I can cry to at 2AM. I also really love IKEA.

See more articles by Adelina