Relume AI Website Builder | $3,000 an hour

if you're a freelance web designer looking to raise your rates and make more money oh do I have a treat for you because in this video I'm going to show you how to raise your rates to $11,000 an hour how about $3,000 an hour how about possibly raising your rates to $5,000 an hour how you might ask what is this dark web design magic let me introduce you to the reloom site Builder it's an AI driven tool it's going to allow you to build your site map your wireframes your layouts inject all the content done by Ai and then immediately take that design and bring it into figma or potentially right into web flow style from there publish launch and get paid some of you out there are thinking that this is clickbait and this is not true I'm about to prove you wrong let's Jump Right In and let me show you the process of increasing your hourly rates and I want to give you an example a use case of how this might apply recently I went to a new Shave Ice place that's opened up in my town I'm actually wearing the shirt right now really like this this place a lot but what if I wanted to build this company a new website and I wanted to charge them $5,000 let's say well I could do it in probably about an hour of time and I could deliver it to them the next day and I could potentially get paid how am I going to do it well let's walk through the process let me introduce you to the new site Builder by reloom and if you don't know what reloom is reloom started out as a library kit that allows you to build components or take these pre-built components uh you can see that we have here all these awesome components and then immediately apply them into your webflow projects so what you're going to need for this is a reloom account you're going to need a figma account and you're going to need a webflow account this is how the process is going to go we can jump back in and instead of actually just building it this way they have their new feature which allows you to actually build projects or just click here on build a site let's click on build projects you can see we have a bunch of projects that I've been playing with already let's go ahead and build this shave ice one right now I'm going to hit new project it's going to open up the site Builder and now you'll see over here on the right hand side we get an AI tool that's saying generate a sitemap this is the foundation this is the start we want to tell it a little bit about this business and that way we can describe the company we can dictate how many pages we want let's just do something really simple like three and we're going to put uh a little bit about this Shave Ice Company now we've given it just a little bit of like a description of the company and we've said how many pages let's go ahead and click generate you're going to see the AI taking over and it's going to generate a s map with these three pages and suggestions you can see immediately it's suggesting all the different elements inside of each page so on our homepage that's saying let's do a hero that welcomes visitors with a captivating image and headline then a feature section talking about the Shave Ice then a benefit section Gallery you know a logo list a CTA all that kind of stuff okay now if we like this this we can just run with it if we don't like it what we can do is we could either you know continue generating all the pages if we did like it or we could rerun I'm going to rerun it one more time and just see what happens because I didn't like the logo list uh maybe we could use that potentially but I'm I'm going to see what it generates by doing it a second time okay so I can actually just use the tool and zoom in and out holding down controls is pretty cool and again we got hero Feature Feature list testimonial location that's looking better Gallery CTA and a footer okay I like that now what's really cool about this is we could it says locations menu and then you have the individual location pages and maybe products okay let's go with it um and let's say instead of Let's see we have locations menu we don't want to do the individual products I don't think it's really necessary so this maybe for like uh some other type of restaurant this might make sense but let's put like location menu and then let's do this let's do instead of that let's do I'm going to double click here and put about us I can generate let I can let the AI actually generate the locations page let's try that and so that's one option right um I'm going to do the same thing for the about us page and while I'm here on the menu and AI is doing its magical work I'm going to hit section here and when we open up section we get a bunch of opportunities here on the right hand side these are all blank sections these are the components that are offered inside of reloom these prefabricated uh components that we could just immediately stitch in to the layout now you know we're talking nav bars Footers all that kind of stuff but notice this we also have some Global sections nav barss and Footers those are Global across our entire site so they're going to stay consistent so we can do that but let's just go ahead and generate and see what happens we generate that and why don't we generate the location as well now while it's doing that it's going to generate our menu let's zoom in and if we want to we can actually click on a section and I can use the arrow keys to move these up and down or I could drag and drop them like almost like a Trello card here and there or I could bring it into another page if I wanted to so I can build out my sitemap here you can also if you want to you can uh it's going to generate content for US based off of these titles and based off of the text that's inside okay so let's not do features list but instead let's do how it works works and then we'll put uh come in select your flavor actually let's do first select your flavors second select your toppings let's just do something like that okay so uh and then let's let's be a little cheeky here and say third eat and enjoy okay or eat oh let's be a little bit more fun because this is a Hawaiian shave I ice Place eat I like this with Aloha you guessed it okay boom all right now we have everything we need I think I like it quite a bit let's say um so why don't we head over here and we're going to hit our wireframe you can see up here at the top we're currently building a site map as soon as we click over the wireframe the AI tool is going to take over and it's going to suggest these pre-built components inside of the reloom library here it is you can see all of them working at the same time this is where AI is going to become incredibly helpful for us as designers you can see how it's like really laying everything out perfectly for us it has pretty much finished uh designing the wire frames for and the layouts and everything for our uh our website I'm just going to zoom in here on the homepage we could take care of like all of it we do every page but just for this demo we're just going to focus on the homepage you can see it's dropped in a really nice uh header up here navigation dropdowns all that kind of stuff a really nice hero um like hero section we got a really nice left align two column got this three column thing now this is really similar to the site map where we can actually grab any of these and just using our arrow keys we can move them up and down and kind of organize but you'll notice also when I click on for instance this like hero image here um this layout that we have maybe I don't love this layout we could go over here to the right hand side and say replace component when we do that we get option for all of the different types of components that uh reloom offers right so maybe we want to do something a little bit like that like this medium length hero um maybe we want to do something like this that has maybe like a little bit more interest I like that let's pop that thing in there really really good lookout's also immediately injected some copy for us AI driven copy authentic tropical Shave Ice multiple locations okay now if we don't like that we can regenerate the copy simply by pressing here let's regenerate copy and see what it come what it comes up experience authentic tropical Shave Ice oh I like that a little bit better that's really really good now I'm going to come up here into the top left I'm going to rename this shave ice and that's important naming your project inside of reloom is important we have a couple of different options from here we we spent maybe 5 minutes 10 minutes doing this we got about 50 minutes left to reach that hour mark and style this thing out and get it up online one of two directions Direction number one is to take what we've done here in reloom and push it directly into figma and we can style it out we can play around and kind of uh experiment a little bit the other option is to push it directly into web flow let's start with figma and then we'll talk about if you like to just maybe design of the browser and push it directly up there the difference here would be if you already have some sort of visual direction or vision for how you want things to be you can just push it right to web flow and then start styling right there we're going to play around a little bit first inside of figma I'm going to show you this workflow right now so to do this we're going to head up to the top right hand corner I have a couple of options here we're going to export to figma or to webflow Let's export to figma first and when we do that it's going to say hey just make sure you install the figma plugin okay and we already have that plugin installed so what will happen then is it will open up not only the plugin but you're going to want to get the reloom library uh file here and when you open that up we'll just open up our figma file here you can see that this Pro reloom Library figma kit version 1.3 is the newest one that we're working with right now this is the one that comes with this welcome documentation tells you how to build things in reloom you also have like a style guide that's already built out you can see we've actually already messed with it a little bit beforehand but then you have like you know your thumbnail for this but look you have all of your different sections over here you can see we can take a look at all these reloom components features careers gallery all of these are listed here and you can jump in and see the different page templates if we wanted to play with those we can what we're going to do is create a new page in here I've created one called Shave Ice website and I've grabbed a bunch of colors and I used Adobe Firefly to generate a bunch of Shave Ice images I grabbed a palette from coolers really quickly I just looked tropical fun bam I found a color palette I brought it in and what I did was I immediately made Styles out of my colors See over here on the right hand side so I have loal local color styles and then I have like a color scale for like my purple or amethyst color and all the rest of the styles that are generated here are generated from the uh reloom Library so all of my texts and my heading okay so what we want to do is I just want to zoom out and get to a nice clear place and I want to open up the reloom library plugin okay when we do that it's going to ask me to log in and I just got to do a really quick connection boom we go back and we are logged in okay so we're here at the site Builder I'm going to close that because I already have that that little prompt right there was for us to get this file just kind of kick us out to the spot and look you can see the different projects that I'm working on right I can click on a project and it's going to load everything we've done in the project right so we have the primary site map that was the site map we created I can either add that sitemap right here if I want to I could add every wireframe if I want to or I can click into it and then I can get the individual Pages since we only really focused on our homepage let's just grab the homepage wireframe for now shall we I'm going to grab that wireframe I'm going to hit add wireframe and you can see immediately that reloom is going to go ahead and start importing that website wireframe for us boom there it is it's dropped it on the canvas you can see it's actually in the process of updating and it tells us at the very bottom that the page has been added okay so we can close this now and move this over to the side and you can see what's really cool is it also it gave us the mobile version which is super dope I appreciate that I'm just going to ungroup this really quickly and I'm going to get rid of my mobile version I'm not going to worry about that for now but now I have my local version now you might be asking yourself why is that button already the same color well I kind of cheated uh I was toying around with this beforehand and I just your next step is going to be to go into the style guide and you can see our entire style guide here has like all of our text it has all of our buttons and we're just going to want to restyle here now this is exactly the same process that you would do I'll show you later if you go right into web flow you're going to go immediately to the style guide change everything to make sense for your brand your colors and and then it's going to immediately apply across the entire website what I mean there is I came in and I rounded all these buttons I can grab all of these buttons here boom boom we're grabbing all of them right and we can just come down to our layer and make sure that we're using our purple or our amethyst color and we can make sure that we take that border off we don't need it anymore right we can do the same thing here we can grab all of these buttons and we can do the same thing turn that to purple we like that a lot and then your selection color that's the text inside maybe we want that to be purple and we can go across the entire thing now you'll notice when I go back to my Shave Ice website I have the buttons have been updated every single place right which is really really nice the next thing I need to do is update my textiles so that's a basic figma thing I'm just going to come over and I'm going to grab my headings and my text and I can grab my H1 like for instance this is a heading H1 this style why don't we actually grab that and we'll just do a quick edit right so what do we want to do we want to change it away from Roboto let's do like fear of Sands black something like that regular boom immediately I changed the text okay and we can just do the same thing here we can go into our H2 and we could change all of these to be our brand color boom we just change that as well and what is this this is our H4 let's change our H4 you'd want to do this for every one of your uh different type of graphic Styles boom we've changed that as well you can see how the site is starting to slowly transform now something that's a little bit different is notice that each of these layers are are components right now they're part of the reloom uh component set if you're just working inside of reloom normally this is fantastic because you can drag a component out you can kind of lay things out in wireframe and then just copy and paste directly into webflow but we might want to experiment a little bit here and play around a little bit before we get to web flow this is some of that exploratory work that you might want to do so with that being said I'm going to detach uh the instance of my header here and then that would allow ow me to come in and start to kind of like make some changes so maybe I want to do the same thing for my navigation and I want to get rid of that bottom navigation thing that's happening there or that bottom border maybe I want to come in and change the background color to be like this really off kind of like purple color light 50 purple amethyst that's already looking kind of cool um and then what I can do is all of these are probably laid out inside of Auto layout so keep keep that in mind uh we have some of our images I might want to just start dragging images in here uh from there maybe we want to we have a couple little elements that we prepared maybe I just want to bring those in you know just move through your entire project doing all of the design work and saying maybe I want this section to move from you know that kind of light color to maybe this like light pineapple color now we're starting to have a little bit of fun and build a website it may not be your cup of tea but we're doing it really really fast um and you can do this really fast right just like style through it make it happen do what you want explore but now let's talk about the second way that you can actually move your wireframes your layouts all of your site into web flow directly let's talk about that workflow okay so I'm back here in reloom and I have my like my site built I love it I'm going to go up to export again but this time I'm going to export to webflow and here's what it's going to say make sure that you copy and paste into web flow okay so to export wireframes rightclick on a page or section select copy for web flow and paste into into your project got it so this means we can rightclick on this and copy to web flow now it's going to recommend that we paste the style guide right we want to grab the the reloom library style guide we want to clone that okay when we click that it's going to open up a webflow clonable right which we're immediately going to want to do let's clone in web flow going to start a new project for us right so let's go ahead and create the site let's call this Shave Ice and create the site and again the reason we're cloning we're using this clonable is because it's going to have that style guide built right in and we can do those same things we did in figma except right here in web flow perfect okay so it's built our project it's loaded things up you can see the pages that I have in the left hand bar here are my home and I have a draft style guide so while I'm here in my home let's go to my layers let's delete everything that's there we'll click inside the body and I I copied from reloom I'm just going to paste right here and boom our site appears right immediately has all that basic styling everything like that we can immediately preview it we even get some of the out of the boox animations right there from reloom which is great the next thing we're going to do is really really simple we're going to go over to our style guide and we're going to now change all of these elements right so uh if you want to change like the color that you're going to use or you want to change the buttons like whatever it is come in here and let's just as an example let's just pick a a little bit of a different color of purple but we're grabbing that we're going to take the Border off beautiful just like that and uh maybe we could even then grab like the Border radius of these things and change it but anyways you can make all those changes in the style guide because guess what happens immediately over here boom they're immediately applied inside of your project again and now you're just doing whatever little bit of bits of styling you need to do to you know like actually make it kind of interesting right we could bring that that color down and boom we're building a website all right let's plus let's press preview and see what we got so far what's really cool is that we have built this in a matter of minutes and it's already fully responsive with a working navigation and all we'd have to do is just spend a little bit more time kind of like spicing up the layout adding our colors doing all of our brand work maybe reworking the icons and we already have content written for it we have have the whole thing pretty much done this is a really impressive way if you want to work with clients and increase your rate the way to do that is to automate a lot of the mundane things is to make the process faster is to leverage tools like the reloom library as well as new reloom site Builder to get things up quickly and then send that to your client as quickly as possible in doing so you are now increasing your hourly rate I could finish this website out maybe in another 35 or 45 minutes and I would be pretty much done there might be a couple tweaks here or there if I have to work on it for a second hour okay thanks for watching the video If you enjoyed it make sure to leave a thumbs up subscribe to the channel I do lots of videos about design and development and no code tools and processes just like this one then make sure you hit that Bell so you know when another one of these videos comes out if you want to try out reloom check the link down in the description I highly recommend it it's an awesome tool if you have questions leave those in the comments and I will see you in the next one

Channel: Jesse Showalter

Views: 208,567

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, modern ui design, relume webflow, relume figma, resume ai, relume library, relume site builder, website design ideas, website design in figma, website design course, website design process, website design tips, ai website builder

Id: 3fcjxaYE5aw

Length: 19min 58sec (1198 seconds)

Published: Tue Oct 24 2023