Reacting to Beautiful AI Art Web Designs + How to build them

AI art can produce amazing looking web designs in this video I'm going to react to some of the ones generated by myself as well as my community these were made in mid-journey I'll show you exactly how people are making these how you can make it yourself and how you can turn these into websites and I'll also show how chatgpt is becoming a part of the process of building websites as well I've integrated mid-journey into my own Discord Channel you can generate your own air your own web designs and you can try it out completely for free I have hundreds of designs and we're going to check out some of the best and they progressively get better and better let's have a look at the first one here which is a beautiful website about learning code UI ux Etc it's come out with almost of this design here for what looks like a portfolio we have a large image a menu section we have a header title as well as a button here or two and I love the fact that we could even pull out this image and use this as the Baseline for creating a design like this if we keep scrolling down someone here has put in an e-commerce web design for selling Street clothing they've got a few other things here like Urban style BBC ice cream as well as things like UI borders minimalist as well as 8K and you can see the different variations that mid-journey has produced for this AI art essentially having a three to four different design Aesthetics here like a white version a Yellow Version a dark version and it's got a unique layout here where for example if you're doing a website traditionally you just might have a title and maybe an image but here there's a lot more there's like these menus on the left hand side or the right hand side the next thing here is this person who's doing this street art has progressively added more and more content in here and he gets additional design Aesthetics so this is almost like being able to generate multiple designs that you could take to a client and then you can allow them almost to choose which one they like and have have the AI progressively expand out of the design until it's something that they choose and this would normally take hours or even days for a designer to do now ai can basically make this AI web design art in just a moments which is magical another variation they've done here is for the same thing but to add blues and oranges they've specifically asked for blues and oranges and now you can see that the design of the titles as well as the background and even the clothes themselves are incorporating those colors and this is just how a few words can really create unique looking designs that are like this here's another example of a design for a car service website with a image of a blue and orange Mercedes-Benz and if we have a look at this this looks quite futuristic we have the car itself which is I suppose a Mercedes that I can tell by the logo it's meant to be we've got the menu we've got these nice oranges and blues again with a strong call to action and a section here for the logo and we have variations again so like an orange background a blue background a dark version so this is what I mean in terms of how the AI actually doesn't just generate the image itself it also generates the entire aesthetic for the website and this could be then used to create a style guide here we've expanded on one of the images so you've got a bit more depth and yes while the AI art might not particularly be able to fill in text the Topography is quite well done here because we have a large text for the hero we've got a smaller tagline and then we've got a bit of description here and all of this is following good color theory so the AI art is doing a great job here I even like how it's blurred out the background and the car here is in complete focus with even some of the reflection here that's so cool here's something a little bit different a UI design for fine dining with a focus on deep Browns and creams and steak as well so here we can see some of these examples and why out this steak well the AI definitely knows how to make a well done steak or at least a medium rare one anyway we have a few things happening here we do have those colors of these dark Browns and they're matching with the steak so this is what I mean where when you're designing a website normally you want to take inspiration of what's being shown in the pictures so you can see how these steak colors as well as the background colors are almost are flowing with this gradient happening even like the table color and the skoradian is happening and these nice sort of wooden finishes around the corners these are all design Aesthetics that I wouldn't even consider to include in a website but now that I see them they're definitely some type of aesthetic that I would love to have just to make a pager look more refined and professional and here's another example with a stronger focus on deep Brown and cream I guess in this example there's more emphasis on I guess the mashed potato but you can tell how mid Journey's art is showing more and more variations of a website landing pages here we've these dishes and this gold in the background as well as these dark Browns making it seem very professional very beautiful very high quality and if you saw this as a landing page for a restaurant you would definitely think they are a high caliber the next few prompts here are for watches and websites for watch designs and what was interesting about this is that whoever created this actually went through quite a few different types of prompts in order to get the website designer that they were looking for generally they were looking for a luxurious luxury watch with e-commerce Rose and pink with a filter from the left hand side and three columns and here you can see that we've got a dark theme a pink theme a kind of combined and a white theme happening and as we progressively go through further and further you can see that finally we've come across this main design aesthetic and I think these ones probably look the best even this watch design is probably something unique that you could take to a manufacturer and actually build but I think what's interesting about at this design here is that the final design that was selected is that this one over here and this has a nice gradient happening from the right to the left it has this subtle Pink gold color for the watch which stands out because it is the most important item on the page basically drawing all your eye Focus onto this and then the text itself is very thin with a header text there a tagline a small body of text and a large call to action button and this while looks like a simple Design This Is Something sometimes all you need on a page to convert a user just showcasing the product with a brief description of it and a call to action next we have a UI ux design for an African Air hair salon which basically is a main hero section with a front side full screen deep Brown creamy steaky look and this is what came out so for a hairdresser I guess it's coming out with lots of different hair designs and I like the fact that this one looks like it's on a laptop that's facing backwards that's a pretty funny design for a Mac but we definitely get all the main things happening here such as the logo the menu a menu underneath we have the main hero with a small action point here and this looks like a little bit of a slider that you could select between whereas some of the other designs here are quite nice and Larger than Life Again applying a bit of a gradient happening from the bottom to the left a strong call to action and most of this is very similar to what we've seen before but it works which is why it's consistently a part of web design standards these days there are then additional variations on lighter versions of this design aesthetic and then you can upscale them using the AI tool so that you can get a better idea of how you could for example utilize it so I like the fact that there were quite a few different variations here and let's have a look at the next part here this is a beautiful website for e-commerce for music marketing so in this case what's happened is that we've gotten I suppose a few not of that great music Aesthetics we've got this one here that looks like a music website but it's on a laptop so you can't see it that well where this is sort of like a laptop with music around so this is where some prompt engineering could probably help the mid Journey AI art to create better web designs and that's what this person's done they've gone through and updated their prompt here to say a beautiful website and music marketing and then they've added UI ux after as well as the word website now it actually does look like a website it's actually put on top of a computer so you can see that the website is in the background you've got these guitars on the foreground which I suppose is what the music is referring to and then you have even what looks like e-commerce here because you have like a bit of a shopping cart you have a few selections here and then you have your products down here so I suppose these are very unique looking websites for well music I haven't seen ones like this before but they definitely look beautiful then there's additional prompts here so they've redefined this now it says a beautiful e-commerce website from using marketing they've got DJ music art a live streaming and a couple of other keywords here but as you can see now the website looks a lot different because of those keywords now you've got a stronger dark aesthetic with goals as well as the products for things like headphones DJs as well as some music Like Rappers here and I guess this is because they've added the words gold black white gray to the website and this is just how adding a few keywords can subtly change the entire design of a website that's produced by the air this person has then gone on to create additional variations for this website design until then they were finally happy with something that had a bit more color a bit more depth I think it's further down here and it's even on a laptop which is interesting but it's basically like a strong call to action here at the bottom with this gold we've got the speaker is on the left and right hand side with the person listening to their headphones in the middle and this menu and Logo at the very top time to take a look at another designer setting here we've got the best website designed for a sweater dashes shirt UI ux and here we've got a bit of an art style Happening Here for what looks like a jumper or a sweater I guess we've got a teals as well as purples and oranges too but all of these are kind of I suppose and not very web looking we have a lot of Statistics happening here and while some of these are local like they could be a website because they've got a button and a hero text and what looks like a menu I think that there could be a lot more done in terms of the prompt engineering on this one to make it work so here I can see that this person has continued building out additional prompts so you can see here now we have a little bit more of what looks like a e-commerce website because we've got the menu here we've got a sub menu we've got a action um sorry we've got a title as well as a button here and now we've got the product itself on the right hand side whereas in this case we have someone wearing it again some of these are probably the best types of website designs for sweaters but this is again where more prompt engineering needs to be done and I can see that this person did continue to do so so now we've got another example it's best e-commerce website design realistic for a sweater dash shirt UI ux and this one I like much more this one actually is starting to look like a website design for a sweater shop because what we're getting here is if you look closely is this design for the sweater without much of a person we've got variations of what it might look like we have what looks like a summary and a card where you could add it in as well as a shopping cart here at the top and even sections for maybe the pricing and sizing as well as the adding to cart so now you can see how just even a small bit of prompt engineering can improve the design of a website like that if you didn't know I like coffee so when I saw this one here for a coffee store even though it's not a website I was excited to see that this person actually then continued to build out this thing where it says now coffee online store and we're starting to see variations of what a coffee store might look like online not only that we even have a logo which is really cool this means that a mid-journey and its AI can make a website logos for you which you could then customize and this is a one hell of a logo I have to say now for some clothing designs this is a creative and colorful clothing website we have Nike Adidas and other brands designed in figma as a web design with UI ux and front-end design that's the prompt and this is the output here I have to say this is a one hell of a colorful design for clothing I think it's because we're pulling in that inspiration of both Nike and figma which you use these colors in their logo maybe that's why it's so colorful maybe even two colors colorful I would say so here I can see this person continued to work on their prompts this time it's more for men's slacks and here you get an example of that in practice where you get different shopping designs for these slacks if we take a closer look we actually get variations on of those so let me just zoom in here so I like actually how they've done the variations to look almost like little selectors that you could do and maybe that updates the model or even this one where like the trending design is just over here and then you have additional designs it's definitely a unique take on how you do this and this one here looks like it's for a very high class design for maybe a jacket as well as slacks but yeah these are some good designs and there are additional designs in here that are being created I think this one here is good because it's more focused so it's more on things like Pinterest as well as dribble and you can see those colors are bleeding into the design I think even the design of dribble and Pinterest are coming through because you can see it's more of that clean kind of design with these rounded corners and this is often what dribble does in terms of most of its design Aesthetics here's one for a website designed for a recruitment platform as well as jobs and this is pretty standard for what you would expect to see in terms of our equipment website though the guy might look a little bit funny I do like the fact that we have recruitment like logos and icons in the background we've got like a geolocation map here on the design on the right hand side which looks like avatars of different people in this design it looks like we've almost got these skewed kind of Aesthetics where if for example I was doing a design presentation for a website this is sort of how I would make it and mock it up just so it looks more natural and interesting like presented on a laptop these ones are more generic something that we would probably see in template websites where you might just have a cider shutter stock image or a stock image in general of a person with a background as well as them working in an organization we've got that default template of what looks like a menu as well as a hero section A left column and a right column here now I'm going to get to some of my favorites this one here is a UI ux design for Ecom website that sells soft drinks with branded colors being green orange and they look vibrant which is I think what probably makes them stand out so much you can definitely tell just how creatively colorful these pages are with different types of designs here that looks like a cup as well as a bottle we've got a main product in the Middle with variations below it as well as this large one which looks like a website where the product even almost comes out of the entire website design and then there's a nice background to it which I think is a unique way to create website design so if we scroll down here we can see that this person definitely liked that and then expanded on it and here you can see how maybe this could be something like it could overflow over the menu and it could for example show the variations here on the right hand side of different mixtures you could apply into the drink and then here are some nice leaves and other Aesthetics in the background that make this visible and nice now this is one of my favorites because this is what users I suppose more AI to be creative in terms of the design designs that we might have never even seen before considered now bring us to the Forefront of what websites will look like in 2023 or Beyond there's another one and this even has this nice custom font which looks quite swirly we can see that the header isn't just a traditional header with a single line but instead we've got this bubbly nature to it where it essentially looks like it's flowing from the header design and bubbling through like almost a juice would do you so these are all these little subtle things that a human might not even consider to do and yet the AI has decided to do this and make it look way more beautiful than I could probably create here's another one I think the bottle kind of looks like it's upside down but who am I to say if the AI says that a button should exist here and then two more buttons down to the bottom right maybe this is a standard we've never considered because normally I just make my buttons all exist horizontally or vertically but never in this sort of a zigzag pattern maybe that's something I should try and maybe that produces better results still I just love looking at these designs because they're so inspiring they make me feel fresh and I actually feel thirsty when I'm looking at these honestly so I mentioned earlier I want to pick a design and then create it as part of this and this is the one that I've kind of enjoyed and the most so I'm gonna see if I can replicate this and to do this I'm gonna need to do three main things I'm gonna have to pull out these images so that I can actually use in terms of a design so I'm going to do some additional mid Journey queries then I'm going to throw them into a no coding platform and I'm going to recreate the content as well probably using chat GPT so first what I'll do is grab this URL then I'll jump back into Discord and I'll head to the mid Journey but I'm going to pass in well imagine as a prompt and I'm going to pass in the URL for this image but I'm also going to type in wallpaper and that's pretty much it because what I really want to do is I want to grab this image as a wallpaper that I could use as the background image for the website to kick it off so I've got the results and unfortunately it seems to pull in the design aesthetic but it's not exactly what I want and this is where I need to do some prompt engineering I'm going to pass in some of those values like soft drink branded colors and the colors themselves and I'm gonna pass in the URL one more time and with this it's a more defined prompt very similar to what we originally had with the website design now I've got something that looks much better we can see here that we do have what looks like those colors Aesthetics as well as those things like the orange is in the background and whatnot and while we could now use some of these images we could crop them out in Photoshop and apply them to the website I actually kind of still like this aesthetic so I think I'm gonna do some photoshopping to pull out these assets and then utilize them as part of a design so I'm going to right click and copy this image and then I'm going to go into Photoshop and create a new one this is just over here I've just literally copied this in I'm going to select the AI select tool here from Adobe and select at the water bottle here or this bottle of juice I'm gonna see if I can copy paste it into its own layer on the left hand side and then I can grab this individual layer and I should be able to file export it to be able to use as part of my own web design I'm going to save this as a PNG so that it has a transparent background and I'll use this a little bit later I can then do the same for the other objects such as this orange here as well as the water water bottles and I'm just gonna go through iteratively and basically just pull out all these elements to use I'm not going to worry about the outside elements I just want to grab these main elements inside the page and for some of the elements here like the leaf I can just manually pull that shape right out and maybe even the little Shadow here that comes along with it but realistically I want to keep it as minimal as possible so I'm just gonna see if I can refine the edges a little bit here and then I'll be able to pull this entire shape out later and create this as its own image once I do this in more detail and to save your time and mind here's a quick time lapse of me just cutting out these shapes to later use as part of the design now what's interesting is that we can jump into this prompt over here and we can actually pull this in more or less to chat GPT so that's what I'm gonna do next let's open up a new instance of chat GPT and hopefully it's not experiencing any technical different difficulties and here where we have UI ux design for e-commerce website that sells blah blah blah we can go please provide a title description and feature items and action button for a and then we've got e-commerce website that sells soft drinks and brand colors are green orange so let's see what chat GPT comes back with and here ideally it just gives us the content for the website so here we've got a title we've got a description hopefully button so I can probably plug this in later I've also done something really cool I've integrated Chad GPT and open ai's model here into my own Discord so I can ask it the same question and more or less get the same response and this I can use later in the website and now I can just jump into like a no coding piece of software like editor X and put this all together so I might even start picking out the colors that we have here for the background as well as some of these elements so for example this back background color I could just pull out this yellow grab the hex value and that can be the starting point for the website I'm going to just open up editor X here and begin making this so This is actually the easiest part we have no coding software I can jump in to the background and select the background color that we defined earlier which is just this one here I can go and drag an image in literally drag and drop it and I can change that image and since I've earlier uploaded the image just here I've got these two images ready to go and I can simply select it change its aspect ratio and there it is ready to go I can then even overlay it a little bit from the top similar to the design that we had over here and then I can simply go ahead and grab the other image drag it in and select it to use it as part of the backdrop and this can actually be layered so for example well let me first update the aspect ratio I could put it behind this image or in front by heading over to the layers and just dragging it below but I believe in the design itself it was sort of clipping to the top and the bottom of the design here and sort of resize it and then clip it into those spots you can actually do a thing called docking so it's always connected to the top and the bottom and with that done we can just add in some text here on the right hand side something like for example a title as well as a description we don't even have to fill these out ourselves we can just use the chat GPT title that we had earlier here let me jump in and update this one and I might not wanted to expand out all the way so I'm just gonna make it a little bit smaller if we take a look at the design it was quite bold and thick so I can just do that now select edit we've got quite a few different options here and I think I might pick Let's see impact impact's usually quite bold we can make it even bolder and there are other options here that we could do as well but for the time being that's probably enough so I can just grab this description text uh I can then update this text over here and maybe we could make the font size of 14 pixels so this is sort of how you would go about building a page like this obviously there would be a lot more to it but it definitely makes the design aspect of it much easier and while you might not be able to pull out entire elements like for example I might have to recreate this box shadow of the actual bottle itself manually in Photoshop that's all can be done and this is more or less how you would build a website now using AI tools and you could do it much faster than you could ever do in the past I hope you guys enjoyed this video I'm going to be doing some more in terms of AI design web design UI design and how it plays a vital role into 2023 and Beyond if you guys find this interesting let me know in the comments below if you want to be part of some of the upcoming videos or even give me some suggestions on what you were looking for jump into the Discord and in there I've got a huge community of nearly a thousand people just chatting as well as sharing ideas and even showcasing some of the work that they're working on

Channel: Codex Community

Views: 487,818

Keywords: ai web design, web design, ai, openai, midjourney, dalle, ai website, ai website design, ai ui, ai user interface, ai uxui, midjourney website, website ai, website design ai, web design ai, web design midjourney, chat gpt, chatgpt, ai art, art ai, midjourney art, artificial intelligence, art, ui, ux, ai website tutorial, tutorial, ai web design tutorial, mid journey, website, ai art web design, ai art website design, ai art website

Id: qi1Irnvc-EA

Length: 25min 15sec (1515 seconds)

Published: Tue Jan 10 2023