UI/UX Design Made Easy: Using AI Art, Midjourney and ChatGPT

I'm sure by now you've seen many beautiful web designs generated by AI tools like me Journey so in today's video I'm gonna show you how I use me journey and chat GPT to design a hero section for a travel agency website if you haven't used meat Journey before you need to go to meet journey.com and join the beta now you need to accept the invitation and you will be redirected to Discord where you can start using the mid Journey bot to generate designs and images once you accept the terms and conditions you can head over to one of these newbie channels and here is where you should type your prompts you should start by typing slash imagine and then asking what you're looking for the more detail you can include the better because the more context me Journey has the better designs it can generate so here I'm gonna type a beautiful website for a travel agency UI ux design minimal orange yellow and website it usually takes a few seconds for me journey to generate a few designs for us but keep in mind that we are currently in the ideation process so don't expect it to create a design ready to be implemented it's not there yet so here we've got four different designs they look really good but there are many things to be fixed as you can see the texts are too tiny and we might run into some accessibility issues but the layout and color usage look great so the way I use me journey to accelerate my design process is to get a few ideas regarding the composition of my project color usage and visuals because obviously we cannot use any of these designs at the moment so I'm going to save this image and add it to my mood board now I'm gonna generate a few visuals for my project and this is where you see the true power of me journey and the way it can really help you as a UI designer I'm going to look for a 3D isometric illustration of an island here I'm gonna type slash imagine beautiful 3D illustration of an island with a peach yellow orange V4 which means we want to use the fourth version of meat Journey alright look what we've got they look amazing don't they I really like this one so to get the highest quality image I'm gonna upscale it to do that you just need to click on this U button now that we have the visual let's start designing our hero section I'm going to create a desktop frame in figma and I'm going to add a 12 column layout grid to this Frame now let's bring the illustration here I'm going to place it on the right side like this and on the left side I'm gonna place the tidal description and a search card but before we do that let's change the background color to match the illustrations background color sometimes you might need to refine the illustration to get rid of these edges you can use Adobe Photoshop for that or you can just get rid of the illustrations background using the icons 8 background remover login okay next I'm gonna quickly create a navbar with a few links and buttons don't worry about the color usage yet we will get back to it later before we continue I'd like to take a moment and introduce the sponsor of today's video insa WP if you're a WordPress user you know that making changes to a WordPress site without testing them out can lead to a disaster that's why before making changes live on your site you should create a staging site first it's basically a copy of your live site that's set in a private environment allowing you to test out plugins insta WP is an ultimate Time Saver and easily the best solution for creating a portable staging environment you can try it for free using the link in the description thank you insta WP for sponsoring this video alright what else do we need for our hero section yes you are right we need copies for the title and description that's where chat GPT comes into play here I'm gonna tie type give me the headline and description for a travel agency website there it is if the description is too long you can type I need a shorter version of this description and it will shorten it for you alright let's copy and paste them here next I'll design a search card with two inputs the destination and the departure date and also a search button okay now let's change our elements color I'm gonna use the eyedropper to pick one color from the illustration and adjust it to fit my needs this one looks good I need a darker version of it for my text and a saturated one to use as my accent color now let's apply the colors to our text and buttons and there we go our hero section is ready so what do you think about AI is it going to replace UI ux designers anytime soon or not let me know in the comment section down below if you want to know how to become a great UI designer make sure to check out this video and as usual if you found this video helpful don't forget to hit the like button and subscribe to my channel for more UI ux design tutorials have a great day and see you next time

Channel: DesignWithArash

Views: 20,502

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, midjourney, chatgpt

Id: NH0AYyLoRuE

Length: 5min 8sec (308 seconds)

Published: Tue Feb 07 2023