how can you design a website that looks amazing
and takes just minutes to make creating amazing websites can take a lot of time there is making a
s map creating a wireframe making sure everything is SEO optimized and on top of that you need to
be actively looking for new clients you need to make money you need to be marketing yourself so
in this video I'm going to show you how you can create stunning websites 10 times faster and
thereby save more time and make more money so let's get starte
d all right so the first thing
that we're going to do is um visit Rel iio where we can access the site Builder I've already open
it up here and I'm just going to hit launch in here um I'm already logged in you probably
need to make a starter account or anything um to access the side Builder so you can go ahead
and do that and I'm going to hit new project up here and then it's loading the project and then
we get this little prompt bar where we can p um already fill in the company description
for
our website that you want to make and in my case um I'm just going to fill it in right here
really quickly I want to make a website for a finex startup that makes it easy to split your
transactions over several months and gives you personalized advice to grow your net worth um for
the number of pages I'm just going to leave the 5 to 10 here so that we can see kind of the range
of the S map and uh then when we hit generate s map it's already going to do its magic and then
super fast we
're going to get outlined all the sections that it's recommending is recommending
it for the side and so if you zoom out here a little bit going to see it's already finished and
it's done the home site and what's great here is it already gives us some like key indicators um
of what the section should have for example the how it work section section uh explain the process
of splitting transactions uh with a step by step by guide which I find really great it's a great
idea yeah once it's done
you can go ahead and look at the other ones it's going to recommend us an
about page Services page um pretty typical so a split payment service page like a sub page of the
services and the blog and so for any of this um if I would say for example um I want here another
service page I can just go a plus and um it's going to name it page eight but um you're just
going to fill in a prompt here um create another service service two and generate the page
and what you already see here is for for
every um every site it's generating the
nafar which makes kind of sense because all the sides should have the knf bar anyway
and yeah but this is kind of interesting and so if you want to see the other Pages
um for example the contact SE section let's generate the content here and see
what what it does um can take a little while okay so it fills it in pretty quickly and
yeah it's just super simple to use uh what I love about it is that you can reshuffle the pages
um you can delete some of
them you can edit them whatever you want the great thing is we can
change everything out um easily so if you're not quite happy with the AI inated contents um we
can of course do that for example let's switch out the newsletter section for something else and
we can even give it a color here and reshuffle it of course we cannot directly um regenerate it but
we can delete it and add another one so we just going to add like a benefit section here and it's
already filled in which is pretty gre
at so that's basically it for the S map um pretty easy stuff
pretty simple I think and once you're ready once you're happy with this we can go over to wireframe
and I'm just going to hit that now it's on here in the top and once you hit wireframe the great
thing is it already gives you all the um all the components that are in the reum library and it
will generate the site based on your s map which I think is super um super mindblowing and it's just
crazy how much effort you can save with t
his um so if you look here this is the here section then
there's like the subsections and everything so pretty cool stuff here we have the FAQ and yeah
everything is here and what I also really love about this is um for the one part that it already
generates some copy for it um for example simplify fins of our fex startup okay this is maybe a bit
generic but uh this a great example um how you can you can rewi it you can make it shorter
can fix the spelling or everything and yeah you can eve
n change the tone which I think
is great um let's try make it less generic and sell the benefit streamline your finances
with your Cutting Edge okay let's try another one um I'm I'm not quite happy with it um
let's just do it ourselves we can also do that no problem yeah I think it's that's all right
and yeah basically that's the like the wireframe um this is all the other sites we created for the
S map so this is great to have um but let's just focus on this one um I'm not quite sure about
this
header so let maybe switch it out to something else something that's a little bit more
interesting and for this I'm just going to go with this I think it's quite interesting
and yeah this like how we can already build the site let's just see if if we are happy with
everything I think this we going to make also a little bit more interesting you can also go
into the library itself and check out all the the components so what I really like is uh if
you go to the components and there the
re's lots of filters and stuff which you can find and
I really like this filter here The Uncommon because it basically gives you um components that
are more interesting or more like uncommon to use and so maybe just let's do something a little bit
cooler here I really like this one the header 80 so maybe let's remember this and go back and I
think we're going to use this for the the header part let's see header 80 yeah that's
great perfect and here let's see we going to choose also another
one oh
no I did it again we have to hit the replace yeah let's go with this card section here
and yeah that's basically it for the wireframe again very very simple very straightforward and
a great way to streamline the process I really like it um we can also add another wireframe
or another section everything so it's really customizable and that's great uh before we export
it I'm going to show you another uh secret that I found which I think is also mindblowing it's
super cool so if you go
here to the export um so the export button We have basically the figma
webflow we're going to look at this a second but what I think is really really interesting is
here the Excel sheet and I stumbled upon this on uh coincidence because I thought uh what is
going to export here and basically when you hit it um it's it's instantly downloading
the Exel and let's see what it basically does and it gives you a project pricing for the
S map and the wireframe that you created so let's say we're g
oing to have a a real client a real
fintech startup and they want to make this website then it gives you like here a recommendation um of
all the sites and everything and um everything how much to char to charge I think that's an amazing
starting point I wouldn't um take this exactly how how it is here but I think it's a great starting
point to know the price per page okay 7,000 total price would be 1 uh 21,800 okay um if you think
it's a little bit High maybe uh you have three different pr
ice tiers here in the sheets beginner
intermediate Advanced and um based on that there's like different price ranges this is a lot less
it's 2,800 and yeah I think it's just crazy how how much time you can save with with the tools
of reloom it's really great all right once we're happy with the wireframe we can go build and
design it and we have two options basically to export it to f figma or to weow um in most cases
I would recommend to go um with figma because you have a lot more flexibil
ity you can do a lot more
in the design and webflow Export is better if you already know what you want to design for and you
just need to get it done so let's do the figma um to do this you need to install the figma
plugin um but don't worry it's really really easy um you just go to figma and um you you go
to manage plugins and you type in reloom and I already have it here but you would just need to
run it um and then you get a prompt to log in and then the next thing you will see is alread
y uh
here you have the projects and here we see this finex startup which we just made um It also says
edited 1 minute ago so that's great we're going to click it um and we have the option to either
add the S map or the wireframe um in our case I I think we go for the wireframe already here and
then it's going to take a little while and it's going to insert all the all the components that
we um chose or the AI chose for us all right and now so it's basically done we have the site over
here
the full side and yeah it's pretty great um this one over here are the other pages but we are
not focusing on them right now so let's put on this one and and this is the mobile section which
I'm not massively focusing on either right now so this is like everything it brought in in here in
figma and in the meantime I created a small mood board um of just things I liked from dribble and
this just gives a like a small direction for the design and I really like this really minimal and
clean des
ign so that's one what we going to do um all right so let's get started uh before we we
dig deeper um we going to um create some colors for the design some color palette um and for this
there is another plugin that I can show you which is called GPT stylist um which basically lets you
create um a color palette for your design and I'm going to paste in the description for the business
and let's see what it comes up with all right okay um I'm not so sure about
this maybe we give it another tr
y all right let's go for one more I hope it
comes up with something good oh yeah this is cool this is good I like this and then um you just
create the Styles in here styles were created and then we should hopefully have it in here yep
this looks good this is from stylist this is probably already from redom and we can just go
in here and design everything all right so next thing we're going to do is change um change
the colors and what's great here is that the reum import already made this c
olor styles which
is really great so if you go to let's change the background uh primary background color should
be this dark one great and now we're going to change the text color the primary text color
should be white now let's see okay the primary link color should be let's try this one we
going to have some changes anyway the logo color should be white it's okay for now we're
going to keep it just like that it's all right and now we need to change all the fonts and
for here um there's
another great plugin that I can really recommend you to use and it's
called fonts changer and um what's really great about this is you just select an artboard
and you can change all the fonts uh just in one click okay so we're going to select the artboard
going to select robot to regular and change it too let's go with this one AR deer taking way
too long for this um font changes let's go for AR narrow this cool okay and for the other
one Roboto regular we're going to go for a cumin medium
let's go for cumin Pro regular so
now we already have a like a pretty good basic design Direction but we're still missing kind
of the content on the site and uh some images and also the company name and the logo
so let's do that for a second I already created some icons here which are pretty um
basic but also I think they fit kind of the wipe of the website and um so for the logo
we're going to just do a simple typographic one and let's call our company final which
is a pretty big basic um
but I think it fits kind of the WIP and we're going to go for
the thisp this font here AG grander narrow again let's see I think that's quite that's okay let's choose the same logo and for the
for the logo symbol we're going to use this here and yeah so this is kind of the basic logo that we're going to use let's maybe
make it a little bit [Music] smaller and it's a little bit hard to see here
because of the color let's make it black again and yeah this is the basic logo can put it
in here
and of course this is a little bit too big and yeah I think it works quite okay for
this is this is more than enough for a the test site now I'm I'm going to insert the images
in a second and be right back all right so now we're back um I just recreated this little um
section here the hero section and I think it already Works quite well um I didn't change all
the icons this would be this would take a little bit more time but for this demonstration I think
and we can see what this is capabl
e of so we have like a basic design Direction here and I think
now we are ready to bring it into webflow and actually build the site so the next step would
be to export our wirframe to webflow or our side to web flow so we can build it already and so
that's what we're going to do and so we back here in webflow we're going to export it and here
export it to webflow then it will tell us that we need to go to each page individually and copy
it to webflow so we go right here to the home site um
copy to webflow and then it's going
to tell us that what we also would recommend this is that we use the style guide um also big
recommendation um this is my neighbor and it's kind of annoying right now and what's so great
about this target is that you have a single place so you can change all the fonts and everything
so we're going to clone it right here and I'm hoping the neighbor is stopping soon create the
site and I'm just going to kill um name it final startup create it so now it's c
reating the site
but um of course it will be a blank site okay so now we have this EMP page and we can just go
ahead and um paste what we copied from raom and as you see here it's already um looking pretty
okay the layout is all here everything and so this is already good starting point also this
like hero interaction I think it's quite nice when you slow down and when you scroll down um
all the things float above the headline which is pretty cool and yeah so that's good and what we
need t
o to do now is change the Styles so we go here into the style guide and what's great about
the style guide is you can change everything from one single place um all the colors effects and U
ey elements so reloom is really and what I really like about um the companies that they always
improve um on everything so the so as you see here the sttigard was updated just a month ago
and really do their best to improve it all the time which I really love um but yeah so the
basically the next thing w
ould be we need to import the fonts and change some of the Styles
and change the topography and import the images so um I'm just going to do this in a second then
be right back so what I also really love about reum is that it gives you a lot of shortcuts
for annoying tasks for example um let's look at the website right now I've changed some of
the typography and everything and the colors um but what you see here is that still the logo here
is missing um so normally I would need to export th
e logo from figma and then import it here and
it is basically really a hassle and but what I'm going to do is here let's delete the old one and
then go to the logo here and select it the group um right click copy paste as SVG so it copies the
SVG code and then go in here and select the right um wrapper this is the this is the right wrapper
it should also be in the link um I copy paste it and now this only works if you have the reloom
extension enabled um but basically it asks you what size
you want to import it I'm going to pick
the icon large confirm and now we already have it here in the SVG as a link so this is like a little
bit too small though so I'm going to change the class to ion embed um x large um which is also
kind of not big enough so let's see if there's another one okay so if there's another a bigger
class it's okay we can just duplicate it and call it XX large and and then we're going to set it to
let's say 8 Ram or let's go for 10 let's go for 10 Ram only on t
he width though the height can
be six and then looking pretty good we have the logo in here and I'm just going to finish it
up and add our icons that we made before and the content here and then we're pretty much done so
basically um that's all done let's see um I've put in all the rest of the images and all the
fonts and everything um so if you scroll down here we have this really nice interaction where
like this images float above the headline and I think it's really a nice way and it's i
ncredible
that we um did all this in just a few minutes I mean this took like I don't know half an hour
and it's already a really solid site I think I mean there there's some content missing okay um
but you can I switch this out in maybe another hour and um it's really solid also it's already
responsive so if you go in here um everything is built responsive um ready for mobile we
have the images all the layout is all right to use and I think it's a really solid case
what we can now do now
is add some subtle in um subtle animations for example when uh this
comes into view it comes down down it comes in from the bottom um I think it's called the slide
in from bottom let's preview it I think it's quite good and then we can do this for all the sections
slide from bottom give it a delay of 200 seconds then we do the same name for this button group
where is it slide from bottom 400 then for like a small touch we make the same for the for
the Nar slide in from the top let's give th
is 600 and now we like this really move interaction um the nafar is not looking
so good so let's just do a fade and it let's make it 1,000 milliseconds
so everything comes in smoothly simplify your Finance St control over your netw worth and then
if you scroll down we have this interaction and I think it's it's looking pretty cool um let me
know what you think um I'm also I'm leaving a Link in the description if you want to clone
this um template it's a free clonable if you want to play wit
h it check it out and see what
you can do with it so this is really impressive let's imagine you work for a client and you
really want to bring down your time needed for the S map for a wireframe and everything
that's where reloom really shines it really saves you a lot of time and I think it's a
great tool um it brings down your time from a couple hours to a few minutes and basically
if you can automate the things that you need to do every time you can save a lot of time and
therefore mak
e more money so to wrap it up I hope you enjoyed this video if you did please
leave a like And subscribe if you want to see more content like this um also I'm going
to leave a link down in the description if you want to try out reum feel free to leave
any questions that you have in the comments and I look forward to seeing you in the next
video so stay hungry and keep [Music] creating
Comments
Is it paid?