I used Framer AI to create a website… in 5 minutes

creating a full beautiful website by writing a sentence just a few years ago that felt like science fiction today we have framer AI framer AI allows us to click a button and generate a website from a text prompt once the website is created or even while it's creating we can go to the right sidebar and choose between different color schemes and different font combinations then when we have a style that we like we can just jump in and customize the theme for individual sections and that's honestly how easy it is so obviously framer AI is an amazing tool to create the base for your landing page and since it gives us the base in less than two minutes I wanted to see if we can now create a full startup page from scratch in just 5 minutes okay so let's hit start with AI so we get the prompt field here I'm gonna go to my secret document I'm gonna go back in here I'm gonna paste My Secret website here I I guess I mean it's not secret anyways a modern landing page for a startup called dimable then I add some context on top of that the more context you add the better your output is going to be so with that I'm gonna hit start and it's gonna start generating and you can see here based on the first result let's see if we like this I actually like this one but I do want to show you something if we don't like the result we just hit retry and it's Gonna Keep On generating things for us when it retries when it regenerates it's also going to change the fonts it's going to change the color palette so if you retry keep that in mind now I like this too I think this is cool with a big bold heading like this uh I think the font is okay but I don't really like this color scheme this is a bit better I think maybe we can get something darker in this theme yeah this I like let's change every section to this because this looks pretty awesome if you ask me so let's change them all so there we have a nice base and I'm actually gonna go back and change the fonts I'm not going to shuffle you can Shuffle like I did there but I'm gonna I'm gonna pick a specific font here I think this one is pretty cool I want something more techy for the body text so yeah this looks awesome too uh this is a bit too pink here I mean I like this pink but for this website I want to go just uh Dark theme so changing everything to Dark theme now let's populate it with some images so I'm going to go to my little library with images here I'm gonna paste them into my framer dock here drag them here I'll take the first one add it to my hero I'll set it to position absolute increase the size a bit put it up here maybe that looks pretty cool now this isn't super high in resolution so it doesn't look super clean but that's fine you get the deal uh these images here maybe we want maybe actually want assets here instead so as is here instead so I'll just add this uh I'll add this let's see here to increase the size I'll go into each one of these cards and just make sure that it's aligning to the left removing these images like this or maybe we just Center align everything uh if we have time one minute 45 seconds Tim you need to hurry up here let's get this centered too so that we don't waste a bunch of time like we're already doing and this text here and let's Center align that too like that okay we have something that looks cool cool cool cool I like this now a website is nothing if we don't add some Delight to it pizza too so I'll go to effects I'll say that this text here is going to have an appear animation it's gonna slide in from the bottom I'm gonna change the spring animation I'm gonna just go Loco here and change stuff I'll do the same I'll actually take this effect let's just see if it looks cool that looks pretty cool I'll take the same effect add it to all of these uh items here paste effect but for the pricing here we're gonna have a bit of a delay so 0.25 for this one we're gonna have even more of a delay so 0.5 and we'll see aha that looks pretty cool well again the image is in super high quality so I want to bump it down a bit before the time runs out I want to have some form of appear animation for this one too maybe it's scales in instead let's see what it looks like 60 and maybe a delay there too that's that's pretty cool I surprised myself there and yeah we could add this to everything to the full page adding animations based on this text prompt to framer AI we have a website that is I mean I can click publish here hit publish and I click publish publish and we go into the domain and we have a live website made in framer just mind blown now if you want to learn how to create websites like these inside of framer I have a playlist where I talk about that stuff until the next one though have a great life we'll talk soon ciao

Channel: Tim Gabe

Views: 19,017

Keywords: ui, ux, product design, ui design, ux design, framer, framer tutorial, framer ai, web design ai, web design tutorial, framer tutorial for beginners, design challenge, web design, framer website

Id: U2EVNlDzAJQ

Length: 6min 28sec (388 seconds)

Published: Tue Jun 13 2023