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 loss.
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 her and then the mid journey bot will give me 4 image results, which I can then upscale or I can version them out. If I like a particular one here, I’m just gonna 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 gonna 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 typedashscale.com where it lays out all of the type skills for you. Here we’re gonna do a 16 point baseline and then we can start on our headline. So the H2 is gonna be 50 pixels. And then to create a type style, I’m just gonna go to the plus and call it H2. Done now. Just gonna 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 checks 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 gonna try this technique where 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 gonna drag over the layer, adjust it to 175 for the blur, and then finesse them just to match the reference. And then I’m gonna 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 microchip with a soft gradient, thinking it would simulate 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 and 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 Sarah, you don’t need Photoshop. Then with the P key, I’m going to start drawing the outline shape of the micro chip to create the drop shadow by removing the outline, adding an effect blur about 100.
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 gonna 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 ChatGPT, which is also a free software you can sign up with OpenAI. So let’s put in our prompt. I’m going to ask to write a headline that is 7 words based off of the alarm ipsom that we previously used. And then generating a couple different variations until one really stands out.
Next is a 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 premade 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. All right, so finishing touches, I’m gonna go add in some navigation, a blue button with rounded corners. And then we can use one more plugin 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 group 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 1 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 100, 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.