AI can generate web designs that look amazing. Midjourney is one of the latest AI tools to help create inspirational designs and could bridge the gap between what we see for UI and UX in 2022 vs 2023.
Check out these website designs using artificial intelligence. Tools like ChatGPT and OpenAI are really paving the way in text based generation, but midjourney and dalle are also doing the same visually!
#ai #website #midjourney
This channel also has the backing of Editor X:
You can find our Community Discord below:
Can you design a beautiful gardening Website because of this right here is AI Art it is a web design created by Artificial intelligence and it is Amazing look at this design for a bonsai Tree this is one of the best designed Websites I’ve ever seen in this video I Want to check out some of these Beautiful websites created by AI art and How their creativity is then I want to See if I can pull one out and actually Design it inside of a website because Maybe this will change how we build Websites in the future so let’s begin And check out this Bonsai example Everything from the color choices to how Well balanced it is between the image And the text and even these elements Which are in the foreground and the Background with the leaves just make it Look like it stands out it’s almost a Design aesthetic onto itself of course If we look closely we can recognize These texts well they don’t really mean Anything but we have all the common Elements from this AI where we’ve got a Logo a menu a hero text a tagline Buttons what looks like a bit of a Slider this is where we’re at now right Now with AI art creating web designs That are just kind of mind-blowing I Jumped onto mid-journey which is where I’m generating all of these and I Generated quite a few different examples
This next one here is a for a mobile Application I actually typed in the Prompt a beautiful mobile application For fitness with UI and ux this is the Response I got back here are four Different images for four different Designs and if we look closely if I zoom In a little bit here you’ll see that They actually show both a dashboard as Well as a tracking section with Statistics and Graphics we have nice Display pictures and while the text Doesn’t seem to actually say anything This can give you a lot of inspiration Into building your own application if That’s what you’re looking for another Common thing in web design is admin Dashboards I got these generated when I Typed in website admin dashboard Beautiful You y ux these are four Dashboards which actually kind of look Out of this world especially this one on The top right it looks like something Out of Iron Man now what you can do with My journey is you can select one that You’ll like and you can upscale it so I Upscale this one over here and this Seems like it has a very structured grid That seems to be maybe a eight oh maybe A 12 group grid we’ve got a three by Four by four by four But look at this color design the colors That are used here basically adhere to Color theory we’ve got good contrast
Ratios for everything while these Numbers are like 377.43.4 percent it doesn’t really make Any sense this I think can be used more As inspiration to create your own admin Dashboard based from these designs and I’ve gone ahead and created quite a few Here another one that I came up with was A generation for a motorbike landing Page a splash page with a flag behind it Four generations came up and all of them Look really cool I like this a white Theme where we’ve got a bit of a header As well as a call to action button and We’ve got this US flag or English flag In the background but I personally Really like this one on the bottom right So I actually asked it to create four More variations and then from those four Variations to upscale the one on the Bottom right which I liked a lot and It’s almost as if he’s flying through This flag that’s exploding at super Speed I kind of want to use this to Create my own website design and I think I’ll do just that if you want to see More of these you can head over to Midjourney.com I actually generated Quite quite a few such as this one here For an AI app which I guess it assumed It was a app about AI this guy at the Top right looked really cute and I Actually generated this to its own Design and it almost looks like an app
Design inside of a phone that looks like An iPhone but it also seems like a 3D Perspective it just really looked cool You can head over to the community Unity Feed you can type in search results like Website and it’ll come up with Generations other people have like this One here for a modern website landing Page by ux designer and it looks like It’s almost been whiteboarded which is Cool there’s one here for a person Driving a motorbike which is another Cool one there’s one here for an AI That’s been upscaled and even this Japanese one of a samurai all of these Are very in theme with what they’re Representing like the samurai one has Very Samurai like photos or well I Suppose drawing and art with the right Colors now this probably has to be Customized a bit you can probably pull Out the images and while you can’t use The text because it kind of looks Nonsense you have all the placeholders Where you could create that content Yourself so let me go back here to my Home page and let me then head over to This splash of this motorcycle I’m going To copy this image and then I’m going to Pull this up in Photoshop for Photoshop I’m going to create I suppose a new uh Piece of content here I might actually Do it as a 1080p image then I’m going to Use adobe’s content fill to fill out the
Spacing this should fill out the rest of This page which it seems to have done Quite well then I’m just gonna head over And Magic Brush these last bits so that It doesn’t feel like there’s a line in The way since this is boring Photoshop Stuff I’m going to also fast forward This section while I’m fixing it all up Or getting it ready for a slash page and That looks really good and then I’m just Going to save this as a JPEG I’m going To build this website without using any Code I’m going to use editor X I’m going To select to add an image and I’m going To just drag in this image over here Select it to change it and then I’m Going to upload this image that we just Created as a splash image this can be The start of this website design and we Could even follow the same formula that We saw the AI generator with the hero Section and everything the same way I’m Going to expand this out to utilize the Whole room here and I’m going to remove The logo and the header I want this Section to be a little bit larger so I’m Just going to drag it down a little bit And then after that I want to also Change the focal point for this image to Be more focused on the left hand side With the driver to be more on the right Hand side if possible Now with that done we might as well Start adding in the content itself so
Here on the left hand side I’m going to Put in the title very similar to how we Had the design over here a white text Splash and we can say learn to race sure That can be fine we’ll do a white color And I might even make it a little bit Larger here as a heading 1. so that Looks pretty good Um it’s not white so let me just update That to be white again and I probably Want it to be a little bit smaller so Maybe 64 pixels would be just about Right Then after that if we go back to the Design we had a bit of a tagline there So I could add that in underneath I’ll Select add I’ll do paragraph let’s Shrink this size down a little bit I’m Going to set this again to be the white Color but I might add some opacity to it And for the opacity I think what I’m Going to do is uh hmm I guess I could select a variant of the Color because it is kind of like a Yellow color so if I select a slightly Orange yellow color that might look Better oh yes that definitely looks Better And I might remove it so it’s just two Lines of text Finally I think there was a button Somewhere there wasn’t a button but That’s okay I’ll add a call to action Button here and I think I might just
Make this button yeah black looks good Now I think that’s the design already More or less created hopefully this Gives you some insight into how AI art And web design is changing the future of How websites will be designed as well as Developed together with no coding tools We can create websites that look unique And interesting in more and more ways I Hope you guys enjoyed this video if you Have feedback or if you want to see more Like it let me know in the comments Below and don’t forget to like And Subscribe thank you
