- Do AI design tools really work?
Are they as amazing as they claim to be?
Today I am putting them to the test.
I'm gonna be trying out four different AI design tools
for the very first time.
This is the first time that I've ever used any type
of AI design tool
and I'm gonna be seeing if they are more of help
or a hindrance to the design process.
And I'll also see exactly how afraid I should be
of AI taking my job as a designer.
(gentle music)
First off, let's try Uizard?
Uizard.
I don't actually know how to pronounce this,
but it's meant to be able to take a wire frame
that you've drawn and transform it
into a high fidelity design.
So let's see just how good a job it does of that.
I've created an account but I haven't done anything yet.
We're gonna start from scratch.
And I know that I'm supposed to be looking for
this magic tab.
Let's scan a wire frame sketch.
I'm gonna drag one into that I prepared earlier.
Let's see how good a job it does.
Okay, yep.
This is my sketch, it should be for web.
We're gonna go ahead and import.
Okay, interesting.
Let's bring up my drawing
and compare it side by side shall we?
So when I draw a squiggly line like this in a wire frame
I mean it to be a heading
and it does seem to have captured that,
so I'm kind of surprised.
Yeah, this is an image, it's put an image.
These though, it's made them into radial buttons
and I intended them to be little icons.
That's what I draw in a wire frame as an icon.
I wonder if there's a way you can like train it
to know what a piece of a drawing is gonna be.
Didn't quite capture either an icon here
or all of the text underneath this,
even though I had it in all of these places.
It's got an image.
It's also missed my CTA button up the top here.
It's put an input field in here and another one here.
I like how because I didn't write anything,
it has added in some Lorem ipsum though.
This is where we really start to lose it.
Like I was meeting this to be like a card or something
with a colored background and I mean it just doesn't exist
in what this has done.
Let's see now though if we can take this
and turn it back into a wire frame
'cause I've seen this is another feature.
This one here.
If I click this, okay, now we go back to wire frame.
I could actually see this feature being pretty useful
when we're like pulling from a design system.
You can end up even in the like early phases of a project
producing something that looks pretty high fidelity
and that can be confusing for a stakeholder
to give feedback.
They're like thinking you're presenting the finished details
when really that was just the fastest way
for you to put together a mock up.
So being able to turn it into a wire frame again
could be useful.
I wanna try something else 'cause I know they have something
where you can add in.
Here we go, a screenshot.
It always wants me to use the demo first it seems,
but I'm gonna add in a screenshot
of the ConvertKit homepage and we'll see how it does
in transforming this into an editable design.
(gentle music)
- [Announcer] Five minutes later.
- Okay, it's done it but it's in wire frame mode.
I'm gonna move this back over,
and that's because I guess I didn't turn this off.
Let's turn it back on again.
Okay, well it's completely changed our font.
I guess it didn't know how to read it.
What has it done here?
It's put this in as an image
and this one seems to be editable.
Yes, can I edit this?
Can I like, no, yeah, there we go.
This one's editable, this one isn't.
So that's weird.
It obviously didn't see that as a button.
But still this is a good base to start with we'll say.
It's lost some numbers.
I guess it had trouble drawing my vector speech bubble
a little bit.
It's got these folks in here and.
(gentle music)
Okay, I guess what I can say is that this seems more useful
than starting completely from scratch
if you wanted to rebuild something,
but I'm not understanding what the use case is
for this to be honest.
I was thinking originally like maybe this is useful
if you wanna learn how a webpage is structured,
like learn from what someone else has done.
But I think the best way to go about learning in that sense
is to actually rebuild it yourself
and go through the process of making the alignment
of things, making the choices, copying what you see.
I don't know how much value you're gonna get from this
specifically and I really hope no one uses this as a way
to generate a logo.
Let's see what else?
Ooh, this is interesting.
I wish I had an actual hot jar heat map to compare this to.
Okay, here we go.
It's gonna generate a heat map based on what it thinks users
will most pay attention to.
I mean it's obviously attaching itself to the larger,
darker text, to people's faces as well,
although not so much there.
It kind of appears to me just like it's being done
based on contrast in a way.
I dunno.
Yeah, I wish I had a real one to compare to
because that is interesting.
I really wanna try one more wire frame.
Let's draw something else shall we?
We'll draw a mobile page this time.
(gentle music)
Okay, this time I've actually written some text
and I'm gonna see if it makes this into an icon
if I put a little cross through it and if it knows that this
is meant to be a button.
I dunno, let's see, let's go.
Which was it again, this one.
(gentle music)
Oh my god, it read my writing.
You saw how terrible that is, right?
Like this is me writing on my iPad, very realistic.
I guess I was even trying to be a little bit more
neater than usual.
It read it and it's got that text in there now.
That's kind of cool.
It did nothing with the like laptop image thing
I was trying to make it generate.
It hasn't made this a headline and it hasn't made this any
larger than other text either.
I guess this is a button now.
I guess that's what this is doing, but still again,
is this more useful than just like
dragging in stuff yourself, maybe?
I guess it gives you a base to start with
and I guess that if you use this design tool
then it's already in here.
But because I use Figma to actually create my final designs,
I can't see this being a valuable addition
to my process specifically.
Let's try out one more though.
Visily is a tool that does something kind of similar.
Oh, it does specifically say it's built for non designers
so that's interesting.
But let's jump in and try this.
So I'm gonna click start from scratch and sure let's,
wait, can I do a webpage?
I guess we're doing an app.
Let's start designing.
I don't want your instructions.
Let's see.
Okay, maybe I should have used the instructions.
I'm gonna drag in this image and let's see if we can find
the magic tool for it.
Ooh, how about this?
Maybe I'm wrong about this tool being able to create designs
from wire frames.
(gentle music)
Ooh, here we go.
Okay, maybe it doesn't do it from a wire frame
but we'll try again with the ConvertKit site here.
(gentle music)
Okay, what's it made for me?
Seems to have produced two versions.
Output one closely matches the uploaded screenshot
and then the second is with a different theme.
So that's interesting.
This is done.
Oh, well I was looking at the top and I was gonna say a much
better job than Uizard did,
but I'm not sure now as I look further down the page.
Like what's happening here, its lost a whole paragraph.
It has also not managed to replicate my speech bubble,
but the font, even though it is still wrong is,
I don't know, it feels slightly closer at least.
And it's captured this bit of it better.
Oh it is taken some creative liberty there.
That is not Courtland Allen
and that is certainly not Arnold Schwarzenegger.
Oh, it did a much better job with this though.
Did it just put in an image?
I think it did.
Which to be fair is an image on our side.
It's lost color here for some reason.
Interesting.
I don't know if one is better than the other to be honest.
I think they both have different strength and flaws.
I do really wanna try to get it to create a page
from a wire frame though.
I think I do that here.
We'll try my original website first.
(gentle music)
Let's try again.
- [Announcer] Three hours later.
- Where'd that graph come from?
Again, let's compare these.
So it seems to have thought this was a graph.
Ooh, it's done a much better job
of the buttons though at least.
It hasn't recognized a heading like the other one did.
Did there for some reason but not at the top,
okay, interesting, interesting.
Let's try again with a mobile one.
I actually tried hard with this one to make it like a,
kind of like a neat wire frame to work from.
Ooh, at least it seems to have recognized
that this was an image.
I think 'cause of the cross,
it hasn't done the circle shape,
but I guess I could click this and just turn it into one.
Interesting.
I don't know, maybe the way I wire frame just cannot be read
by AI 'cause something like this would be really useful for
making the leap from you know,
iPad sketches into high fidelity.
Let's move on from web design, shall we?
And let's try get it to generate a brand for us.
So I'm gonna type in creator network.
This is a new product from ConvertKit.
We haven't made a separate visual identity for it yet,
so maybe Looka can help me get there.
Let's try.
Okay, industry. (gentle music)
Okay, pick some logos that we like.
I'm gonna click on this one,
like the hand drawn side of things,
like the simplicity of that one,
I kind of was drawn to that one as well.
Another hand drawn one.
I don't know, let's just click on a few and we'll see.
We'll see what it does.
Gonna go for blue and I don't want a slogan.
Can I, I'm gonna click on this type of thing
'cause it's kind of similar to visuals we've been using.
I want it to have more of like an arty feel
and let's bring in some good vibes too.
(gentle music)
Okay, so pretty much it's taken the logos that I clicked on
and it's just put my text into them
and it's not gonna let me see anymore without signing up
and I don't particularly want to give this company my data.
I think this idea of generating a brand would be stronger
if it like asks you some questions about your business
and then suggested iconography or colors that best fit
with what you were trying to achieve.
I'm sure there's plenty of articles on the internet about
like color theory, color psychology,
that the machine could learn from to suggest those things.
But also if you just want like a quick logo for a project
and you don't have the skills to create it for yourself,
then I dunno, maybe something like this can give you
some usable options.
The last thing you wanna look at,
another part of my job is designing presentations.
So let's see what this one suggests.
So this is gonna generate a slide based on a text prompt.
I'm gonna give it some information from a real
brand perception survey that I ran recently.
Oh, okay, well apparently it can't take a lot of text.
Let's give it a little bit less.
Okay, so it's generated a chart for me
and notice that I put in percentages
and it's interpreted well I think the way I said
voted in favor and then part-time or more likely to agree.
So it's captured the agree and disagree side of this.
Are the percentages correct?
I mean yeah, it probably is based on this number here,
but it didn't mean that 23 or so percent of folks disagreed
with this statement.
Actually we had, I'm looking at my real data,
16.5% said neither agree nor disagree.
So if I presented the slide it would be a little inaccurate,
but hey it got kind of close.
Let's try one more thing.
Let's try talk to it like it's ChatGPT.
(gentle music) (buzzer buzzing)
I'm gonna open a incognito window.
(gentle music) (buzzer buzzing)
It even knows it incognito.
Let me access it on a VPN.
It still knows, how does it do that?
(gentle music)
Okay, that did kind of behave like ChatGPT in that it has
created some content for me,
not just displayed content that I gave it.
It must be trained on our website 'cause it knows that we're
about email, that we have automations, and that yeah,
the idea is to engage your audience
with personalized emails.
It's definitely read our website.
That is interesting.
One thing I've noticed 'cause I have been using ChatGPT
a bit recently when I've been brainstorming is that the AI
loves an exclamation mark.
It's always saying, look no further.
Have I got the something for you.
Increasing engagement, exclamation point written here.
Still this could be a helpful base to start with.
It's kind of funny that it's taken engagement to mean like
a wedding engagement, not like audience engagement.
So we got a ring there.
But yeah, I know I joked a little bit in the beginning
about AI taking our jobs as designers
and I just wanna make it clear that
even as these tools improve, which they will improve,
they will get better,
they will be able to read my wire frames,
my style of wire framing and perhaps, you know,
pick the right icon for audience engagement.
But I still don't think they will replace design
as a career.
I think we'll absolutely see more production work outsourced
to AI, which I honestly see as a good thing.
It frees up designers to spend more time on the creative
higher impact things.
But even operating in AI requires someone to type in
the right prompt that like understands the business insights
and the audience and what we're trying to convince them of,
what task we're trying to help them achieve.
You still need to have a certain level of taste
and like the ability to spot inconsistencies
across a body of work as you are using AI.
I will not be introducing any of the tools
that I tried today into my process.
Definitely think they're more of a hindrance than a help
at this stage,
but I'll be keeping an eye on them and keeping open-minded
to new tools as they arise.
What do you think about AI?
Are you using it in your design process?
Do you have concerns about it replacing your job one day?
Let me know about it down below the comments.
And if you wanna see another fun video where I'm testing out
my color IQ and doing some fun tests online,
go check out this video over here.
(gentle music)