How to Use Midjourney, AI Art and ChatGPT to Create an Amazing Website Design

now are you one of those designers that's really struggling with coming with creative ideas finding images color palettes and so on well today we're going to take a look at how we can recreate a design like this in the hero image of a website using some AI tools some color palette generating tools and a healthy little dose of skills and knowledge so if you're ready let's just jump in and start creating so first of all let's go ahead and create a new frame for our design so we're going to press F on the keyboard inside figma and we're going to come over and choose the desktop option and there's our starting point we'll rename this we'll call this hero design so now we have the dreaded blank sheet to look at and think what do we go and create well let's start off with jumping over into mid journey and seeing if we can create some interesting looking images that we can start off with now we're going to be using a fictitious skiing company so we want to have something encapsulates that we want to have some nice mountain ranges with some snow and just kind of really entice people so let's just jump over into mid Journey as you can see I've already been experimenting with a bunch of different prompts and so on but we're going to start completely from scratch so let's go ahead and type in Imagine and what do we want well we want some snow-capped mountains no that kind of thing so let's try that we obviously want them to be epic we want to have dramatic lighting so the next thing you want to do is make sure we get this in a kind of portrait fashion unless squared just to give us a bit more real estate so we're going to do dash dash a r for aspect ratio and we're going to do three dash or three colon two four as three by two we're also going to do a dash dash I'm going to say V Space 4 for version four of mid journey and finally we're going to do dash dash q and we're going to put a 2 inside there for the quality of two so we're going to hit the enter or return key and let's see what mid Journey comes back with and if we need to start tweaking things to get a little bit more what we're looking for okay after a few moments this I was starting price let's open these up and take a quick look and they already look pretty epic you can see we've got some nice kind of dramatic lighting and if you like what we have here we can start off by using these but before we do let's just try a few other things let's say that we want it to be less photorealistic and more illustrative well let's go ahead and remix it so let's say we like the look of something like this second one we're gonna go for v2 for variation and we can do now is we can remix that prompt so let's just go and add a few other things in so let's just say illustration let's say cinematic now let's try that so let's submit that and see if we get any better results let me go after a little bit of time you can see we now start to get a little bit more dramatic I think in all honesty these are probably a little bit too dramatic so I would spend a little bit more time going through and finding the kind of results that I actually like now like I say I've already gone ahead and done quite a few different iterations using pretty much the same kind of prompts you've seen me using here so ultimately this is what we ended up with now I'll put the prompt on screen right now so if you want to copy this to get exactly the same starting point as me you're not going to get the same image but this is a good way to get started you can grab that and start to use it so all we need to do now is simply go ahead and save this to our computer so we're going to open this in our browser make sure you've got the full size version and I'm going to just drag this over into eagle and there we go we now have that inside Eagle now if we take a look at this you can see this isn't necessarily the biggest image this is 10 24 by 10 24 so it's probably a little bit too small so what I'm going to do is I'm going to use another tool that I like to use so open with I'm going to grab this with pixelmator Pro now you could do this with Photoshop you could do with this Affinity you could do it with lots of different tools but what I'm going to do is we want to supersize this so give us a little bit more resolution and a little bit more quality so all I need to do is come over to image and we're going to grab this super resolution option and select that and this is now going to kind of quadruple the size of this so if we zoom in if you take a look on the left hand side that's the before and as you can see if we sort of scroll over you can see we've got quite pixelated mountains and you can definitely see where the pixelation is if we take a look on the right hand side it looks pretty darn good and now we can go ahead save it and use it now I'm going to say this is a PNG to make sure I've got maximum quality so I'm going to export this and just save this to my desktop so let's just jump back into figma and let's go ahead and insert that image so we're just going to Simply grab the option to place video or image we'll go and grab that from our desktop and we'll pop that into our hero section now that already looks pretty cool but what I want to do is I want to kind of zoom in a little bit on this is a little bit too much detail over the right hand side so this is one of the reasons why supersizing can be incredibly useful so we're going to do is we're going to just position this a little bit better so now we've got our basic starting point of our hero image next let's make our life a little easier and let's go ahead and just apply some grids to this so we're going to come over we're going to add a layout grid We'll add it in there we'll select the options we'll come to grid and choose columns and we're going to set this to be 12 and we're going to set the margin to 150 each side and there we go now you can't really see that too well so I'm going to quickly change the color to this sort of yellowy color and drop the opacity just so we can see what we're doing okay so now we have a grid let's go ahead and lock the background so we don't accidentally move that around and we've now got our starting point for our hero section of our website so what we want to do next what we need to go ahead now and start adding in the various different components we want to put navigation and those kinds of things let's just go ahead and grab the type tool so just t on the keyboard and we're going to just click to add our first in and we're going to set this to be home now we're going to do is change our typography so for this I'm going to be using a Barlow and we're going to set this to be something like 16 and we're going to just change the weights a little bit to make this semi-bold that looks pretty good so that stands out quite nicely from the top section so let's just go ahead and duplicate that a couple of times there we go so we can just change the text once you've got that let's just grab all of these and let's tidy those up make sure they're all aligned perfectly and tidy up and there we go so we now have the top section so now we've got our kind of navigation set up let's just create some really simple kind of logo let's just grab the text we're going to see the option or alt click this drag it over and position it on the left hand side roughly towards the edge and let's just change the name of this now to what we want so we're going to call this Sky tours and we'll worry about colors and things in a moment so let's just go and set that to be a little bit heavier and let's go ahead and make it just a little bit bigger so I'm like 24 there we go so let's just position that and this is one of the things I love about using tools like figma just aligning things is super easy okay let's go ahead turn our grid off a second and let's see what we're working with now that stands out pretty well on the background but let's just say you wanted to give it a little bit more contrast what we could do is this is one of the little things I think is a nice little trick if you still want to have this kind of background image is to go ahead and create a rectangle drag that roughly over where you want it and we'll just position that underneath and we're going to do is we're going to set this to be in this example black we're going to apply a stroke to the bottom of this so we're just going to change this over to be the bottom and we're going to set this to be white or close to white as we want so now we have a kind of separator at the top obviously this looks way too harsh so what we can do is and what I would recommend doing is just to go ahead and adjust the opacity on this so we'll select it and we'll set our opacity we'll try some about 20 to start off with click outside so now it gives us a bit of Separation we're going to do exactly the same then for the underline at the bottom 20 for that try it and there we go so we now have a little bit more contrast between the background of our navigation and the actual backup of our image but it still allows that to kind of shine through so now we've got the navigation all set up on the logo and everything the next thing you want to do is create some form of color palette to use as part of our design now you may not be great at creating color palettes or you just may want to have a little bit of inspiration this is where this section is going to be invaluable to you what we're going to do is we're going to Simply create a starting point color so we're going to use the rectangle tool and we're just going to drag this outside our actual artboard don't worry where you do this or what it looks like anything we just simply want to use this for grabbing the color so we're selected we can now go ahead click the fill we use the eyedropper tool and we're going to grab a starting point color from within the photograph or the image we're using for our hero section you may not have a color palette supplied to but you want something that kind of complements the design aesthetic you're going for using these kinds of images so we're going to look for this kind of a mid light ish kind of blue color we're going to select that that now creates our starting point we can grab that hex value from this we can copy it so Ctrl or command C and we've now got a starting point color so now we can work with creating complementary colors creating analogous colors or any other kind of tools for our color palette but how do we go about doing it this is really simple let's head over into an option called Adobe color totally free and this allows us to create basic starting point color parts or total color palettes but there are other tools out there that do very similar thing like coolers.co and so on so anyways we're going to drop in that color that hexadecimal value as our starting point and hit the enter or return key now that puts the starting point color inside there and if we take a look on the left hand side we can now choose various different kinds of color combinations at the moment this is analogous we can choose monochromatic if we want to have a monochrome color palette we can choose Triad we can use complementary we can go through split complementary and we can go through until we find something that we kind of like the look of now this looks pretty good to start off with but it all looks a little bit dull because our starting point color was kind of mid I'll show you why in a moment let's change this over for the color mode from RGB or red green and blue into HSB which is Hue saturation and brightness so this is a great way of being take those colors and adjust the brightness the intensity of them and all those colors and shades whether we're using split complementary analogous or whatever we'll update accordingly let's bump the brightness up just so we can kind of intensify these colors as you can see as we go through it will adjust the color palette according to those kinds of values if you want to change this to something like Triad you can do the same thing inside here so we can keep on adjusting these values until we find something that complements exactly what you want and let's adjust it until we get something like this now I'm not too interested in these kind of Pinky Hues on the left hand side but I do like the contrast between the pale blue and the yellowy kind of color so now we can do is if we want to make those a bit more vibrant we can just by push up the saturation until we get a slightly more saturated version so now we've got a starting color palette that we can use so we can grab that color against we'll copy that jump back over into figma and we'll adjust this color as our starting point so that now brightens that up a little bit and we can do is we can do the same so we'll grab this and duplicate it so again option or alt drag come back over into Adobe color select the second color copy those values from there head back over select this and adjust that color and we've now got our two starting point colors so we've got some nice opposing colors we can use and they'll complement each other nicely in our design but another thing you may want to do is create shades of these colors various shading of the color so let's grab our first blue let's copy that value from there and what we're going to do is we're going to use a free plugin that we can run inside figma so coming up to the plugins option we'll select that we'll choose plugin from there and we'll do a search for foundation and we want the foundation color generator so we're going to select that we'll click run and this now opens up the options for creating our kind of Shades so what we want to do is double click change the color we're going to add this in there hit the enter return and there's our blue starting point color and you see there's normal and now we've got all these different shades of that same color what we can do now is we can create Styles which will create Styles inside the actual figma file itself so you can have these to reference at any point should you want to which when you're working on more comprehensive designs is a great way of going but what you can also do is just create a palette which is a visual version of this so you can click on that and there we go there's our palette so we can do is we can just move this to wherever we want inside our design so we'll grab that let's just cut it from there a second let's move over to our new design and we're going to paste that here so there's our blue shade now we can repeat exactly the same process for our yellows so what we've done now is we've created our color palettes and we can use those now at any point we want to we've got all the hexadecimal values you've got the name and conventions applied to it so if you do struggle with creating color palettes this is a really good way of being able to create them easily visually and just tweak to get something really cool so now we've done that let's go ahead and start using them first thing I want to do is change the sky to us and I want to have the word tours in our yellow color so let's go ahead and just highlight that so we can do now is just simply go to the fill click choose the eyedropper tool and click to add that and we've now added that color in and we've given more contrast so again let's go ahead and use that same kind of setup so we can do now is we can just come over we're going to create a really simple underline and we're going to underline the word home and we're going to set this to be three pixels high and again we're going to click on the stroke color choose our eyedropper choose our root normal color and there is our highlight so we're starting to create a nice harmonious kind of color palette the final thing I want to do at this point is I want this book now to be a button so I'm going to do is press the r for the rectangle tool and we're simply going to draw a rectangle behind this and again we're going to just set the background color it's like that will fill then we just reposition this where we wanted so there's our book Now button so we can tweak this to the way we want so again let's come in and choose the color for the text we're going to set that to be black let's select our background for our button and we're going to just slightly run these Corners we're going to just put a full pixel border or curve on there and we've now created the button so as you can see by using these kinds of tools we now have a very complementary color layout as part of our overall design so the next thing you want to do is go ahead and start using some more tools to create the call to action and those kinds of things just to kind of get a bit of interest in this area before we do it let's go ahead and put our grid back on okay so let's start working with chat GPT now so the first thing I want you to do is kind of create that strap line for the hero section so let's ask it to do just that now once you spot out the actual end result let's just say you don't actually like it or you just want to tweak it or refine it or just get some other suggestions this is where the whole point of a conversational tool like chat GPT makes the process easy so let's just say give me five more variations that will give us five different variations but let's say we also want to keep it shorter let's just say and make a short run length so let's go ahead now and ask chat gbt to go ahead give us five shorter variations of that first one and there we go after a few moments we now get some more variations so for this example I'm gonna just go ahead and grab the one I think looks the best so I'm going to grab this expert led to us just copy that let's head back over now into figma into our design press t on the keyboard to go type tool let's go ahead just paste that inside there so we've got our starting point and now we can just go ahead and make this bigger that looks pretty good to start off with let's just round that off and let's just bump that up a little bit semi ball is okay but let's make it extra bold there we go and we can also do is tighten the spacing up a little bit in between that's better actually let's go and make that just a little bit bigger and I see the beauty of design you kind of gotta tweak until you get exactly what you're happy with there's no right and wrong way of doing this kind of thing it is literally a case of tweaking until you get exactly what you want okay so there's our starting point we now have our kind of hero section started to take shape so the next thing I want to do is kind of have a little bit more of a call to action underneath so let's just go ahead option drag click this or alt right click this we'll just select it all we'll make it smaller let's try something like 36. uh let's go and make this a little lighter let's say let's try medium metallic that actually looks quite nice let's go and change this from Barlow to Barlow semi condenser it's a little bit tighter there we go so now let's handle back over into chat GPT and ask you to write a call to action and again you can see it starts to give us some examples now let's just say we want some more so another five variations on the same theme and again like you see you can see this is kind of retaining the understanding of what it is we're actually asking for this about this ski tours website there's the hero section and it kind of keeps everything in keeping with the overall kind of storyline that we're creating here and as you can see this gives us some slightly short variations so let's just ask it to do five more variations and make it a little longer and as you can see it starts to create longer called actions so I'm going to grab this second one I quite like the look of this so we're going to just grab that from there again we're going to copy this head back over into our design and just drop our strap line let's just tidy this up a little bit and we can fine tune and tweak the design as we kind of go through but you can see this is now starting to take shape nicely so the next thing I want is to create that kind of call to action button that tells people to do something based upon what all this text does Hero image is all about so like we've seen before let's go and grab the rectangle tool with the r key on the keyboard let's drag this out to a rough shape we're going to set this to be in this example eight on the corners just to make it a little bit bigger a little bit more rounded because it's more rounded on the corners and again we're going to stick to working with those same kind of color scheme so we'll grab the background color we'll select our eyedropper tool grab our color and we're already looking to create something that's quite harmonious quite in keeping color wise let's just grab this text so we can make our lives a little easier we'll position that where we want and we're going to change the text inside the book now now if I was doing this for real and a real project I'd start using some of the more advanced tools you can use inside figma things like Auto layer and so on but I want to show you more about the design than using figma so I'm not going to worry too much about that right now and I'm going to group these together so a button is kind of grouped let's actually make that a little bit smaller again that's twice something like 26 and make it just a little bit heavier try medium that looks pretty good now we're cooking with gas as they say okay so there's our hero section starting to take shape let's go into our background off okay so our hero section is now starting to take shape quite nicely but there's one thing I'm noticing and that is that our image itself is probably a little bit too overpowering and therefore we're kind of losing the impact of the text that we have on there so there's multiple different ways in which you could approach this you could put a background overlay sort of over the image itself or just behind the text to make it stand off but what I want to do is I want to make the background image just a little bit less imposing because it still retains that kind of nice sort of aesthetic but doesn't kind of buy for all of the attention so there's a couple of easy ways you could approach this the way I'm going to do it is I'm going to adjust the opacity of this image so before we do let's make sure that the background color for our actual artboard is set to Black and not any other color so we select our artboard just by clicking on on the left hand side you can see the fill is set to this blue color so let's just click on that and set that to be black now you're not going to see any change at this point because we can't see the background itself but once we've done that we've Now set the background to Black and if we go ahead and select our image and adjust the opacity on this let's try something like 80 percent you can see that just darkens down a little bit makes the text stand out but we don't lose the visual aesthetic of that background image pretty cool little way of doing things okay so now we've got this kind of laid out roughly the way we want let's select all three of these make sure they're all aligned perfectly and let's make sure that they tidy them up just to make sure that we've got the spacing consistent between them we are probably about three quarters of the way through the design side of things now I want to kind of have a section at the bottom that says what or gives reasons why you may want to use this particular company let's go ahead select our background color again let's put our grid back on and let's just use that as a starting point I'm going to come back to our overall design and we're just going to make this a little bit bigger we're going to drag it down a bit now the problem we're going to have here is it's quite busy underneath so it's an easy way of dealing with that we're going to use the rectangle tool again so r on the keyboard we're going to drag a rectangle roughly out across the bottom section and we're just going to set the background color for now to be black okay so you could leave it at this point if you're driving like a hard stop but I don't want that so I'm going to do is we're going to select this we're going to come over to our color palette and we're going to set this to be linear gradient and you see that now creates a gradient for us what we want to do is set the background to be transparent at the bottom to be black in this example or the dark color you want to use in the background of your design so select our bottom background color we're going to set that to be black so 100 black in this example let's grab our top color it doesn't matter what color we use here we're going to Simply grab the opacity and drop that down and now we can use this to adjust the overall gradient inside our design so I'm going to set something like this where it kind of falls off relatively quickly so let's go back to our hero design let's go and disable that and now you can see we get this nice kind of roll off between the overall background image this gives us space now to be able to use this to put content on and not have it fighting with the background let's go ahead lock that in place just to keep things nice and simple put our grid back on we're going to do is we're going to create a couple of lines and a little bit of text for each one of these so let's go and grab the line tool so grab that from the top we're going to simply draw a rough line holding the shift key down to constrain that side of things and if we zoom in we can see our line on there so we need to do is we're going to change our color for the stroke we're going to set that to be white and we're going to change the type of stroke that it is we're going to click on these three dots change it from solid we'll set it to be dashed so now you can see we get this kind of dashed line so now we've got our line in place I want to create a little sort of circle or dot at the top of this just to kind of draw your eye to it so to do that we've got these two little lines underneath our stroke let's choose the right hand one which is the end point I'm going to choose the circle arrow and you can see now we get this little circle point we're going to do is Select it one more time drop the opacity down to something like let's try 60 percent there you go this is a nice little trick I would recommend if you're using kind of any kind of things with design don't create a massive color palette inside your tools of choice for creating the design use opacity so you can see it white or a light gray whatever you want and then use opacity to make it lighter and therefore sort of hide in the background a little bit it's much easier than actually creating tons and tons of colors so with that being done let's go and grab this and we're going to duplicate this a couple of times so again we're going to hold that option key down and we're going to drag that over position that where we need it so it lines up and do the same again which I think is roughly there we need to take that one back over there there we go so now we have our three little lines if we want to we can select those lines make sure they're all perfectly lined up so we can just align them at the bottom there we go so now we've got the basic starting point there let's again go and turn our background grid off so you can see what we're working with we now have these projects you can see now why I put that gradient in there just gives a little bit of sort of balance and separation so next up we want to create some text so we'll t a text tool we're going to drag this out roughly where we want it so let's go and set these to be something like regular we'll change these to be something like let's say 18 and now we need to generate a little bit of content so let's head back over into into chat GPT and let's just ask it to give us some reasons why you may want to book with this kind of Tour company there we go write five benefits for using Sky tours as your for your ski and holidays and after a few moments you can see this starts to spit out some content for us now you probably want to spend a bit more time creating a little bit more sort of unique content but for me for this example this is going to be perfectly fine so we're going to grab our first little bit of content hop back over and simply paste that into our design get rid of anything we don't want like these bullet points the nice thing with this is it kind of gives you the sort of first word which we're going to make bold so let's go ahead and adjust that and say we want to make that semi-ball for this example and we're going to adjust the line spacing as well so let's just select all that adjust our line spacing there we go let's close that up a little bit let's zoom out probably looks a bit small to be honest so what I might do is just bump the size of this up a little bit let's try something like 22. that looks better okay so now we're just going to go ahead and ALT click drag to duplicate this a couple of times to flesh out our overall design and there we go so now we can just jump back over into chat GPT so if we take a look now we really are starting to take shape on how this all looks again what I'm going to do though is I'm going to use that same kind of principle of reducing the opacity on various different aspects of this so it doesn't just pull your attention every different direction so for this we're going to come over to our colors we're going to set this we're going to try something like 65 percent that looks better so you can see the information is still there but it's not just really trying to pull you straight towards it and what I might also do is go ahead and select our rectangle and lock that a little bit and just pull that up slightly and again go into the hero section take a look at where we are position wise and maybe bring that down a little bit to kind of just balance things out ever so slightly one of the things that I always say when it comes to designing is use the rules to start off with and then throw them out the window does it look good with the same spacing with these three sections no in my opinion it looks better where you've got the call to action button just a little bit further away from the sort of hero section text and the call to action text underneath it just looks a bit better in my opinion and the same thing goes for for these let's move them over a little bit because at the moment they look a little bit claustrophobic towards the edge of our lines and as you can see we now have a pretty good looking completed hero section all done inside figma using some free tools we've got our color palette so we can use some references in any way that we want to and we've got a really solid starting point that when we hand this off to a client to get their kind of feedback they've got something they can use to visualize what it's actually going to look like as an end result as opposed to just some generic photographs and some boring lorem ipsum text we have things that actually would probably mean something to them as in this example a kind of tour operator for ski and holidays now as always all the applicable links are in the description below and I would love to get your feedback do you like this kind of content would you like me to create more like this where we take a look at designing how we can use various different tools to create our designs let me know in the comment section down below as always my name is Paul C this is WP turtz and until next time take care thank you

Channel: WPTuts

Views: 17,701

Keywords: WPTuts, AI web design, AI-powered web design, AI design automation, AI web development, AI design software, AI-generated design, AI-assisted web design, AI design tools, AI web design trends, AI web design inspiration, AI design technology, AI design process, AI in web design, AI web design examples, figma, chatgpt, midjourney

Id: v2aX3oCuYes

Length: 29min 15sec (1755 seconds)

Published: Thu Jan 19 2023