How to Generate Web Design Using AI

welcome to my Channel today I'm excited to share with you how I generated this web design using artificial intelligence together we'll walk through the step-by-step of how I created this web design and by the end of this video you'll see how easy it is to create your own website design using these plugins and tools [Music] okay let's go to figma.com sign up with Gmail or create a username and start for free then let's go to midjourney.com and create an account which will automatically direct us through to the Discord Channel here in the Discord Channel you can find a newbie Channel there are several of them and this is where we will generate our images so to generate an image you type slash imagine and then put in the text that describes your image if you upgrade to a mid Journey subscription you can privately DM the chatbot for more images okay so I've entered in a text prompt hit enter and then the mid-journey bot will give me four image results which I can then upscale or I can version them out if I like a particular one here I'm just going to generate some more options using the same prompt and see what I get if you're not getting the image results you're after you can actually include an image link within your text prompt and then mid Journey will generate images based off of the image that you give it so I actually fed the AI specific image and it gave me a bunch of results and I really liked this one okay so we're gonna go back into figma and start a new design file by holding down a to create an artboard and in this case we're going to be using a 960 grid system but obviously feel free to make your own column structure and gutters this will be the foundation of our entire design layout okay so let's establish the type hierarchy I like to use this free tool called type Dash scale.com where it lays out all of the type skills for you here we're going to do a 16 point Baseline and then we can start on our headline so the H2 is going to be 50 pixels and then to create a type Style I'm just going to go to the plus and call it H2 done now I'm just going to repeat that process for the remaining type styles on the page including the navigation and edit the color the plugin called alarm ipsum is super helpful for mocking up text because you can select the text box and then it auto-generates the length of copy that you need to fill the text box instead of a regular gradient this background gradient feels more organic in shape so I'm going to try this technique where I I drop the different bands of color and then convert them into a series of rectangles so first let's get rid of this type layer and make a gray backdrop then going to just create a couple rows of rectangles fill them with the gradient colors and then add a blur filter to soften the colors 300 is good for now then going to drag over the layer adjust it to 175 for the blur and then finesse them just to match the reference and then I'm going to draw a rectangle put it underneath the grouped layers to create a mask and then I'm also updating the size of the artboard to 1040. next let's generate a hero image using AI all right so if we hop back over to Discord in the mid Journey Channel I created another prompt for a microchipped with a soft gradient thinking it would assimilate really well with the previous text prompt I really liked this design so then I decided to upscale it and to save it to my computer I just click open in browser right click and then save bringing the design back into figma in order to remove the background there's this plugin called icons 8 background remover and ta-da you don't need Photoshop then with the P key I'm going to start drawing the outline shape of the microchip to create the drop shadow by removing the outline adding an effect blur about a hundred for now we can adjust and then changing the opacity to multiply and put it underneath the layer of the microchip and for a more natural look closer to the reference I'm going to create a linear gradient instead of a solid fill and then I drop and adjust okay now the image is ready to be placed over our mock-up so I'm just going to reposition it and then mask it by creating a rectangle grouping the two layers putting the rectangle underneath the microchip layer and then using as mask all right let's reposition a little bit more bring our columns and our text back and it's looking not too shabby next let's generate some real text to generate real content for the text we can use chat GPT which is also a free software you can sign up with open AI so let's put in our prompt I'm going to ask to write a headline that is seven words based off of the alarm ipsum that we previously used and then generating a couple different variations until one really stands out next is the subhead copy and I asked it to shorten it a little bit knowing our mock-up had shorter text and then the two supporting paragraphs for the right column and then copying pasting into the design the design feels a little bare so let's add some bullet points to add icons let's use the plugin iconify it's a free library of pre-made icons that you simply search for and then drag and drop in the design and then let's repeat this for the rest of the icons jumping back into chat gbt I'm going to ask the chatbot to create copy around the specific icons and then copy and paste it into the design if you really want your design to be professional grade you should use this plugin called contrast where you eyedropper over your font colors and then the plugin automatically checks that your colors meet accessibility standards so it's legible for the majority of people and you'll notice I kept getting a red fail error so that means that there wasn't enough contrast between the font color and the background color so I just decided to add a white background and then it turns green alright so finishing touches I'm gonna go add in some navigation a blue button with rounded corners and then we can use one more plug-in called glyphs for a copyright symbol great we are pretty much done with the design it would just be a nice Finishing Touch to prototype it with a subtle animation so to do that we will group the layers that we want to animate duplicate the grouped layers right click create component right click add variant if we click on the main component go down to this Dot and then click and drag we can create a prototype animation for after delay and we'll keep it at one millisecond the default has smart animate on ease at 800 milliseconds then we'll go back into the design tab make the opacity zero so that it will animate from zero to a hundred select the component and then go back to the original design layers right click and paste to replace have a duplicate artboard of your full design because the animated version hides all the layers now hit play and we have the final design here it is side by side don't forget to subscribe to my channel where I will be sharing More Design software and tools that you can use to incorporate in your own designs thanks again for watching and I'll see you in the next video [Music]

Channel: Creative Shimmy

Views: 24,762

Keywords:

Id: a_Q4avROZW4

Length: 9min 12sec (552 seconds)

Published: Sun Jan 29 2023