Build a custom website with no code! (Relume & Webflow crash course)
August 24, 2024 2024-08-24 23:30
Build a custom website with no code! (Relume & Webflow crash course)
In this course we’re going to be using Relume AI and Webflow to build a fun website for a Sneaker Museum!
I’m going to show you exactly how I think and work, so that you can not only improve the quality of your web designs but also increase your efficiency and get the work done faster.
CHAPTERS
0:00 Intro
1:18 Turn brief to moodboard
9:45 Create wireframes with Relume
23:40 Design the website in Figma
46:43 Build in Webflow
Learn Webflow the FAST way with our full Webflow Masterclass course 👉 https://bit.ly/3Uev1S2
Learn to design beautiful strategic brands with our Brand Design Mastery course 👉 https://bit.ly/3UvS77U
Try Relume 👉 https://bit.ly/flux-relume
Try Webflow 👉 https://bit.ly/flux-webflow
📱 Find us on SOCIAL MEDIA
Ran’s Instagram 👉 https://www.instagram.com/ransegall/
Ran’s X (Twitter) 👉 https://twitter.com/ransegall
Flux Academy’s Instagram 👉 https://www.instagram.com/flux.academy/
Flux Academy’s TikTok 👉 https://www.tiktok.com/@fluxacademy
source
Comments (36)
@Matan.Ohayon
I build using Elemntor. U think i should move to webflow?
@Sharmarke35
Hello there! I would like to know your opinion on which tool is better between Figma and Webflow. Thank you for your time and consideration.
@marchebbo124
Awesome, but would love to have the asset folder provided to us to avoid getting different images.
@Macsnack
I believe that it is not necessary to use an inspiration board, a mood board and a style guide. This is time-consuming and unnecessary. Using just a style guide should be sufficient.
@ahmedyahya3593
this is amazing video Ran!
@ahmadnadeem2502
It would be really good if you start sharing your figma pages or project related assets.
@Fluent_English_Club
Plz help!!!! 🙏
How can I connect my wrbflow login & signup pages to USIP or somewhere else???
@funktabulous
how does the style guide already exist? im stuck with getting that synced up with wireframes. someone please help
@samriddhyadav634
You have not provided the assets. Please provide them so that I can follow and build together.
@Ale-gh9wy
Is it possible to create a booking platform like Airbnb?
@carolinanoir3260
This video is complete gold! Amazing tutorial. Just a question, when I try to clone the style guide of Webflow it doesn't allow me as it says I've reached the limit of 2 unhosted sites. How can I fix this?
@fiftyshadesofurban
Thank you SO MUCH for this video. I just took the plunge and decided to fork over $38 to Relume so that I could import to Figma and Webflow, and I went through their getting started tutorials and everything in every video made sense except for the last video which was "Moving from Figma to Webflow" and I didn't understand why they said it's moving from Figma to Webflow but he started to create the site from scratch in Webflow and then said "If your project is in the Relume site builder just import it" and he clicks import… Then he says that if it's not then he proceeded to copy a bunch of components from Figma to Webflow. and I was totally confused.
He really needed to say what you said in a couple minutes in the beginning of the "Build in Webflow" section and now it makes total and complete sense. Also your process here seems WAY simpler than what he was doing but I honestly was so confused I couldn't trust that I had the right idea about what he was doing coz I was completed lost on that video.
This video explains it clearly and it seems it really is not much different from moving a site from Figma to Webflow without the use of the plugin, except that you already have the Wireframe and style guide in Webflow which makes it a lot faster already.
@fassie79
Thanks! Great video! Which AI tool did you use to create the images?
@YametzyAI-zv2th
What program/app did you use with the AI imagery?
@Resha-kq3oi
Hi ran, i want to ask..
On exibition section. How to make the picture animare? thx
@private_krapfen950
That's an awesome workflow! Can I use the Relume plugin in the free version of Figma, and can I use the plugin to export my site from Figma to Webflow also in the free plan of Figma?
@iAdeelSohail
Hello Ran, Thank you so much for this video. I liked it. I have a couple of questions for you and I would love if you can answer me in detail.
I am someone who has no experience in coding, designing, and development. I am someone who has done SEO on WordPress websites only. Even on that platform I never had any development experience. So my questions are.
1. Is this video for someone who has zero experience in coding, designing and development?
2. I am not sure if you were using the free versions of Webflow and Relume, as you just showed us developing 1 page. Since I want to start my agency I assume I have to purchase both of these tools?
3. Lastly, if I am purchasing Relume, do I still have to purchase Figma or can I work over the free version?
The Reason to ask you is that I am from a third-world country where a Dollar costs around Rs. 280. I want to start my agency but I have a very limited budget. Please help me with this. Please Be Honest. Your expert advice will help me in making decisions. Thanks
@akbarbadsha25
This video is really helpful as webflow designer. I was stuck and confused about the relume. But in this video you explained very simple and how the tricks works using relume from wireframe to design and to webflow, and the very interesting part was the animation on scroll body bg change and also the text scroll animation while scrolling. Thanks buddy , it’s super valuable content, thanks for your time. So much appreciated ❤😇🥰👌
@rhaney
my only problem with all of this is that there are so many different plugins, etc you have to know about to download. . Just seems like so many steps you have to learn when all of those plugins should just be part of the core in my opinion. This video is amazing and I've been a WordPress guy for 15 or so years so this is a huge learning curve for me, but this video is giving me hope that I can catch on pretty quickly. Thank you for your great content!
Kind of lame that after you import the figma over to webflow that you have to re-add all of the images.
@tonystarkmowa
please show the actual design that you are teaching at the beginning of the video
@allaboutislam3652
just wow,its so fast
@peterjacob4738
Where did you get the pictures you used……I wanna get mine from there too
@lenovogmail9272
so what was the use of Figma? why didn't you export the wireframes from Relume to WebFlow directly?
@tresvecesdos
Gracias Ran 👨💻
@skillfulwebdesign
Please Help! I'm a total Newb to Relume and Figma. Where do I find the pages you show in the tutorial, 01 Inspirations, 02 Moodboards, 03 Art Directions, 04 Wireframes?
@Franzx98
Hi Ran, here to say that you can just divide the pixel value by 16 to get rems. Also you can calculate them directly in Webflow just typing /16 + enter 😁
@maymemyintzaw851
Hi.Ran I enjoy learning webflow with your amazing tutorials. I have a question bro.I find difficuilt in pricing per page especially CMS powered blog pages .like main blog page and its 7 template pages .My per page price is $30 .My per page price is $30 .How should I charge for CMS powered pages.pls suggest for me.
@hamzitoo
can you provide this Brief document , so we can generated another version of it USing AI!
@chriswertz5825
This is such a great video, thanks for taking the time to make it. The switch to longer form on your videos has been a nice one. The updated Webflow Master Class is also so comprehensive now, but these vids are full of valuable nuggets l. Keep up the great work. 🫡
@benjaminbarros4068
Awesome tutorial, thanks! Just one question. What website are you using to create those 3D sneakers?
@Mr_wolf162
bro as a beginner can i use this method😊
@SonTran-dh9db
QQ: In post production phase when you are preparing your resource images to be plugged into the figma doc…What frame of thought are you in when deciding on the size/dimension of each image? Is there a standard or best practice based on popular aspect ratios?? Thanks for the wonderful tutorial.
@paulmuresan9523
What AI is doing is very basic. Stop calling it "revolutionary". Graphic on the left content on the right and the reverse with few cards section… WOW. Soo incredible. Just marketing (overhyping everything).
@henrythomas7112
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
@wladimirrahn6194
You can convert PX to REM right in the webflow designer. Type in your pixels, lets say 70. Then continue typing 70/16rem, hit enter, and the conversion happens automatically.
Great video Ran, absolutely love these. The more I see these, the more I want to do your courses. Keep it up.
@andrewmoreira8744
do the same thing, but this time with framer instead webflow.