Midjourney + Figma Entire AI Website Process

all right what's up guys so this video is going to be different from anything that I've done before there's no edits there's no script I honestly don't really know what this is going to turn out looking like but I had an idea this morning in fact I was on Instagram and I came across this collab between Tyler the Creator and Nike I don't know like I'm pretty sure it's real but I think a lot of these images are kind of just what people have imagined it's going to look like so I don't know if this stuff is real I don't know if you can actually purchase it but it immediately caught my attention because it's fun it's bright it's colorful and I thought man it would be cool to put together a website page for these specific products and I got thinking okay how could I share this in a video that would make it fun and engaging so I'm basically gonna do a whole process from start to finish so we're going to use first mid-journey to come up with a few ideas of how we want to lay out this website and then what we're going to do is we're going to dive into figma and we're going to design out the website along the way we're also going to use another AI tool which I've got down here which is called topaz gigapixel AI this is going to take all of these blurry images it's going to enhance them make them look really nice we're going to plug them into figma once we finalize our design we're going to then move over to webflow and we're going to develop the whole thing and make it a live functioning website so again there's going to be a lot of just watching me over my shoulder seeing how I do this it's going to be a longer video but I hope that along the way you can kind of just see my process a lot of times these videos get edited clipped and it's kind of hard to see what goes on between the lines between the scenes behind the scenes and so you can just watch me along the way and I guess be critical of how I do things as well because I've never really opened up and just shared my screen like this before so let's dive right into it alright so the first thing that I want to do is show you some of these images right my main inspiration right off the bat is this pink shoe because I think it looks awesome okay so it's pink shoe I love kind of this brown maroon background secondary colors are a couple of these greens and the other thing that we're going to utilize is this logo this collab logo there are also a lot of jackets which are really cool kind of like these Sherpas we got a couple of I guess work jacket is what this is called so a lot of different colors to work with here's some more Sherpas you've got kind of like the swirly colors and you're gonna see where these came from where did my tab go when I show you pictures of Tyler the Creator because this guy's got style he wears clothes that I certainly could not pull off but colorful prints different colors a lot of Pinks Light blues cheetah print purples and so what we're going to do is we're going to take a lot of this from as inspiration for our site right so I'm going to show you the only work that I did beforehand in this video was on Discord mainly because I can spend hours on Discord and I didn't want you have to look over my shoulder but I thought okay let's come up with some ideas for a new Nike website that maybe feels modern new and fresh and then we can plug in our colors images and everything to those layouts so I started up here by just typing new modern website for Nike white and this is what it came up with and initially I was really liking these Styles but it just felt too much like Nike's website already looks right and so I continue to do a couple more things I looked for some Nike green pink brown shoes new Nike website and I actually used this as an inspiration this is a design that I found on dribble and I'll go ahead and credit the uh the designer down in the comments or down in the description but I still just wasn't liking what I was getting back so I did another one I remixed it and I finally came to these designs so I had typed in for my prompt new Nike website dark mode pink shoe I use that same image as inspiration and then I typed V5 and the one that caught my attention was right down here number four so what I did is I upskilled number four and came up with this layout and of course there are like some some weird quirky things with these layouts that you get from mid Journey so it's by no means a final product but I really liked the way that this thing looked right off the bat and so what I'm going to do is I'm going to go ahead and copy this and we're just going to move it right over to figma and we're going to use this as our inspiration so I'm going to go ahead and set up a a little frame here now keep in mind with figma I actually only recently started using figma so I'm kind of a figma noob so you're probably going to notice that maybe I don't do things as efficiently as I should but hey we've all got to start somewhere right okay so here's what we're gonna do let's go ahead and start with this hero section Okay so in our inspiration we've got a black background so let's just start with that and what I want to do is I want to get all of the different text elements in here so then we can determine what we want to do with our images Okay so let's go ahead and stick a text block right in here and I was trying to think like man what uh what wording or copy could I use for this website and I'm actually going to come up with that on my own as well because why not right so I had looked up as well a font that I liked and I'm trying to remember so I'm going to come into illustrator just so I can check my fonts what was it I want to say that it was avenir condensed yeah there we go so avenir next condensed so let's go ahead and use that having your next condensed and we're going to go ahead and make that white and we're gonna make it big all right so I'm trying to remember what my wording was I think I want to do something like let's get creative right Tyler the Creator getting creative and what we're going to do is we're going to blow this up maybe let's go bold italic that looks kind of like Nike right maybe heavy italic kind of like the bulldeye top let's stick with that so then we can kind of follow this tall font and what I'm going to do is I'm going to pull these together don't want as much line spacing let's get creative and then I want to specify that this is the title of the Creator and Nike collab so let's just go ahead and put Tyler the Creator X Nike and because I want to have kind of like some font variation I had looked up another font that I liked because I want kind of like a wide font I feel like that's something that Nike has done actually let's just pull up Nike's website and see what they've got going on so on nike.com they like the tall bold fonts but a lot of times yeah so say you've got like kind of like a tall bold font here a lot of times they'll pull in some wider fonts as well I don't know if I can find any examples of that but I think that could look really good as kind of oh you know what here's the example that I found right here this uh this wide font below our shoe image so that's the inspiration let's head over to illustrator and the font that I found that looked I think was this Hall fedica wide cool let's go ahead and try that so let's head back over to figma here and let's go haul wide there we go I like to look at that already so we're going to make this kind of smaller it's it's certainly not the most important part of this okay let's get creative we've got our Tyler the Creator and then we're just gonna have a little bit of body copy so I'm just going to pull this down here let's go ahead and bring this to the top and for the body copy I think we'll probably just do like an inter font possibly that should be easy enough and then let's just type in all right so check out our new line of shoes and clothes inspired by the one and only Tyler the Creator all right so I think we want to increase our line spacing we just want to make sure that things are looking clean I think we can make this font a little bit bigger but not much right I think in our inspiration over here it seems pretty small they've got it on four lines I think we're probably okay right here let's give a little more space there I kind of like the idea of these two being not too close um because that is different from our inspiration but that's okay make this even a little bit smaller all right so let's stick with that for right now and I'm probably going to be going back and forth and changing these things okay let's get creative so we've got that now let's come down here and let's type in our make because that I think is a good way for us to highlight the product that we're showing right here right so what we're going to do is let's make this a little bit smaller and then you can tell that they've got like specs here on the shoe so looking at Nike's website typically on let's go the Pegasus 39 here and see what specs they have on shoes so they have like the name they have the type they have the colors and then they have the price right so let's go ahead and do make and then underneath the make it looks like they just had like a line so let's just pull that over right there for now and let's make our stroke White cool so we've got our make and for the cheese for the specs let's go ahead and just put I actually don't know the name does this chew even have a name uh where was it yeah the TTC times Nike Jordan 4. 15 c times Nike Jordan 4 all right so let's bold this maybe because that is and then I'm trying to think what other specs we could have maybe we just have price so let's go ahead and put I think probably we should do this in all caps and then let's just say that these are 249 dollars okay ah do I like this in all caps I think I like it like that and then let's just put it's got I don't want to put Colors Let's see what else Nike highlights um let's just put lifestyle all right and then Dash Tyler the Creator okay so what I want to do with these is I think I want to make this a little bit smaller and I'm going to go through after the fact and kind of check all my font sizes so I have somewhat of a like a uniform layout right so I want this guy a little bit smaller and it looks like my little line here was really kind of light so I think what we're going to do is we're going to make this like a 0.4 Maybe we're going to bring these up and then we're going to have our call to action right all right so for the colors and I probably should have established this beforehand I want to kind of bring in some of this other inspiration um this one first because I think oops I think this is what I want to go off of and I might actually change from black to that maroon because I'm really liking that already um that's good inspiration but this is where we're going to get most of what we're doing so I'm really liking these colors so I think we'll probably go with the pink this maroon background and then the light blue and pink from the logo so we'll make sure those pinks the same all right so let's just go call to action so I don't think we want to be super big I feel like uh Nike's usually pretty minimal slight radius let's go ahead and let's see what these two colors look like so first let's try our pink here I think the pink looks really good but if I want to go to this maroon color ooh I actually really like that all right yeah I'm sticking well I'm sticking with pink for now I actually really like that okay so let's go ahead and have this just say bye now and I'm going to go ahead and Shrink my box here Center everything and then I'm going to want to make this I think probably black but let's see what it looks like I think this is a dark enough color that might look pretty good boom bye now okay I like that for now so again our spacing we're gonna have to mess around with that a little bit I can already tell that this is going to want to come up all right check it out okay so what I want to do is I want to kind of pull my shoe in here to start getting a good idea of what this is going to look like now you can tell that this image is looking pretty rough so what I'm going to do is I'm going to introduce you to this tool topaz gigapixel this is another AI tool so we started using mid Journey for our layout which is an AI tool but now we're going to use gigapixel and what I'm going to do did I save that already I don't think I did so let's come back here and I want to find that image and let's just go ahead and do this one for now okay so we're going to open this up in gigapixel and this tool is super cool I've actually been using this a lot over the last couple days let me see if I can move my face out of the way here so I can see okay so already right off the bat without me touching any settings you can see the difference the new one is on the right the update and then the left is like the old blurry image now it's crazy to look at now I'm going to zoom in here and you're going to see this right side how it's cleaning that up and again if you zoom in too much it sometimes it might be like correcting a little bit too drastically and so you can adjust all of these things that you can suppress noise um fix compression remove blur you can do all those things but I want to look at this and just make sure it's looking good and once that is clear I am going to save the image here and I think we'll just do a JPEG we want it as high quality as possible and let's go ahead and save that so what this is going to do is it's going to export this image and then what we're going to want to do is pull it in to photoshop to clip it out so I'm using a lot of different tools here right oh there's photo booth there's my face Photoshop here we go all right so what we're going to want to do with Photoshop is open and this is the new updated version oh that's looking clean okay so what I'm gonna do is make sure that my image is not locked which it is so I'm going to unlock that and I am just going to select the subject it's going to clip out my shoe I'm going to inverse selection erase that I'm going to crop this image out so it looks really nice and clean and bring those Corners in finalize that and then I'm going to do a quick export now in this video I'm probably going to be going through and doing things more quickly than I normally would just because I want to keep this thing somewhat brief right so let's come back over to figma and there is my shoe so I want to show you the difference between these so let's go ahead and place my new pink shoe oh baby it's looking good okay so I want to show you the difference in shoes so the one on the back is the old one this new one is the updated version you can tell I probably over corrected a few things and so I would probably take more time on that next time but let's get rid of this old image and let's see our new shoe all right so I think probably with these shoes the bigger the better I can already tell that I want to move this over a little bit and then we've got our big shoe now let's take a look at our design now I feel like I'm kind of like wider wider screen here right and so rather than make it bigger just so I can keep things compressed let's just narrow in our viewport there we go that's looking a little bit more like our inspo all right so we are looking good now one thing that I noticed they've got like a little bit of a texture back here it almost looks like like a leather stitching or something but we're not doing black right ours is kind of this maroon color but I'm wondering if there is something we can do to kind of bring in a little texture to it so what I'm going to do is let's go over here to Adobe stock I've got so many credits built up in Adobe stock sometimes I just buy things just to buy things um 22 left actually I'm sure I thought all right so let's go maroon Brown background see what it comes up with no no ooh this is like a kind of like a football leather I kind of like this huh yeah let's go ahead and try to bring this in so what I'm gonna do is I'm gonna license this one and let's bring it over because I think even though this is a different color I think if we just have this as almost like an opaque backdrop I'll show you what I'm saying all right so the reason that I liked this one is I feel like I can get these to kind of all lead into the shoe right and if I go like this and I bring the opacity down oh there we go so what I did is I put that image behind my kind of brown maroon uh backdrop and then I just decrease the opacity so I don't want it too crazy but just enough to where there's some texture right all right I like that a lot okay so here's what we're looking like now I almost feel like I want a bit of a shadow behind the shoe I'm moving my face out of the way here um I feel like a shadow could look good so let's bring I'll probably just bring like a circle just to keep this brief so what I'll probably do is just go like this just to see if I like the look of it I'm going to come to effects I'm going to go ahead and do layer blur and then we're just going to crank this thing way up and we're gonna see what that looks like I'm almost feeling like is I think that's good yeah it just gives it like a little bit more depth right and now I'm looking at this I'm questioning whether I should have gone for the boulder oh I don't know what do you guys think I kind of think the uh the heavy maybe it's a mistake let me know down below okay all right so we are looking good right now oh the other thing that I wanted to do was pull in the logo so where's the logo I've got so many tabs open up here you have no idea how many tabs I had to close to get ready to start this video it's kind of embarrassing um oh yeah it's right here I wonder if yeah that should work let's just take a screenshot here and let's go to Adobe Illustrator well I hope it doesn't make you feel discouraged that I'm using like so many different tools that my membership or my subscriptions are probably like a few hundred dollars a month that's a little bit ridiculous all right okay I'm going to take you through this really quick so don't judge my work it might look a little rough okay we're gonna get our flower here oop Okay so we've got our flower and then what I'm going to want to do is just get my uh my Nike symbol and this is not one that I can really go halfway on because everyone knows what the Nike symbol is supposed to look like right so what I'm actually going to do is let's change this to a better color and I like to kind of like bring the opacity down and maybe even actually yeah that would probably be more helpful let's bring the opacity up and I'll just do an outline yeah there we go now it's going to be easier to kind of make these adjustments so I'm going to bring this up we want to make sure that we're following our lines here as best we can and again if this was a real client project I would be spending a lot more time on this all right that's gonna have to do for now Okay so we've got our Nike symbol and we've got our flower so if I bring the opacity down these you can see that the Nike symbol is supposed to go through the flower oh and we need our circle on the flower too that is a square you're wondering why you take design advice from a guy that doesn't know the difference all right okay so we've got our Nike symbol and what I'm going to do is I'm going to give both of these yeah those look I messed up so I'm going to give both of these trending the best way to do this let's go pink on both of these no lines on either of these and here's what we're going to do we're going to go object path offset path and we're going to do a slight offset I think probably like a 0.5 okay and then what we can do here is look at that and the Nike symbol is going over on this side right so we're going to make this all one it's going over on this side and it's going under on this side see what I'm saying and this should all be one and this should be erased these things should be erased oh it's beautiful sweet okay so we want to make sure that we get I'm going to blow this sucker up here I don't even know the size of my our board here I want to make sure I get these colors right that's the one I should have used all right pull the sucker over that now one thing I'm wondering is if I have my color mode set yet to RGB I feel like that is looking like it's not oh well okay and there is our logo so let's group this puppy let's go ahead and put it in an artboard and we're going to go ahead and Export that as logo PNG and let's make sure that that is high resolution Perfect all right oh come on move my face there it is okay let's pull this logo in move my face out of the way again shrink this down because it's gigantic and let's put this up in the top Corner oh I hate when my scroll stops working there we go and I think we'll just make this a little bit smaller Maybe where does our inspo have uh the logo it has it right above maybe we'll do that right here for now and maybe a little bit bigger all right okay we're looking good now I think up in the top right we would probably normally want some link blocks let's go ahead and put our buy now here and then let's just add some additional links I don't know what those are going to be but maybe we'll just put a link oop for Now link Link Link Link oh guys this is looking good I don't know why this keeps moving okay so there is our site now all we have to do is work on these lower sections right here so let's go ahead and bring this down because I know that that's the same font size and font and down here I think is where we're going to use our or highlight our additional products so okay so let's go ahead and open topaz gigapixel again and I wonder if we could do multiple at a time I've actually never tried that let's see what it does um okay so check this out so it's it's starting to update and it's going to take a look at these images and then I think it's done here I'm going to shrink my face there we go so if I zoom in on this you can see what it's doing right so the right is the new the left is the old so without me adjusting any settings it is cleaning up this thing a lot so I'm just going to go ahead and save image I don't think I need to do anything for this save image oh so I've got multiple down here okay so this is oh my gosh yeah see it's already done okay so we're going to save that image and we're going to do our last one and as long as this is doing the same thing yeah I think that should be good save image my kids just got home and and they're playing with their lightsabers so if you can hear an epic battle up there that's what's going on all right so we got all of these did I export these already yeah I did sweet okay so let's bring these over into Photoshop we're going to open yeah gigapixel gigapixel gigapixel okay so let's go ahead and open these we're going to do this really quickly [Music] all right we are back in action case so I have clipped all those out we have enhanced the way they look I'm going to go ahead and pull which one was it this one and this one I'm gonna pull all of these in and see how they look and I feel like they're gonna be yeah Giant all right so let's shrink these down not upside down though and let's pull over our products so what we've got is our title our line and then a short description so let's bring this title line short description which we want to make that a little bit darker right because we're on white now um I think that should be good and then I'm not even going to worry about typing out new titles okay so let's bring our products and I think we want these to be huh we want them to be big enough because I think we're just going to do three so let's go uh one two three maybe and I think we'll just go down below all right okay what are we thinking so I almost feel like do they need a box I don't know so we're just gonna put jacket number one jacket number two and jacket number three very creative content I know okay so here's what we're looking at right now I am feeling pretty good about it I think we'll make some adjustments as I for me like sometimes I have a hard time finalizing things in figma I know that's something that I preach and I probably should do but once I get into webflow I think we'll be able to make some some more adjustments and kind of a final look at everything but overall I think it's looking pretty good I think we've got our color palette down I'm loving the images we've been able to get them higher resolution they're looking really clean and so with that said we're about 30 minutes at this point and so I'm gonna break my webflow portion of this into part two and so if you've enjoyed this up to this point and you want me to do the entire webflow walkthrough of developing this site working on responsiveness we might even do a couple interactions I don't know we'll see if you're interested in that let me know down in the comments like this video again this is something new but kind of fun just to mess around and hopefully you enjoy watching as well so thanks again for watching subscribe if you haven't already and we'll catch you in the next video thank you foreign

Channel: Payton Clark Smith

Views: 10,926

Keywords: web design and development full course, full web design course, full web design project, full web design tutorial, full web design process, full web design in figma, full website design in figma, full website design, web design walkthrough, nike website design, ai web design, ai web design midjourney, ai web design generator, ai web design tool, figma, watch me design a website, web design figma, tyler the creator nike collab, Midjourney + Figma Entire AI Website Process

Id: OUy7u4XocaA

Length: 31min 56sec (1916 seconds)

Published: Mon Apr 03 2023