The Future of Web Design: Using AI Art and ChatGPT to Create Insane Websites

allow'' s build a impressive and completely useful looking web site using expert system in this video clip we'' re going to cover the beginning to end up process of structure that AI generated site using a tool like mid-journey to develop all of our art work and all of our Concepts where to take out all the properties we need and afterwards start building our internet site in a no code tool like webflow and after that we'' ll top it off by utilizing a little Chad GPT to compose all the material for our site okay allow'' s begin in mid-journey which is generally a huge Discord web server that permits us to do text-based triggers here inside of any one of your spaces I'' m inside of a'newbie area I ' m going to boil down to the chat punctual area I ' m going to key in reduce envision which ' s going to allow me to place my message base motivate now I have to start thinking concerning what sort of site I wish to create and I currently have a concept I wish to develop a women'' s high-end skin treatment website'so I ' ve added that part of the timely and I'' ve simply divided with a comma I'' m going to highlight a couple of keywords for my timely like web design UI ux deluxe organic and I even included a pair shades like modern-day and Peach when I'' m all set to do that utilizing that lower visualize prompt I just press get in and you can view as mid journey is generating various other individuals'' s prompts it does this in phases in actions so we'' ll have the ability to see ours actually come through in stages and steps also for instance you can see it'' s presently at about absolutely no percent and this is the handling of my image currently when we obtain made with our picture we'' re we ' re going to obtain a pair alternatives like everybody else is getting below and this is to actually high end top 2 3 or four or provide me extra versions of primary 2 three or 4 good mid Trip has actually ended up creating our Ideas and our format and art work and let'' s simply zoom in and see what it'' s offered us it ' s really given us some pretty trendy things to collaborate with different kinds of formats it ' s generated products for us like on the Fly which is quite amazing it used a few of those shades that I motivated it but it is sort of like all blended right various sorts of designs so if we intend to we can version off of among these that we really like possibly or we could attempt our prompt again I'' m going to return down and say lower think of and I'' m going to put all of this in except at the end I'' m going to kind uh female version something like that and afterwards let'' s try generating that once again great mid trip is ended up round 2 of our Ideas and this moment we were like heavily featuring like some kind of like design or some kind of Talent on screen and this is this is really pretty trendy looking you can see how it might have like a navigating up top it has like some type of huge headline and a phone call to activity and it has 3 kind of points down here now at this moment you can remain to develop your timely add specific keyword phrases take specific things away until you get an instructions that you truly really enjoy and you intend to make use of that as the structure of your site in fact continue to develop my prompt till I obtained something that I really actually appreciated which was this design I liked the version there I such as the typography and the navigation up leading it likewise offered me some truly great section down listed below that have several of those products so I'' ve gone ahead and I'' ve downloaded that and I'' m mosting likely to see to it that I open up that with Photoshop just so I can draw specific possessions from it I'' m mosting likely to open my layer and I ' m going to go to function since what I actually wish to do is simply see to it that I get particular points out of this right so I'' m mosting likely to go ahead and copy the layer and this is where you would actually require a design device just to take out several of those things you may require and that'' s what we ' re going to do today so essentially just removing all typography by getting rid of or covering up out elements and afterwards I'' m utilizing the piece device to grab those images okay with our template open the first thing I observe is that my header picture is not expanding completely to the left and right-hand man edges that'' s really simple'to do we ' re simply going to go inside the area because that area has some'cushioning on it we'' ll grab that intro header we ' re just mosting likely to relocate up and out of the area and boom currently suddenly it is complete width next I ' m mosting likely to submit every one of my possessions so let'' s click the media kind of properties container and we'' ll get all of our possessions and just drag those inside we'' re mosting likely to use all of those here in a 2nd I'' m on the introduction header the initial thing I wish to do is simply kind of scroll down and locate the backgrounds right here I'' m mosting likely to head back over to photoshop and simply observe that I have this sort of light peach color I'' m mosting likely to get the hex value for that light peach shade and I'' m simply going to place it in the background I'' m mosting likely to remove the picture you can see now we have that light peach color right in there allow'' s go ahead and add our featured image inside shall we we have a picture chosen and I'' m mosting likely to select which image we'' ll pick our version and allow'' s just see to it that we'do not floor tile we ' re mosting likely to shoot it over to the much best and then we ' re going to consist of the picture there so now it ' s surviving on the right-hand man Edge and as we type of like ebb and flow our web browser in a responsive nature our design is going to stream and lessen with it which is really truly wonderful great following up we have the typography that was in our design so we have like some kind of significant headline and some sort of body copy and a great spherical type of pill design switch that'' s in this color so I ' m mosting likely to get hold of that hex I'' m going to return into our site and we have those components here however whatever is Center aligned so why wear'' t we simply click the entire container that it ' s in in and you can see everything is Facility straightened I'' m simply going to left align whatever and my button too I'' m mosting likely to ensure I order whatever and simply left line up everything our message box is really just 80 percent therefore that'' s why points were obtaining type of shaken off below a little I'' m going to take this whole container this intro material and I'' m going to reduce the size of it a little bit and I'' m in fact going to dictate where this point obeys making it position outright and after that we just desire to see to it that our introduction header is of a placement relative currently anything that'' s outright is in relationship to its parent container so with that being stated I'' m going to come back to my positioning here and I ' m just mosting likely to move it like so we can really put absolutely no on the left hand side and it'' ll press right over there to the left hand Edge and why put on'' t we try providing it like 20 40 perhaps 100 pixels allowed'' s return to something like 60 or 40 that feels like it'' s almost lined up with our headline over which feels rather excellent for now I'' m also going to enter my heading below I ' m going to see to it that my headings are dark which my body duplicate also is dark and I'' m going to grab my switch also and make certain the background for my button is not white however rather we have that darker color much like so and we'' re mosting likely to round the corners to those switches so why put on'' t we get the Boundary radius of it and round the edges we'' ll also exceed that so it'' s a nice tablet shaped switch and it looked like this was even like a not actually like actually black inside yet had more of that darker kind of like peach-ish shade inside and we'' re even getting some built-in sort of like hovers from it they'' re already kind of like baked in which is rather great from right here I'' m simply changing the size and positioning of everything inside of my hero location and after that I'' m going to go right into the major navigation and readjust that switch too so it matches the remainder of my site I fall to the lower area that 2nd area and I'' m getting rid of the content and adjusting the margin of cushioning adding that darker blush background so that I can establish a three column layout that'' s flexbox and keeping that 3 column layout I'' ll then be able to place every one of my typography and my photos and choose my image and why wear'' t we select our first item that ' s stunning I'' m mosting likely to duplicate that click column 3 therefore I have that exact same picture however this moment I'' m mosting likely to replace it with my following image and they just pop right in there they'' re looking pretty great and we can preview our website and it'' s it'' s looking pretty remarkable it ' s looking quite impressive we might absolutely do a bit more to this layout however why wear'' t we just take a 2nd and load it in with some web content from at GPT I'' m over on conversation gbt I'' ve started a brand-new'conversation I ' m just gon na say I require you to compose me heading and body copy options for a deluxe skin care brand internet site home web page uh please reveal me three variations of each in table kind and apparently I did every one of that in caps lock however that'' s all right because it is it knows what I need so right here GPT is spewing out some heading variants and body copy variations it'' s putting everything in that table form for me so I can see it and this is really simple currently for me to type of comparison and contrast which ones I like much better I like this one that claims Unleash Your Internal Glow so I'' m mosting likely to proceed and get that jump back over and simply paste that in actually I actually like the matching body copy for that one so I'' m just going to get that and bring that over and what I could do to simply drop it down a little bit is do away with this I ' ll placed that excess body duplicate that we had and afterwards I'' m going to order among these other headlines and simply pop it inside present moment we have that looking respectable and let'' s do another point offer me three choices for brand for this firm I like it chat CPT is offering me choices for my actual firm name for this site the very first option they have is Lumiere Lux which is it integrates the French word for light evoking a feeling of Brilliance and luxury I like that one why don'' t we just take that for currently we'' re gon na eliminate the picture in there and instead simply put a headline we'' ll decline it down to something like a headline 3 and we'' ll placed in the brand there we'' ll remove this logo design and simply maintain it uh in a comparable design so this set was using volcorn for the text in fact I what this currently is using something that I really like below which is Montserrat so why put on'' t we actually return down here and we ' re just mosting likely to decide on the Fly which is to utilize beast on go a little much more on that particular Sans serif side of points I'' ll bring this message down so every little thing suits there really really perfectly and the last little thing I need to do is just round the edges on this button to make sure that it matches the rest of them and I think that looks rather good we have an internet site with custom-made art work in images it'' s receptive it is prepared to introduce it has terrific material and a brand-new brand created by chat GPT and whatever services all device dimensions that'' s it that ' s the beginning to end up operations of making use of AI tools like mid-journey and conversation GPT and no code tools like webflow to in fact release Real Bargain web sites they'' re receptive they work well they look good and all of it begun by utilizing the skill and the power of AI if you appreciated this video clip make certain you leave a thumbs up register for the network I do great deals of videos regarding style no code devices and AI devices similar to this so perhaps linger by hitting that Bell notification symbol so you recognize when a lot more video clips such as this one come out examine the summary down below for web links to all the devices that I utilized in this video so you can begin using them right now and if you have concerns leave those down in the remarks I'' ll get back to them as quickly as I can I hope you'' re having an outstanding week I hope you'' re designing remarkable points making fantastic things and using the power of AI to expand your innovative capabilities see in the following one

Website Setup Service

Leave a Comment

Your email address will not be published. Required fields are marked *