Hi everyone, Tony from Uizard here! Today is a very special day here at Uizard
because we are officially starting to send out invites to try out Autodesigner. So if you've signed up to the wait list, now
is the time where you're gonna receive your invite. Either today, or in the next few days, or
weeks. And so as you remember, Autodesigner is basically
ChatGPT for UI design, you can type out your crazy idea in plain English and then Uizard
Autodesigner will basically spit out 5 6 screens pre-designed for you to start from. For those of you that are new here, what is
Uizard? Uizard, pronounced "wizard", but spelled with
a U... "You're a Uizard Harry!"
...is a easy-to-use design tool powered by AI. Our mission is really to make design accessible
to everyone, regardless of whether you have a design background or a technical experience. The goal is to enable more people to take
an active part in design processes inside of their work and organization. And we strongly believe that Autodesigner
is the next step even further than what we already have built to really truly make this
mission statement shines and make design even more accessible than what it used to be. So today, I'll show you what is Autodesigner
and what can it do. I'll also show you what are the other magical
AI features that are already available inside of Uizard and I'll ultimately show you an
end-to-end journey on how you can generate something with Autodesigner, and then customize
and extend it with all the other amazing things inside of Uizard. So with no further due, let's get to it. Now we are inside of Uizard and we're gonna go ahead and click "generate
it with Autodesigner". And then we can select the device we wanna
design for. So mobile, tablet, web. Web is the right device to select if you wanna
design a website, a landing page, a desktop application, a SaaS platform, you name it. And then we can actually describe our project
in plain English. So let's say, a landing page for a second
hand marketplace for selling and buying vintage musical instruments that sound bad. And the second prompt is for describing our
style. So the first one is like the project idea,
like, what it is that you want to generate and the second one is like, what is the style
you want this project to have, so think of it as, like, the theme of your app or website,
or the aesthetic that you want to go after. So here, it could be, dark mode, tones of
blue for example, elegant. You can also just pick like some of the keywords
here if you're out of idea. Otherwise, you can just describe it in here
in the, in the prompt. And now, we're gonna create, we're gonna hit
generate and wait for the work to be done by AI. So why did we built this? Well, we've noticed so many of our customers,
and ourselves whenever we are using tools like Uizard, we are all suffering from what
I like to call the blank page syndrome. We all have ideas inside of our head, and
it's sometimes very painful to look at a blank screen and know where to start and how to
start. So the goal of Autodesigner is to inspire
you and give something that's better than a blank screen to start from. And... there we go! Now we have our website being generated right
here. And you can zoom in and we can actually go
ahead and modify things. So. What's the name of this project? Bad Tunes. So Bad Tunes is our marketplace for bad sounding
musical instruments. Hmm and so once you've been here, you are
basically left within the Uizard tool as you know it. Autodesigner is really just like one layer
on top enabling you to just create something and now you benefit from all the magic that
Uizard has to make this customization basically easy. So you can pick any component, any button,
any element, and change the colors, or the, or the text. So for example here, we could use our, the
Text Assistant to generate, like, an alternative copy for that specific body of text. So we can just pick this one let's say. Hmm. And this is actually a fully AI generated
illustration. So sometimes, Autodesigner will fill the gap,
fill the places where a visual element should be wit an image coming from like
a database of images. Sometimes, it will, it will, it will generate
images, illustrations directly. So this also like, for example, an illustration
that was entirely generated by Autodesigner. And let's see if we have something else. Yeah here for example, these are stock imagery
that was used instead. So this is basically what
we got from Autodesigner. Hmm. And we can, as I said, change absolutely anything
we want here. So we might actually also want to, as I showed you before you can actually
generate alternative text with the Text Assistant, and you can do the
same with with images. So this is an illustration that was generated
by Autodesigner. Maybe we don't quite like this one and we
wanna just get stock imagery instead. And... that's it. One click we got like something related to
music and we don't need to just modify anything. We're gonna do the same here. I clicked suggest. I don't think this was meant to be a camera. Looks like a turn table. But let's just say turn table. Here we go. We got a turn table. Hmm.
So yeah! Very quickly, you can actually just, you know,
get what you want. So let's, let's take a look at some of the
other screens that were generated for us. Hmm.
So you can see like a bunch of different screens. And so if you go into the Interact Mode here,
you can see that Autodesigner already started to create some links between the screens. And that's basically links that you can experience
if you are going to the Preview Mode. So if you go in Preview. You can actually, you know, use these buttons, to kinda navigate through the, through the app as if it was a real app. In this case, it’s, you
know, it’s a fake prototype but we have something that can be tested by a human being and yourself as a designer to see whether or not this
is a good user experience and whether or not this is the right, kinda like user flow for your project So let’s close this and I am
going to show you something else. Because the magic of Uizard
doesn’t stop here right?! As you know if you’ve been using
Uizard because Autodesigner, there are a lot of different tools here you can use to make your life easier as
you are designing a new project. So for example, you can actually
turn everything into a wireframe. So you can make everything look as if it
was, kinda like a rough wireframe mockup. And that’s extremely useful if what you want
to do for a specific project is really just focus on the information hierarchy and not focus
so much on the visuals, the colors, and so on. You can turn on Wireframe Mode, do all the tweaks
you want, and then turn it back, turn it off again once you’re ready to go into colors, the
imagery, and the illustrations of your project. But something that a lot of people find
extremely cool to start from is Scan Screenshot. So we’re building something related to music here, so let’s go ahead and go find what
I am biased to believe is the best music streaming platform out there but don’t
trust my word, this is really just my opinion. I can take a screenshot of the
Spotify app here for example and I can tell Uizard: Hey, I wanna
make a new screen from this screenshot. So you can either start
from: Magic > Scan Screenshot or here: New Screen > Scan screen from Screenshot
It’s the same thing. And then here, you can actually just,
you know, upload your screenshot. And get started from that. So what this Scan Screenshot feature does is
basically, it will basically turn your image, your screenshot, your flat non-changeable image
into something you can fully customize and edit. So now we can see that it has
been turned into a design. So now I can actually just have access to all the
imagery and I can modify absolutely everything. So here, for example, once again, I can use
the Image Suggestor to just change the images. I can use the Text Assistant to change the copy. And that’s a really useful feature that
our customers love whenever they already have a product, they already have
a website, and all they want to do, is to see how would this look if we just move
the buttons, you know, on the other side of the screen. Or how would this look if we just change
the imagery or change the colors of the buttons. So instead of having to redesign that
page, you can just import the screenshot into Uizard and then basically get something
you can customize and edit in a few seconds. Which we think is pretty cool. And you can also do it, you know this is like a fairly small screenshot but you
can also do it for a full web page. So if I go onto the Uizard website
which is, you know, quite a long page. I could do the same thing. I could say: New Screen > From a Screenshot And then I can import a screenshot of the
entire web page, this long screenshot here. Import it into Uizard, go grab a cup of coffee,
and then when I get back to my work station, I basically have this entire
screenshot ready to customize, ready to edit, and ultimately
ready to share with my team. So we can actually just, you know, build that
next version or whatever we are trying to achieve. So we’ll wait a few seconds. Elevator music time. “A few moments later” And there we go! Now we have, as before with the Spotify
example, we have all the images, all the texts, that we can then, you
know, edit and change to our liking. And actually I’ll scroll down once we’ve
generated an alternative text here. There we go. You can tweak the sizing. Maybe I want this button to be blue. I can actually just go ahead
and copy and paste the style. Copy style, and paste it
here here to this new button. And… For example.
That’s, you know, a few tweaks I could do and it took
me, like, a few seconds to do this. And I can then go ahead and share
this with my team and it’s done. No need to just spend hours
re-designing everything from scratch and we got, as you can see, we got
basically the entire page laid out for us. So, that’s basically how you could start from
Autodesigner to create a few screens and then you can use all the magic features inside of
Uizard to customize things to your liking. Now, let’s do the same thing but we are
going to generate a mobile app instead. So let’s say we wanna generate a mobile app for delivering food in space to feed
astronauts in the space station and Mars base. Assuming we already have a Mars
base, which would be pretty cool. And then the style would be
minimalistic, clean, futuristic, hmm. Yeah, I guess that’ll do. As before, I click the “generate my project”
button and I get, I can go get a glass of water, and listen to some more elevator music… “A few moments later” Alright! So we got our mobile app for
delivering food in space being generated. So let’s see what came out of this. Space food! So we’ve got illustrations being generated for us. We got some imagery taken
from, like, a photo database. “Astro Grill”, that’s a cool name… “Space Pancakes”, I like it! Our app is basically called “Space food”. And as before with our website example, I can go ahead and modify absolutely everything
with all the existing features in Uizard. And as before, if I go in the Preview
mode, I’ll basically be able to interact with a mock flow of this app as if
was, you know, implemented for real. Even though, it’s like, you know,
it’s a fake mockup, it’s a prototype. And of course, I can change
this flow completely, right? So, to change the flow, it’s pretty easy. You can actually just click on any button, find
the little bolt and then just change [the link] It’s actually a bad example because
I am linking it to the same screen But for example, the “Order now”
[button], if for some reasons we want the “Order now” [button] to link
to this screen, then we can do this. And then I can just say, right click on my
screen, and say: “This is my home screen”. And so you’ll see when I click the
“Order now” [button] in Preview now, I will go to the home screen. So yeah, that’s what you can do if you
wanna create an interaction flow in Uizard. And you can of course, once you’ve selected
a component that has an interaction, you can also change the type. You can link to…
you can make this link to a link on the internet. You can also go to another screen as I
showed and, you know, set up the animation. I want, like, slide left, for example. And I want it fast. And then you can just hit Preview
again, and see how that looks. Now, I would like to show you
some other cool features that are making design a breeze inside of Uizard. So as before, you can always go
turn Wireframe Mode. And by the way, actually, Wireframe Mode also
works when you’re in Preview. If you set things into Wireframe
Mode and you go in Preview, it will be previewed in Wireframe Mode. So this is really helpful if you wanna do some
testing a group of users that you know should only focus on the information hierarchy, the structure
of the content, and then you can move back to, out of Wireframe Mode when you wanna
test the full design with some folks. And before I go further, in the Share button
here, you can invite your team or share online. You can actually even embed this on a
web page. And anybody you invite here to collaborate inside of Uizard will be able to
work with you in real-time inside of the editor. So this is not meant to be a solo designer
work. You can always invite your team, whether it’s like, the PM, a
developer, the actual design team, you know, anyone, your client,
and collaborate here together. So now, we’ve made a pretty compelling, rough
prototype mockup of our Space food delivery app. Hmm. Delivery time. 45 minutes delivery to
the Space Station, that would be amazing! I don’t know what kind of technology
is used for transport here but I think Elon Musk would probably want to
purchase this startup for SpaceX. “Yes” Anyway! Moving on to another magical cool feature
is what we like to call “Smart Themes”. So you’ve created this design.
But let’s say you’re like: “Okay this is pretty cool but I wanna
just make the style a bit different” And you can do this
semi-automatically with Uizard. So let’s go find a source
of inspiration on Dribbble. Food delivery app. Hmm. There is a lot to choose from
here. This one is pretty cool! You can actually go ahead and
take a screenshot of this. And then inside of Uizard, you can say: “I
wanna create a Smart Theme from an image”. And then you can actually basically just
drag and drop that image, that screenshot. And then here, we’ll have some AI go
re-design your project to match this image. So in just a few seconds, you’ve
seen that we’ve been basically entirely transformed the style, and
aesthetic, and theme of our app. It took us, like, no time. And so, that’s pretty handy if you are to
design something in Uizard, you started from Autodesigner, and maybe the style was not
quite what you thought of, and you could say: “You know what? I could like this to look
more like the product we shipped last quarter, so you take a picture, sorry a screenshot,
of your product or any source of inspiration, put it in there, and then the style is
basically being extracted and applied. By the way, this feature is, full disclosure,
gonna get a lot of improvements in the next few months so you should expect
to see this improve even further. And if we go back inside of
the Magic tab, hmm, you know, you can also, there’s something else I haven’t
shown yet, shown you yet is the Attention Heatmap. And that’s basically enabling you, as
the designer, to get some feedback on whether or not people are gonna see
your CTA, your buttons, your text. So whenever you hit the Attention Heatmap
button, Uizard is basically using AI to predict where in the screen are people, the viewer,
going to focus their attention the most. So for example, we can see that the title, Space Food, is getting a ton of attention
compared to some of the other elements. And that’s pretty handy because you can get some feedback even before showing this to a
real human being on, you know, whether the button here should be bigger, whether it
should be different and so on and so forth. So let’s just go ahead and take
another button, for example here. And we’re gonna, you know, maybe change this
one. We’re gonna say that this is the button for placing an order. And we’re gonna reduce the illustration [size]
a bit because it’s taking a lot of space. Actually we’re gonna replace it. Let’s
just do some more drastic changes. Hmm. I am not sure this is supposed to
be a fish, I am pretty sure this was supposed to be a rocket ship. Let’s just take this one. Alright, we got a rocket ship. Hmm. And then we can just hit the button again and
see whether this changed the Attention Heatmap. And of course, it did. So now, you can see that the
button that we have placed here has a lot more attention than the
one that was there in the first place. And you can also see that because we changed the
illustration to something a bit more, hmm, calm, like you know, simple, this title here is also
getting more attention than it was getting before. So you get, you know, this feedback, before even showing this to your team,
before showing this to your colleagues. So you can improve your design, you know,
on your own, at least to some extent. So this is what the heatmap feature does. We’ve seen the rest.
We’ve seen Autodesigner. I’ve showed you how to use the
Interact Mode, Preview Mode. How you would also go ahead
and share this with your team. So hopefully this gives you a pretty good overview
of what Autodesigner do and how you can use the rest of Uizard to customize and edit your work
to basically turn your ideas into reality. So thanks for watching! If you haven’t signed up to the
Autodesigner list just yet, you can go ahead and do this now at uizard.io/autodesigner/
but if you did already sign up to the wait list, you should expect to get your invitation
to try out Autodesigner either today or in the next few weeks so check out
your mail box from time to time. Thank you for watching and happy designing!
