AI Inspired Web Design Tutorial | Chat GPT Website Design

AI technology can assist designers by automating tasks providing inspiration and Analysis it is not a replacement for human creativity and expertise but rather a helpful tool to enhance work and improve our efficiency embracing AI as a design assistant is definitely the way forward as it will only continue to improve and enhance our design processes [Music] so what exactly are we going to cover in this video well we're going to take a look at using a range of different AI tools to assist us in the whole design prototyping stage now this isn't something I would recommend that you use as a one and done finished this is something to get your inspiration from to provide design ideas to clients those kinds of things so we're going to be using a range of different tools to start off with we want to create a hero section and that's what this video is all about we want this to be for some pretty cool new trainers or sneakers if you're in the us and we just don't have any artwork or any images or any kind of content so let's use AI to generate all of that so first of the mat we're going to be using mid Journey now you probably have heard of before you may have even dabbled with it but is it any good can you use it for the way you want yes you can with some caveats and we'll take a look at those caveats as we go through but as you can see I've already gone ahead generated a few different examples for various different things some of these are good some of these are pretty strange now if you've never used journey and you'd like me to do a dedicated video on how to use it how to get started and how to do some more creative things with it let me know in the comment section down below and I'll take a look at creating something if enough people are interested this is my kind of gallery Let's ignore that let's go over into the Discord server which is where you actually start working with mid-journey and let's get this to start created some design ideas for us now we can get as creative as we want we can actually get this to start creating designs for full web pages for this example I want to keep it really simple I just want the image of this trainer or sneaker so we need to do is use the Imagine prompt so we're going to put that in we'll press space and you can see now it tells us what prompt do we want to use now the prompt is basically the terms the terminology we want to use to create the actual design or at least get the ball rolling so for this example I'm going to use wallpaper because I want this to be a wallpaper without any additional sort of image bits and pieces that we don't actually need and that's what I'm going to do is going to kind of create a more simple end result we want this to be sneakers right background and we're going to tell this we wanted to use the version 4 of the actual prompt itself to do that we just put in dash dash V Space four so this is where we're starting off with so now if we hit the return or enter that's now going to go ahead and start working on that in the background this can take anywhere from a few moments up to a few minutes depending upon how busy the server is whether using a free account or paid account those kinds of things if you want me to cover this in more detail including how to set up your own server in mid-journey let me know down below and I'll take a look at creating that video for you but as you can see after a few moments we start to get some ideas and as you can see we've got a range of different kinds of shoes we've got these sort of like cons kind of thing Nike trainers and so on we got these kind of paint splashes all looking pretty cool now let's just say I like that but I want to go a bit further I want to change this a little bit let's copy that prompt let's do the Imagine one more time we'll paste our prompt in we'll remove sneakers and we'll put running shoes in kind of keeping more in keeping with the kind of vibe that I want so again let's just hit the enter return let that go ahead now and start to take a look at customizing the artwork and creating something for us there we go after a few more minutes you can see we now get some slightly different variations we've got more in the running shoe kind of in now you can see we've got four examples and if we like one of these the idea of it we can kind of take it one step further you can see we have this U1 through u4 and V1 through V4 all this basically means is these are upscaling so in other words it'll take the ideas we have in one two three and four and upscale whichever one or ones we want the one underneath will actually create variations of version one two three or four so in this example I might say that I actually quite like the look of the first one so we could say we want to do upscale that and also while we're at it let's go ahead and say we want to get a couple of variations on it we'll click submit and if you want to you can go in and you can add extra things inside you so let's say for example we want to put in paint splashes I'll put some colors in and again let's go ahead and hit submit on there and now that's going to create some variations including the extra information that we've added into our imagine prompt and again after a few more minutes we now start to have some variations upon what we covered you can see the first one shows us where we've added in extra colors and the paint splashes and so on so if you have brand colors this is a good way of introducing those into the overall design that's being created using mid-journey if you like one of those we can go ahead and we can upscale that or we can take a look at the one we chose to upscale we click on it you can see that now gives us the upscaled version we can click on open original and we'll see the full size version of that in all of its graphical Glory so now what I can do is I can go ahead and save any of the images that I want to use so I'm going to do is necessarily just grab the image and we're going to drop that into my Eagle account so we're going to choose my folder I'm going to drop this into mid-journey images okay so now we have a couple of AI generated images you can see this one I've sort of set up and was working with previously and the one we've just created so that's how we start going about creating these kinds of images next up we want to start create the design and we want some content to put into it so first of all let's go over into figma and test take a look at actually using some of these images let's create a new design inside figma so we're going to go ahead and we're going to set this to be a desktop 40 and 40 is perfectly fine for now obviously we need to get the images inside you for ease I'm just going to Simply drag the image out of Eagle we'll drop that into a design there's our starting point let's go ahead and resize this a little it's too big at the moment that looks pretty cool and all we can do is we can go ahead and we can set a background we want to make sure that everything is in keeping with this the same kind of color scheme and so on so we're going to do is going to just select the rectangle shape we'll drag a rectangle into a design and resize it making sure it's the same size as our hero image and we'll just drop that underneath okay so you can see there's a difference in color so all we need to do is make sure we've got our rectangle selected choose the fill color use the eyedropper and we can just sample the color from the image we have created and there you go we now have our basic hero image setup at the Top If you're new to we can double click on this and we can choose to crop this just to get rid of any excess that we might not need the same kind of thing goes for any space underneath and so on and because you've got the background of our kind of block you set the same color everything is going to tie in nicely so we can position that we want let's have a click to close out of it and we've now got our kind of hero image in there but obviously we need to have some kind of real interesting call to action information and a strap line and so on so how can we use the AI to get that well we're going to use chat GPT because that's pretty amazing now chat GPT has kind of taken the Internet by storm right now and the beautiful thing about this is it's incredibly good and source of free so go ahead and sign up for an account log in do all the kinds of things you need to do just go ahead now and ask her to write out what we want so let's start off with create a hero section so we want this to kind of create that call to action the hero section and so on and as you can see it's done just that step up your game with the new Nike sneakers call to action shop now and get ready to dominate the chords if that has no relevance at all one of the nice things about chat GPT is this is a conversational AI based tool so we can just tell it the two things we want so we can just say rewrite the hero title okay so you can see it comes up with another variation and let's just say we want to come up with even more we can just say right five variations so now we're going to get five different variations on that theme for our hero section you can kind of see where this goes we can have a conversation with this and we can refine what it actually gives us and again we can ask for more variations so we can be more specifics for example we want to have a maximum of six words now it isn't always perfect but probably eight times out of ten it'll come back with a good example of what we're asking for so we can see we can go through it we can choose what we want so let's just say we write this power through your runs with Nike let's just copy that from there we can now head back over into figma and we can go ahead we can choose the type tool we can just click inside we'll drop in our new hero section title we'll change the typography and size and so on let's tighten the spacing up a little bit there we go now we can go back into chat GPT and you can see we've got our call to action so short grab and get ready to dominate the chords let's just ask it to rewrite or give us variations one of the nice things about Chad GPT is that when you're in a conversation it kind of keeps track of what you're talking about the tone of voice you may ask and things like that so the entire conversation has a kind of Common Thread going through it which is incredibly useful if you ask it doing a fun light-hearted way all the kind of responses are going to keep with that town of voice one of the things I really like about it as you can see now we've got more so get ready to crush your workouts with Nike upgrade your Footwear game today so let's just say we want to create more variations but we want to focus more on running and jogging as opposed to being quite generic and there we go you can see we've now got a range of different variations I like this last one so we're going to grab that from there head back over into figma we'll simply go ahead we'll just duplicate this so we don't worry about too much about fonts and so on we can just change this make it a little bit smaller and we'll just go ahead and put our text inside there adjust the line space maybe go a little larger there you go so kind of getting somewhere now we've got something's a bit more in keeping with the actual topic that we're talking about so the final thing we're going to do is go ahead and we'll just do a call to action button so let's just create a standard rectangle we'll adjust the size of this a little bit to make a button around those Corners off and we're going to do we want to grab one of the colors from here to make sure that it kind of retains that continuity of design now we could go with this teal color or this orange color whatever we want let's just test it out let's go to the fill let's grab the eyedropper tool and let's start off with one of these more sort of vibrant oranges how does that look it actually looks pretty good but let's try the teal anyway let's go ahead and select this and find one there's colors actually I quite like the look of that so once you've done that we can now go ahead and drop in the text that we want to use so again let's just simply copy this drop it down there adjust the actual position of this and we'll just change this shop now let's just quickly resize let's change our limit to centered and let's just fine tune that and we'll make it just a little bit bigger so a call to action stands out or maybe even a little heavier there we go looks pretty good okay let's just make sure that everything is nice and neatly aligned let's group the button together let's go ahead and select all of these and we can just make sure that everything is aligned to the left and we're going to come into a spacing just ask you to tidy up and there we go so that now Tides everything up if you want to we can still refine this to get what we want so now we've created our kind of hero section now let's go ahead and just create some kind of logo or brand name so for this we can come over to brandmark now this is less about the sort of AI this is more sort of just generating things but you could kind of say it's semi AI let's go into the options for creating my logo what we're going to do is going to give this a name first of all I'm going to call this sneaker heads just but because I've got the next section and you can see this allows us to give it some brand kind of keywords words we want to use to encapsulate what it looks like okay let's click to the next section we can choose some basic color styles now you can change all of this once you're inside the brand Mark kind of editor so don't worry too much about it let's go for something like simple and click next this is now going to go ahead and create some starting point logos for us and we can then start to refine these to get what we want so you can see once we've kind of set everything up you can go through and you can find out what actually works for you now you see that using icons in a lot of these you can change every single aspect this the colors the icons the typography the spacing all those things so use this as a kind of starting point to get an idea to spark the inspiration now I quite like the look of the typography here so I can select this and I can scroll down like to see some examples of what this would look like across various different things including the brand colors and so on let's close that down though let's come in to choose edit once we're inside Geo we can edit the name the slogan the icon the background and the layout so if you wanted to change the text we want to change the wording anything like that we can do that inside here we can choose different fonts you can also come in and you can filter these down to modern classic playful and so on until you find something you really like I quite like the look of what we've already got so I'm going to stick with that so close that down if you want to add a slogan in you could add that in so for example the ultimate running shoe collection and then if I want to I can adjust the font size letter spacing you kind of line space as well it's going to tighten things up you could do that so for example that actually looks pretty cool I could come into the icons I can edit the color of this if I want to choose from you know any brand colors they may have or just choose something I think looks pretty cool if I want I can browse the icons and I can come up and again we've got letter simple modern and illustration so let's come to illustration for example and let's just try sneakers that might be a little bit too Americanized might not pick anything up actually it does so you can see you've got these hand-drawn illustrations of different kind of sneakers trainers daps whatever you want to kind of call them so you can find something you think actually looks pretty cool like this one for example select it updated now adds it into our design for this example though I'm kind of happy not to have an icon so we can say remove the icon and just have the text if we jump over the background you can see we can choose to have no background at all we can choose containers so you want to have different containers to place this inside you could do that looks a bit naff in this example but you know you can do it if you wanted to we'll just remove that set that to none and keep with sneak ahead and if you're going to layout you can adjust the layout of this if you're using icons for example you can choose the position of the icon but obviously we're not using that so once you've done that what you can do is you can hop back over into your figma select your background rectangle select your color from there so just copy that color over we'll re-lock this so we don't move things around come back into your brand marked logo go back into the background section and you can come into the background color we can paste that inside there click on Save and that now applies that background now first of all before you even further I do not Advocate you just basically steal the logos from here if you choose a logo and your customer your client goes I like the look of that then pay for it it's not expensive if you just want the simple logo it's something like 15 if you want the scalable with SVG and all those kinds of things it's like 60 bucks it's nothing expensive you can factor that into the overall pricing work in the client this gives you a starting point so now what I can do is I can just grab this from the screen you can see now that's allowed me to sort of save that so I'll save that to the desktop for me or I can go ahead and I can save this where I want and now we can do is we can pull this into our figma design to start to create a more fully featured design with our logo and branding so let's go and do that let's add an image in we'll grab our sneaker heads logo I will position that into our design that's one thing I find when you do it this way because obviously you are just screen grabbing there's a little variation of color but it's not enough to worry about to kind of put things off and now we can do is we can go ahead and we can just drop in some navigation over on the right hand side and our design is pretty much done let's resize this a little bit let's set that to be 16 and we'll set this to be semi bold so it stands out a little bit and then we can do is we can roughly position this where we want Center it up kind of thing with the logo and we can duplicate that a couple of times by just simply holding the shift or ALT key down on PC and we can just change these so we say shop now store locator and contact let's just select those let's just use the option at the top to tidy up and there's our hero section all pretty much done other than the design side of things using AI tools now this is just scratching the surface of what you could achieve by using these tools for inspiration now like I say at the top of the video I don't recommend you do this to be this is the one and done kind of thing but this is a really solid starting point to allow you to get creative using images that don't currently exist AI to create those if you have a lack of inspiration or you want to create something that's in keeping with the audience or the client that you're going to be working with this is much better than using that boring lore of ipsum content this is something specific and they can kind of get a feel for exactly what you're doing but I've just really shown you just some of the basics of what you can do with these tools again if you'd like more detailed content on any of the tools that I've used from figma right the way through to Mid journey and everything in between let me know in the comments section down below if I'm going to pass the question over to you what do you think of AI using it as a designer system in the same way that we've kind of covered in this video I would love to know let me know drop the comments down in the comment section below as always a minus Paul C this is WP turton until next time take care [Music]

Channel: WPTuts

Views: 43,202

Keywords: WPTuts, Web Design with AI, artificial intelligence, AI design, AI design assistant, ai inspired web design tutorial, ai inspired web design, ai web design, ai web design design, chat gpt, web design, web design trends

Id: qHbrV1SJv0k

Length: 18min 2sec (1082 seconds)

Published: Wed Dec 28 2022