How I design websites with AI.

Creating art with generative AI has evolved so much in the last 18 months, from the struggle of writing Midjourney prompts in a Discord server to describing the kind of art and illustration that you want to create in a highly intuitive AI tool, just like you would do on ChatGPT or Prompt. This is opening a whole new world of possibilities in the creative space. In this video, I'll show you how I use AI art to design highly polished websites by redesigning the landing page of an AI startup using generated AI illustrations powered by Recraft. Recraft is a generative AI design tool that lets you create and edit digital illustrations, art, and 3D graphics however you want by giving you full creative control. Let's get into it. So the website I'm redesigning is a landing page for an app that helps users get over a writer's block by recording their thoughts, which is then converted into writing with AI. Let's go through some things that I think that we should improve with this website. Firstly, here at the hero section of the website, I I really do not know what is happening here. This phone screen that is on the hero section is just so bland. It has something here called doing the magic, but is it trying to show like what the interface is? What is really happening here? I like the fact that they have like this background cards here that really shows that, hey, you can have an idea here, record that idea, and then that idea becomes content. That really works, and I think we're gonna keep that. At the top here, we have the download button, which is the main call to action. So it's fine that they have the download button here. Under that, they also have a social proof that shows that 2,000 content creators have already used this app. I think that is good as well. We'll also keep that. I'm not a big fan of the font that is used here. Very subjective opinion. I just think there are better fonts, but I also see what they're trying to do with the font because they're trying to make sure that they have the same round corners or round edges that they have with the font with the logo. So they're trying to match the font and the logo. So maybe we can find a circular font that doesn't exactly look like this. If you scroll down through the website, you would see that the main website itself is just so bland. They have a lot of interesting features, but I think they failed to visually represent the features properly. I like the fact that they have like these videos that actually show the features. They have videos here. The copies are really good, but everything just looks like really bland and it doesn't really make these features look interesting. Also, once you leave the hero section, you don't really see the download button again. So you might read this content and you feel like, oh, this is interesting, now I want to download. I need to make it easy for you to download. So I could just introduce like a download button somewhere here and maybe alternate that as well and maybe introduce another one somewhere here, that kind of thing, just to make sure that for each point that you show or each value that you show that the app has, let them know that they can download the app. So those are one of the things that we'll fix as well. Now when you get to the bottom, you just see the footer. But before getting into the footer, I think there's an opportunity to sort of introduce testimonial section in this middle so that you can actually show proof of other people that have used the app and how the app has transformed their content creation strategy, or how it has helped them journal or record their thoughts or become better writers. These are the things I want to introduce before just showing the footer. Something that I really like is the content that is used all through, so I'll keep all the copy. I'm going to take some inspiration from websites like Intercom and OpenAI. I really like how these companies have used AI-generated art and illustrations to elevate the visual design of their websites. Intercom is one of the biggest customer support companies in the world, and they are really bold and daring in their use of AI. I really like how they've used art to create contrast between the background and their content. It does make the content stand out, and I think we can definitely apply this in our design. OpenAI, on the other hand, also introduces lots of amazing art generated by AI on their website, and it's just so visually appealing and clean. This style of website design is becoming really trendy, especially for companies that have AI at the front and center of their solutions, and I believe it's their way of showing the capabilities of AI. I mean, if you say that your solution is powered by AI, then why not show other ways that AI can make your website look cool and make your products look interesting? Interesting and attractive. You really do not want to sleep on this trend, and this is where a tool like Recraft can be very instrumental. With Recraft, you can generate different styles of art from abstract paintings to vector images to mockups, and you can even upload an image to create the style that you want. You can also upload multiple images to create a blend of styles. I mean, that's exactly what stealing like an artist is about, so that you can create something unique. You don't want to take something from one source, you want to take it from multiple sources. Now let's redesign. Stick around to see how I use AI art generated by Recraft to elevate the visual design of this website. So to get started with the design, the first thing I did was to lay out a low fidelity version of the website in Figma. I think it's really important to do that because it helps me to just understand areas where I want to make changes, the kind of changes I want to make, and also makes me to make a lot of changes on the fly. So this is the background of the initial website that we had. And what I want to do here is to use generated art as this background here. I've also decided to keep the cards that we have, but I've decided to reduce those cards to like 4 cards instead of just having like the lots of cards that we have in the original design. The phone screen is still going to be there, but I plan to make that phone screen a lot more interactive. I'm keeping the structure of the website. Like I said, I'm keeping the copy as well. But what I plan to do here is to have the illustrations as the background of the images and videos that I used on the actual website, and I'm going to be reusing all those images that has been used on the actual website. I'm just going to download them and use them here. But what I'm doing here is to bring focus to the images by using a background. So I can just easily come here and say, okay, this is the content, and then this is the background that is going to be generated at. And I can do the same thing for this one as well. And then I'm also going to add a section here for like a testimonial. I'm not sure what I want to do with the footer yet. Maybe I'll bring back the app and also write it on the side, or I'll make it empty. But this basically just shows what the low fidelity looks like. And looking at this, I'm going to have one background here that is going to be an AI art. I'm also going to have another one here that's going to be AI art, and then I will have 4 other ones here. So it looks like we might be generating 6 arts in total. So now I will head over to recraft.ai. Now I'm in Recraft, so I'll just log in. Once I log into Reelcraft, it shows me my page where I can see a couple of tutorials or anything that I want to do. You normally have like credits to generate your ads. I have 28 credits for the free account. You can get— you get credit, I think about 50 credits every day. I've used about 22 of it, so I have 28 just now. You can choose to upgrade, and their pricing plan is also really good and flexible. So I'll go in and I'll create a new project. Now I am on the project dashboard. On the right here, you have some tutorials, but honestly, you might not even need any of these tutorials because it's just so straightforward. And at the top here, you have your menu for text, for a frame, and for uploading images, for moving things around. And then here you also have the kind of options that you can create. So you have different options. You can choose to create a raster image. You can choose to create an image set, a vector image, or a mockup. For raster image, you're basically just creating one image. And here is where you write your prompt for that image. And you can also choose like different kind of styles that you want that image that you create to look like. If you want it to be an illustration, you can go ahead and do that as well. You can also switch to vector, which means that you'll be able to create something that you can put into Adobe Illustrator to edit the paths that have been created. So that gives you like control over what you want to create. You can also come into my style here to actually upload your own style, or you can upload multiple styles so you can create a blend of styles for you. So we're going to go back and create a new project, and then once we do that, what I actually want to do here is to create a raster image, and I want the raster image to be my own style. So I'm going to come here and I'm going to create a brand new style. So I can say my own style, and then once I'm done with that, I would go in and upload the image that I want as my own style. So I have a couple of images that I've already downloaded here that I want Recraft to adopt. Once those images are uploaded, I can upload up to 5 images, and what that means is that whatever prompt I write for Recraft to generate is going to be a blend of all of the styles that I used here, which is the powerful thing about Recraft. Once that is done, now I have my own style. So let's go ahead and create the illustration or painting for our hero section. I can change the size here. Let's say I want the size to be about 1200 by 1600. I'll actually make it just a square, 1600 by 1600. That's fine. Now what I want to do here is I want to create something that is sort of like a calm vibe that represents writing, you know, something that represents writing in a calm environment. So this is everything I'm going to describe in the prompts that I want to write. So I'm going to write my prompt to say that a painting depicting a dense forest with soft brushstrokes blending from, um, dark blue to red. So I'll do that and I'm going to hit Recraft. I can choose the number of images that I want at the bottom here. I can choose 2 images so that way I can have images to pick from. I can also say I want it to be specific, I want it to be medium, I want it to be extreme. So I'll just hit Recraft. Um, so that has come up now. I have this and I have this. Mm. I'd like something that is a lot darker. I can say a high contrast painting depicting a dense— uh, I don't want it to be dense, I want it to be a scanty forest because I feel like this is too dense, with soft brushstroke going from, from dark blue to red. So I hit Recraft again and let me see what comes up with that. I think this is really high contrast, but for some reasons I'm still not feeling this. And the reason for me not feeling this is the fact that, um, I think for our background we're gonna have some text here and it might not really show well because of the white that we have here. Yeah, I think this kind of does it as well, but I think it has a lot of pink in it, so I'm gonna refine it. Yep, this is exactly what I'm looking for. This is exactly what I'm looking for. Something that would have like a high contrast so that my text can sit on top of it here, but we also have like a blend of like other colors. So we have the illustration for our hero section. I'm going to export that. So now I want to create an image set for the other ones. The image set is going to be for 4 images, so I wouldn't really need this other 2 out here. I just need this 4 here. So if I click that image set, it means that I can write different prompts for each of this. So I'm just going to go ahead and breeze through this so that I'll write the different kind of prompt that I'm looking for. So I can click all of this now, and then I can hit Recraft, and it's going to generate 4 images for me based on this prompt. So yeah, I have like the images that have been generated now. It Quiet day at the beach for the first prompt, sunrise at the beach with palm trees for the second, painting depicting sound waves for the third one, and I have a calm day in the desert for the third one. So I can just go ahead now and export each of this. Um, I think the painting depicting sound waves, I'd like it to have some red shades with red tones. So I'll just recraft that as well. Yeah, that looks more like it for me. So I'll go ahead now and I'll export all of this. So I have one last image that I want to create, which is the one that I want for like the testimonial. So now I'm going to export this as well and head over to Figma to complete our designs. So yeah, we're back in Figma now and what I've done here is to separate all the different sections of the website into different components here. So I just laid out to show exactly what I'm changing and what I've done. At the top here is the nav section. There's really not much navigation on this website except for the button to download the app for iOS. And then here is the hero section. I've updated the background of the hero section with the illustration that we generated, and I've also reduced the number of cards that we have at the bottom here. So we just have 4 cards instead of having everything. There's a lot more animation here. If I play this now, you see that this screen is actually a lot more interactive. So I found some animation that actually shows that something is happening on the app interface that we have there rather than just having something blank there like the other one. So if you also go down, the same thing has been done for every other part. So we have this section and we have like the video from the original website. It doesn't show here because it's a video, but when I play it, you're going to see how it actually shows. And I've added the backgrounds of the other artwork that we generated under each of that as well. And the same thing for this. Then we now have like a new testimonial section at the bottom here. And then when you also scroll up, we have the final footer section, which is similar to the footer that we had before. But I think just changing like the fonts and spacing it out properly and the fact that we've had a lot of illustrations and artworks, a lot of color at the top just makes this footer then stand out more. It doesn't blend in like the other one. I think I would change this background here because I think there's a lot happening with like the painting on the background here. So I'll change it in the actual design. Also, another thing that's been done here, as you can see, is that the font has been changed to a much more thicker font. It's still a round font, but not with like the round corners or round edges that the other font Add. Yeah, so we have what the actual final website looks like. So at the top here, you can click this to download the app. We still have the social proof for the number of people that have downloaded the app already. And if I continue scrolling down, you see now that the screenshot of the app that is used on the hero section is a lot more interactive, so a user can understand what this actually does. And if I keep scrolling, you're gonna see all of the other videos on the images playing as well. And I think this is just a much more vibrant way or a much more interactive way of displaying what this actually does, because I think there's now a lot more focus brought into this than how it looked like before when it was planned. And yeah, it just goes all the way down like that and like that. So let's compare what we have now with what we have in the formal design. So the formal design, this is what we have for that. So this is the actual website currently. This is what they have there and this is our redesign here. So we just scroll through. So what do you think about the redesign? What do you like or dislike about it? What other things do you think I should have considered? Let me know all of this in the comments and I'll be sure to get down into the conversation with you. If you'd like to get started on your UX design journey and you don't know where to start, then watch this video next and I'll see you there.