Build a custom website with no code! (Relume & Webflow crash course)

55,173
0
Published 2024-04-26
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 ๐Ÿ‘‰ bit.ly/3Uev1S2
Learn to design beautiful strategic brands with our Brand Design Mastery course ๐Ÿ‘‰ bit.ly/3UvS77U
Try Relume ๐Ÿ‘‰ bit.ly/flux-relume
Try Webflow ๐Ÿ‘‰ bit.ly/flux-webflow

๐Ÿ“ฑ Find us on SOCIAL MEDIA
Ran's Instagram ๐Ÿ‘‰ www.instagram.com/ransegall/
Ran's X (Twitter) ๐Ÿ‘‰ twitter.com/ransegall
Flux Academy's Instagram ๐Ÿ‘‰ www.instagram.com/flux.academy/
Flux Academy's TikTok ๐Ÿ‘‰ www.tiktok.com/@fluxacademy

All Comments (21)
  • @ThatsThoms
    A little tip for you - when you style the buttons in webflow you should add stroke to every of them. Even if you donโ€™t want stroke on particular type of button, add stroke with the same color as background to avoid different heights in buttons. Aside from that, the video is a perfect tutorial, love it!
  • @mindfulmilligan
    So awesome!! Ran.. process vids like this are my absolute favorite. Also.. I feel like you were a lot more positive and supportive of yourself. I feel like you are someone who can be hard on themselves due to high standards.. just know that everyone watching is very impressed and grateful ;) You rock Ran!!!
  • @user-pz9pz1ig5b
    Thank you for finally showing a good Relume style guide tutorial!
  • @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.
  • @davidgoult8694
    For context I havenโ€™t finished watching thisโ€ฆ Ran this is really good almost feels like it should have be the second level of the Webflow master class 4.0. It definitely gives OFF that vibe but more polished. โค
  • @DelfinaAlden
    Cannot express to you how much I was waiting for this video! I'm not a designer but need a website and was inspired to try using relume to figma to webflow after watching one of your older videos. It's been weeks of frustration & trying to figure things out (I wasn't familiar w any of this). This video answered so many of my questions and came just in time. Thank you so much!
  • @henrythomas7112
    Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
  • @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 ๐Ÿ˜
  • @faelanm
    I'm currently taking the Webflow Masterclass and these videos on YouTube are perfect bonus lessons. Thank you Ran.
  • @Lyf_of_Ike
    Best video I have watched on this channel, a true master class
  • 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.
  • @Erwin_t
    WOOOOW Amazing! How would you do it in Framer?
  • @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 โค๐Ÿ˜‡๐Ÿฅฐ๐Ÿ‘Œ
  • It would be really good if you start sharing your figma pages or project related assets.