Crazy New AI to UI Design Features | Uizard's Autodesigner Update 👀

so there have been some exciting new developments in Wizard's AI tool and I got to show you we're going to use Auto designer to generate something with the text prompt and I'm just going to do maybe like a moving service and we're going to describe the design style we're going to pick some keywords I'm just going to leave in what they have here and then choose a couple of these tags generate my project so here we are and wizard has magically designed all of these screens for us in this flow so one of the drawbacks to Wizard's tool was that you couldn't really add on additional individual screens once it was finished but wizard has added a lot of improvements here to help make that faster and one of them is this little dock that sits at the bottom that says how can I help you this is your little magic auto designer wizard helper so we're going to click on that and you will be able to generate screens either from a prompt or from a screenshot that you upload so we're going to use prompt here and I want to see what the profile file of let's say John's moving company will look like and so I'm just going to describe that here and then hit generate and one tip is to make sure that you've selected the type of device that you're going to use so that you don't accidentally generate a Mobile screen when you mean to generate a screen for web so this little window comes up now and it actually gives you a few different variations of this screen that you can choose from so I'm just scrolling through these and seeing what I like and this one looks pretty good so I'm going to click on it or you can just grab the handle and drag it right into your canvas and there it is there is this screen now that has been added to this flow and it picks up from right where it left off um the same look the same feel the same information you'll see some issues here like for instance the text doesn't quite fit so we're going to select that and then click on design and now we can change the text size pretty easily so this is much more of an element component based editor so when you click on an element then then the context menu is going to show things that are relevant to that specific uh component or item on your screen so it's very contextual and it makes it very easy to make updates to these things quickly that's something I really like about it another awesome feature is that you can now generate images and illustrations and drawings so if we click on our little magic widget again we can select this dropdown and now choose generate images and this will give you some more options as well you can choose a photo an illustration a 3D model a pattern a handdrawn sketch or a watercolor picture so I want to get an image of a moving truck and I've selected the handdrawn and it's given me some sketches and one of them looks really similar to the one that we have here so let's use that one and we're going to select it and then you can also hit try again to regenerate some more options if you'd like and one thing I particularly love is this little note here that that says to be mindful of the language that you use to describe these images um and not to use anything offensive or inappropriate because the AI won't generate that I really appreciate those safety parameters put around this option and I think that's something that we need to be considering a lot more as we are integrating these AI type features and generations into our workflow so I'm just adding this image right in here and replacing the one that we had now I can use these quick contextual configurations options to change little things about this round the corners add a shadow Etc so another way to change images here is you can just select one and then click on suggest and that's going to swap out the image for something similar this is actually one of my favorite updates and it's the ability to generate new themes for this so you can see that this is all in kind of a brutalist style well I want to change that entire look so I'm going to use a text prompt to say that I want a modern minimal clean rounded Corners soft Shadows that sort of thing and I'm also saying that I want it to be blue and then bam I've just changed the entire color scheme and the look and even the shapes of the buttons and the corners and shadows and everything and I can flip back and forth to view the original and the generated so I'm going to apply that theme to all of these screens and this always feels like magic to me when it updates across everything so there are a few little issues here you'll see this illustration isn't cut out properly some of the white in the background is still showing through so I might regenerate this image this is pretty cool and then just like that that's fixed so if you remember that button from earlier that doesn't quite fit here again if you click on it you can easily adjust this by changing the size and you get some default button sizes extra small small medium and large so I'm going to use the extra small one here and you'll see it just resizes perfectly to fit that space same thing with this one there some inconsistencies with button size so I'm going to change that to large and then just click it into place and so again we can just click on little elements we can change the Border radius do all of the things that we need to make that element look the way we want it to there's another great feature here for Icon so if you select an icon it will show you this icon contextual menu and you can select or search and we're just going to drop in a new icon there very easily another very awesome feature that has been requested a lot is just the ability to export these elements as svgs so now you can select them select export as SVG and now you'll be able to use that the other neat thing that you can do here is create a template so if you want to reuse some of these Design Elements components or just the screens themselves and then go to templates my templates and then you'll see it there and you can just drag it onto your canvas and again if you just need some icons or other graphic elements check the sidebar on the left you can can click on icon search through a bunch of different styles now when you are getting ready to design and hand this off to developers there is a great new handoff feature that lets you inspect and copy the code of these components so I can click on anything here I can view the code and then I can click on other things and easily see what that looks like in code and then um we can copy that use that for our components or use it as a reference for the attributes that this particular element has and I know some of you see these videos and you worry that this is going to replace UI and ux designers or you might be feeling like why bother get into this field right now well let me tell you that in my experience I've seen things like this come and go for 15 years and usually it's people that figure out how to utilize the tools to their best of their ability and then double down on the other things that really matter those are the designers that actually ride these waves into really big opportunities because the real work that we're doing as uxui designers isn't just about putting screens together it's really understanding how do our users behave and does this make sense to them and then actually deploying these things to solve a problem for them and the business strategy behind that and what this lets us do is communicate visually to the other people we're working with much faster because we can come up with an idea and prototype it very quickly and this helps us make decisions and move in a direction and we don't have to spend all that time deep diving into every little pixel but that is something that you're going to need to do really important that you understand the fundamentals and the foundations Behind These design choices because you can't improve them or make better ones or get those screens production ready if you don't know those things and my course for example is just one way that you can learn those so if you're interested in that and other lessons these then definitely check that out and if you want to try out wizard for yourself don't forget to use our discount Linked In the description below

Channel: DesignerUp

Views: 3,601

Keywords: UI/UX design, UI design, UI design tips, UI design tutorial, UX/UI, Product Design, UX Designer, Product Designer, Designerup, ai design, ai design tutorial, uizard, uizard tutorial, uizard review, uizard ai, uizard tutorial for beginners, chatgpt, text prompt to design, ai for designers, ai for ui/ux design, ai for ui, ai for ui design, Autodesigner, UIzard Autodesigner, Autodesigner invite, Autodesigner tutorial

Id: YGwyINbegIY

Length: 8min 15sec (495 seconds)

Published: Tue Oct 17 2023