Midjourney + ChatGPT For Web Design Tutorial

creating pretty images with AI tools is nice but can it actually help me do my real job client work well in this video I'm going to give this a try I'm going to generate a random client brief I'm going to try to solve this brief with actual design tools AI tools with mid-journey to create images and tragically to write text and help me come up with content for the website I don't know maybe I'm gonna fail I've never tried this before this is my first time trying this and I want to take you with me to the ride and show you how I experiment with these tools let's do this to get started I'm jumping into good brief i o to randomly generate a website brief for a random industry let's see what we are working with company name checkpoint we're a company that makes High Performance jet skis with emphasize on status our target audience is adult we want to consid convey a sense of Bravery at the same time being business-like you must create a website that will mainly show a list of the company product okay so maybe it's an e-commerce website for jet skis that sounds pretty pretty cool emphasis on status so it might be premium let's give this a try right so let's jump over to Discord where we're working with mid Journey so mid journey is an AI tool for creating images that works within Discord if you're not familiar with Discord it's basically a chat interface so I have to say it's not the optimal kind of user experience to work with but that's what we have right now and you can sign up on mid-journey for a free account that will give you a bunch of images to test this out before you have to pay them and here's how it works basically inside of this chat you basically write imagine and then you write a prompt so in this case I'm going to write maybe modern landing page for a jet ski for let's say premium premium jet ski jet ski company and then you're going to give it some more tags so in this case you want to say something like maybe website ux UI maybe even ux UI this way um and let's see what how that works so I'm going to hit return and see what comes up so mid journey is going to load and it's going to take a minute and then it's going to give us four options so let's see what comes up okay so a minute later mid-journey came back with four options and we can actually see them here now they look pretty pretty cool and now what we can do right now is either go ahead and create high resolution so these are basically sketches of different ideas so we can either pick one of them and upscale it to create a high resolution or we can try to create variation of it but what I want to do at this stage is to explore a lot of different concepts and a lot of different prompts because maybe I'm not sure if any of these are good some of these look cool like this one looks like a cool layout maybe I'll add I'll try to modify the prompt with other words like maybe blue color or maybe eCommerce and let's see what's going to come up so I'm going to copy this and try a different prompt okay so I have tried a few different prompts here I've tried adding e-commerce store I've also then noticed that a lot of them don't have a person on them so I've added the word men into it and then I got a few more options over here and then I tried replacing some words uh instead of blue I've changed it to vibrant I want to see a little bit of a different colors and then I got these options and to be honest the one that we have here actually does look like it fits the the brief because this color palette the blue and the yellow actually looks kind of like premium and when it comes into men who want status which is the brief for our company I think this is actually a very good starting point for where we are so how about we go head and we upscale this to see a higher version of this one so I'm going to go here this is option number one two three four so I'm going to upscale image number two and see what comes up okay so now that mid Journey has returned a high resolution image of this this is going to be helpful for me for two things number one there is a reference here for the layout so navigation at the top with this kind of like crossed yellow area for the logo here we can see where the headline needs to be and a call to action button and how this second section is going to be also with a yellow bar that fits the whole color scheme here um so number one is the layout great layout reference number two the image here is going to be fantastic for a hero image so let's start with taking copying the image and putting it in figma just for the reference for the layout but to actually clean this up so that we can use the actual image let's go ahead and open up Photoshop and clean up the image a little bit so I'm gonna go here I'm going to select this area here and I'm going to do content aware fill just to clean this up a little bit now it's probably not going to be perfect um yeah if if I'm going to do this for an actual project I'm probably going to be spending a little bit time on this to make sure that this looks great content aware fill and delete that delete these two little Parts here on a new layer on this one contact aware fill all right so now that we have the image we can go ahead and copy that so I'm going to do copy merged layers copy merged and I'm going to go ahead and paste it inside of figma so I basically I have the hero section here and actually you know what I can one thing that's also worth doing in Photoshop right is increasing the resolution right so this is currently 10 10 24 by 1024 but right now with the new Photoshop upscaling so we have filter neural gallery and we can go ahead and actually increase the resolution of this image so we can go here and do you know photo not photo this super zoom we can go here turn this up and then let's do two times the size I'm going to hit OK actually it's processing so in a second we'll have this image in double the resolution so to increase the resolution I'm going to merge all the layers that we have here here and then going to lay filter neural filters and I'm going to go into the super zoom that we have here turn that on and zoom it twice the size it's going to load and then we'll have the image in twice the resolution okay so now we have the image at twice the resolution it's 2048 and we can go ahead and copy that copy our hero image right into figma so I'm going to copy that head over to figma and paste that here you can see it's almost the right resolution I'm going to scale it up here okay so let's see what else we have here we have the navigation which obviously should be black so I'm going to go ahead and create this black thing here and let's talk about the logo so here we have kind of like a mark for where a black logo should be let's try to generate this logo or at least a reference for the logo with mid-journey as well so let's do what's the name of the company the name of the company is checkpoint all right so let's go here and write another prompt imagine imagine and do logo design for a jet ski company called checkpoint minimal me Mall let's do modern and uh yeah let's see what that gives us okay while that's loading let's go ahead and try to figure out what should we have here for the hero uh headline that we have here so let's go to chat GPT and said I need a few headline options options for a Hero section for a premium premium jet ski custom jet ski custom jet ski company all right let's see what gives us experience the thrill of custom jet skis elevate your water adventures with premium jet skis unless your inner Adventurer with a custom jet ski transform upgrade your ski game with custom designs alright let's go with Unleash Your Inner adventurers with custom jet skis that sounds pretty good so let's go here and put the headline right here in the middle and we can go ahead and make this bold and make this bigger and quite like it's right here so here it also showed us the type of font so it's kind of like a Sans serif font it's bold it's all uppercase let's try to mimic that here let's put this here in the center let's go ahead and make this font uppercase so we can see here uppercase um maybe make it a little bit bigger yep also put it a little here into the lower part so that it's more readable on the darker side of things unless your inner Adventure um with custom jet skis all right sounds good about here let's make this a little bit bigger actually let's make this the background black all right so we have this we know that we need probably a yellow button here that's going to be this one with something like let's Center this you know let's do here uh for this like oh sorry like see all models or something like this or buy now um let's turn this into 30 whoops 30. in Black okay so now we have this button here looks great we also have this other section and we'll use mid journey to create some more uh images for different different variations or models of the jet ski in a second so this one looks like it's white right and then half of it is going to be the image and also we're going to have this kind of like a yellow thing here with the same color that we have here which looks pretty good pretty solid let's see if we have any news on the logo alright so we got a few logo options here for the checkpoint logo actually I don't like I don't like any of them I think I'd like something that is more kind of like a word word Mark so let's try do something else let's do imagine and it's not really minimal what we're getting here right so I would do logo design and then I would do word Mark word mark let's see if I can also logo design word mark um minimal let's see what else can we say to make it even more minimal um to no icon I don't know how that would work let's try to write no icon let's see what will happen let's try another prompt here and in the meanwhile we have our navigation now what pages do we need on this website I'm not sure let's ask Chad GPT what web uh what pages should we have on the navigation of a jet ski uh jet ski company jet ski custom jet ski custom jet ski I guess it's an e-commerce Commerce shop let's see what chat GPT tells us here are some pages that you might consider in your navigation home page of course that's what we need what else shop this is a page where customer can browse all right about us page makes sense contact page makes sense anything else FAQ page perhaps and then blog if they have a Blog not sure we're going to go with a Blog but yeah let's give these a try so we have these let's turn this into something white and uh maybe we don't need this to be 30 here we can turn this into 18 and uh why can we see it because these ones should be here inside and this one should be here as well so we have home we have shop as we said what else we have contact contact we have FAQ and we have about us about us all right let's put them all here let's rearrange them that looks nice and then we need this space for the logo here and as we had in the reference uh where's my reference I deleted my reference so in my reference it's kind of like stylized this way so let's go ahead and do this let's take this and make it a little bit this way all right so now we have this looks pretty good okay let's see what we got here in the logos all right so these are actually better these okay so you see Small Change in the prompt gives you much better things so this looks good this also looks good I actually like this better because this is two I would say cliche show a jet ski for a jet ski company this is a little bit more um I would say abstract and I like that so let's go ahead and upscale this one is one two three let's upscale number three and see what comes up in the meanwhile I also want to generate these other options that we have here um so what do we need we need let's say that this is the first section what should the first section in this website be right so maybe it's an about us so let's have chat GPT write us the content here while mid-journey gives us this image so here let's do imagine I want yellow jet ski photo let's do a photo photo of a man riding men bravely bravely remember they said in the brief that it's bravery bravely writing yellow jet ski let's do in Sunset let's make this epic let's see what comes up here okay in the meanwhile uh write me an about section four the Jets for the jet ski company including including headline all right so welcome to company name your Premier destination for custom jet ski at company name we are passionate about water sports okay I could have told them that the company name is check mark but let's see let's use this so let's take this welcome to your Premier destination for custom jet skis let's use the font that we have here let's turn it into black probably something like 35 and a line left and then welcome to this the company is called check mark checkmar check checkpoint or check mark the checkpoint or check mark checkpoint all right there's actually a company called checkpoint but never mind that welcome to checkpoint your Premiere destination for custom jet skis and then here we can make this just a regular font not um no just like a sentence lowercase let's go ahead and take this and copy the paste the text here actually it can be much smaller so it can be something like 18 actually do uh none of that all right so we can have that at check mark checkpoint checkpoint let's do this this so now we have actually I don't need the third paragraph I'm just going to go with two paragraphs and then let's see if we've got some images here that we can use in this second section here okay actually we got some really really cool photos here I don't know why this person looks like a ninja but actually Let's do let's change this it's actually too dramatic here right so I'm gonna do imagine let's do not sunset let's do bright bright day Bright Day let's give this a try this was actually too dramatic but in the meanwhile we've got the logo here so I'm actually going to go ahead and try to copy that and turn this into a vector so I'm going to copy that I'm going to dump right into illustrator because illustrator has this really cool feature where you can go ahead and you can trace the image so I'm going to do that and now we basically have this whoops sorry we can expand that we now have this as uh an actual Vector shape so now I can go ahead and clean this up a little bit can go ahead and try to change that into black let's see if and these middle points that we have here let's let's see if we can yeah we need to go ahead to our Pathfinder and remove them or subtract them so let me see if I can go ahead and subtract them okay so we actually have that here and we have that here and actually I'm looking at it right now this logo looks like there's too many details here actually so maybe I'll remove this one and I'll remove the little dots here just so that we have like a little bit less things do we actually need this thing um yeah this one kind of looks like a mask type thing let's put the word check mark next to it checkpoint actually check point foreign and see how that looks like so going back into mid-journey we have a little bit of a slanted font here and it's a little bit technical right it's not completely Sans serif font let's jump right here and look to see if we have a font that's a little bit similar to what we have here let me scroll through this fast through the fonts that I have installed so the closest font that I have here is Dean alternate bold and I think it might look okay you know for the two minutes that we've invested in this so I can go ahead and copy all of this and bring that new Vector logo right here into figma and let's see nope not this one but actually this one let's see if I can copy and paste it all right we brought it here we can make it a little bit smaller and yeah it actually look not bad so we have the logo positioned right here and all we have left is bringing in the image that we have here I think the font here can be a little bit smaller as well yep all right so let's see the photos that we got with a bright day oh that looks much better so which one of these are we going to uh improve the quality of I actually like this one the best so let's go ahead and upscale image number four alright so here is the upscaled image looks pretty good actually pretty realistic I'm going to go ahead and copy that bring that here into figma and scale that here and actually crop it up a little bit just a little bit here and and yeah that's it okay so this is what we came up with after about 25 minutes of playing around with these tools mid-journey and chat GPT as you can see these tools can help you think faster and come up with ideas you still have to going to experiment with writing prompts and being creative about what you're looking to get but these tools can help you think and execute so much faster and I'm really excited about where things are going with this if you want to learn more about new AI tools make sure to check this video and I'll see you on the next one peace [Music] foreign [Music]

Channel: Flux Academy

Views: 158,432

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: 2KovcuYfBFQ

Length: 22min 18sec (1338 seconds)

Published: Fri Jan 13 2023