Derek Siu | Webflow & Web Design
Derek Siu | Webflow & Web Design
  • 94
  • 152 870
How I Built QuantumRevenues.com – Webflow Showcase & UX Design Insights
In this video, I take you through the process of designing and building QuantumRevenues.com in @Webflow. From conceptualizing the layout to implementing custom features, I’ll share how I created a site designed to elevate Quantum Revenues’ brand and convert visitors into clients.
This tutorial-style showcase covers everything from responsive design to Webflow-specific tips that make the site stand out. Whether you're a Webflow beginner or looking for ideas to improve your own projects, this video is packed with insights and inspiration.
🌐 Check out the site yourself here:
www.quantumrevenues.com/
👇 My Involvement / Key Features:
- Website Design (UI/UX)
- Webflow Build
- Advanced cursor
- Particle.JS integration
- Client can easily edit the site using the Editor
- Mobile Responsiveness
- Advanced Interactions & Animations
- Basic SEO optimization
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
💻 Hire a Freelancer on Fiverr:
fiverr.grsm.io/k8bhq1js4hmx
👉 Try Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
📽️ Want to record a video like this? Try Tella and get 30% off:
tella.tv/?via=derek
--
📚 Time Stamps:
About Quantum Revenue: 00:00
Brand Identity: 1:00
Landingpage Walkthrough: 1:38
Challenges & Mobile Responsiveness: 8:05
Closing statements: 6:00
--
*Disclaimer: Some of the links in this description are affiliate links, which means I may earn a small commission if you make a purchase through them. This comes at no extra cost to you and helps support the channel. Thank you for your support!
✌️ Peace be with you
--
#WebflowShowcase #QuantumRevenues #WebDesignPortfolio #WebflowTutorial #WebDesignCaseStudy #BusinessWebsite #WebflowProjects #WebDesignInspiration
Переглядів: 70

Відео

Custom Cursor in Webflow Made Easy: Beginner’s Guide
Переглядів 122День тому
Want to make your @Webflow website stand out? Learn how to create a custom cursor with this step-by-step tutorial! Perfect for beginners, this video covers everything from design basics to implementation, helping you add a unique touch to your website. Whether you’re building a portfolio, a business site, or a personal project, a custom cursor can enhance your user experience. Watch now and ele...
How I Built Kalotravel.com - Webflow Showcase & UX Design Insights
Переглядів 208День тому
Sharing my @Webflow development process for Kalo Travel Co. A luxury travel company offering Bespoke travel packages. 🌐 Check out the site yourself here: www.kalotravel.com/ 👇 My Involvement / Key Features: - Website Design (UI/UX) - Webflow Build - CMS Setup - Advanced CMS Filter integration - Client can easily edit the site using the Editor - Calendly integration - Mobile Responsiveness - Int...
How to Create a Smooth Accordion Animation in Webflow
Переглядів 1372 дні тому
In this comprehensive Webflow tutorial, I’ll show you how to design a smooth dropdown animation for your accordion or FAQ sections. You’ll learn to set the height from 0px to auto, creating a seamless user experience. Perfect for beginners and experienced designers alike, this step-by-step guide will help you enhance your website's interactivity and visual appeal. Check out my previous tutorial...
How I Built @Vividize's Website - Webflow Showcase & UX Design Insights
Переглядів 12614 днів тому
Sharing my @Webflow development process for @SuperManBen@Vividize an app for Learning Mandarin Chinese fast. I’ll dive into my approach and the features that make this site unique. 👇 My Involvement / Key Features: - Webflow Development (Figma to Webflow) - Swiper JS integration - Mobile Responsiveness - Video playback custom code - Dynamic scaling (EM's / VW) - Cookie script integration - Inter...
How to Create Text Stroke Effects Natively in Webflow Without Custom Code
Переглядів 5214 днів тому
Discover how to apply stunning text stroke effects natively in Webflow’s Designer, eliminating the need for custom code. In this tutorial, I’ll walk you through the step-by-step process to enhance your typography and elevate your web design projects. Perfect for beginners and experienced designers alike, learn how to add professional-looking text strokes to your Webflow projects today! Check ou...
How I Built www.shaybenmoussa.com.au - Webflow Showcase & UX Design Insights
Переглядів 8621 день тому
How I Built www.shaybenmoussa.com.au - Webflow Showcase & UX Design Insights
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
Переглядів 12521 день тому
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
Переглядів 98Місяць тому
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
Pretend to be a millionaire using the Inspect tool
Переглядів 52Місяць тому
Pretend to be a millionaire using the Inspect tool
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Переглядів 195Місяць тому
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Переглядів 6273 місяці тому
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Webflow Showcase: Myac.co
Переглядів 1033 місяці тому
Webflow Showcase: Myac.co
Error 404 page in Webflow
Переглядів 6393 місяці тому
Error 404 page in Webflow
Webflow Showcase: pmreconference.com
Переглядів 903 місяці тому
Webflow Showcase: pmreconference.com
How to upload a PDF file to Webflow
Переглядів 1,1 тис.3 місяці тому
How to upload a PDF file to Webflow
Webflow Showcase: Slowtalk.us
Переглядів 574 місяці тому
Webflow Showcase: Slowtalk.us
Prevent page scroll on Webflow Modal (using Chat GPT)
Переглядів 3764 місяці тому
Prevent page scroll on Webflow Modal (using Chat GPT)
Webflow Showcase: SkiTutor.com
Переглядів 724 місяці тому
Webflow Showcase: SkiTutor.com
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
Переглядів 2294 місяці тому
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
Webflow Showcase: Alphatrend.io
Переглядів 664 місяці тому
Webflow Showcase: Alphatrend.io
Compressing CMS Items (Images) in Webflow CMS
Переглядів 2134 місяці тому
Compressing CMS Items (Images) in Webflow CMS
Webflow Showcase: Philippstrucking.com
Переглядів 764 місяці тому
Webflow Showcase: Philippstrucking.com
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 1
Переглядів 1594 місяці тому
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 1
Webflow Showcase: hamiltonbars.au
Переглядів 1054 місяці тому
Webflow Showcase: hamiltonbars.au
Building a Basic FAQ Accordion in Webflow: A Step-by-Step Tutorial
Переглядів 3 тис.5 місяців тому
Building a Basic FAQ Accordion in Webflow: A Step-by-Step Tutorial
Webflow Showcase: Visa3i.com
Переглядів 2305 місяців тому
Webflow Showcase: Visa3i.com
How to Limit Characters in Webflow Form Fields Natively: A Step-by-Step Tutorial
Переглядів 4315 місяців тому
How to Limit Characters in Webflow Form Fields Natively: A Step-by-Step Tutorial
Webflow Showcase: whistlerstreettattoo.com.au
Переглядів 565 місяців тому
Webflow Showcase: whistlerstreettattoo.com.au
Webflow Tutorial: Tab Change Interactions
Переглядів 1,8 тис.5 місяців тому
Webflow Tutorial: Tab Change Interactions

КОМЕНТАРІ

  • @genovevalente
    @genovevalente День тому

    I actually didn't like this update, don't believe it was needed and webflow has other things more important to improve probably

  • @GermanLazarev
    @GermanLazarev День тому

    Bro bla bla bla how to make this Interaktion 😅

  • @roving-camera_72
    @roving-camera_72 День тому

    I found this tutorial to be very useful and I will use this effect soon. Thanks!

  • @Pedroso47
    @Pedroso47 2 дні тому

    I love you

  • @bernardopaulojr5570
    @bernardopaulojr5570 2 дні тому

    Easy to understand and follow! Another learning! Thank you sharing your knowledge!

  • @FlowVeeran
    @FlowVeeran 3 дні тому

    is the torch effect pure css Make a tutorial please

  • @FlowVeeran
    @FlowVeeran 3 дні тому

    going to watch the scroll tut i was wondering on how to accomodate the nav length

  • @tscolasolutions
    @tscolasolutions 3 дні тому

    BACKUP

  • @1azjoy
    @1azjoy 3 дні тому

    Good job you did there, can you make some lessons on how you build it from time to time?

    • @dereksiuau
      @dereksiuau 2 дні тому

      This is an interesting idea - can you expand? Like a timelapse with my voice over recording or something?

    • @1azjoy
      @1azjoy 2 дні тому

      @@dereksiuau Yes, something like that, or even a video about your approach on building a specific section or a feature you thought it was challenging. thank you again for what you are doing

  • @Tommytom199
    @Tommytom199 5 днів тому

    How i remove that scrow line bellow site when i made this loop?

    • @dereksiuau
      @dereksiuau 4 дні тому

      If you are talking about a horizontal scroll bar on your website. Then that is easy, it just means something is going outside of the screen (body). So you can just make a page wrapper div set width to 100% set overflow to none (which clips everything.

  • @FlowVeeran
    @FlowVeeran 5 днів тому

    Bro dropped banger regarding componentizing the cursor.

    • @dereksiuau
      @dereksiuau 4 дні тому

      Always use components lol

  • @bernardopaulojr5570
    @bernardopaulojr5570 5 днів тому

    Very helpful! Thank you for sharing! 🎉

    • @dereksiuau
      @dereksiuau 4 дні тому

      You are so welcome! - thanks for the comment.

  • @tscolasolutions
    @tscolasolutions 7 днів тому

    Bro slid in his own site lol 🔥good stuff

    • @dereksiuau
      @dereksiuau 6 днів тому

      Haha gotta self plug - you know how it is lol.

  • @lucaadesigns
    @lucaadesigns 7 днів тому

    soo the day i start using webflow again it changes?! i thought i was soo behind and that this'd existed for a good while LOL changing the preview position is baffling to me. like, why?

    • @dereksiuau
      @dereksiuau 6 днів тому

      Hahaha - I'm sure Webflow had a reasoning, I suspect to make their upsell functionalities (Locale and Analytics) more noticeable. But after using the new UI - I'm sure you will get use to it :)

  • @cyprienaubin1836
    @cyprienaubin1836 7 днів тому

    Nice, thanks for you work !

  • @kenzoshirai7810
    @kenzoshirai7810 7 днів тому

    everything redirect to their homepage now. is this going to be fixed anytime soon?

    • @dereksiuau
      @dereksiuau 6 днів тому

      Really wow - Actually I've seen the homepage be on the Webflow canvas before. You can refresh the page and it should be fixed!

  • @tscolasolutions
    @tscolasolutions 8 днів тому

    I actually am fine with this honeslty. Nothing crazy. When are the changes going in effect ? And is analytics something you have to setup ? Super excited for that

    • @dereksiuau
      @dereksiuau 7 днів тому

      Yeah it seems very different but we are creatures of habit so I'm sure we will all adjust.

  • @seixinhas
    @seixinhas 8 днів тому

    Thanks man, we are working with Webflow on university, and I wanted to do this so bad! Thanks!

    • @dereksiuau
      @dereksiuau 7 днів тому

      Glad it was helpful! Webflow university is a fantastic tool btw

  • @FlowVeeran
    @FlowVeeran 8 днів тому

    Consuming Bro's video made me think UX is as easy as he speaks . bro casually inserted UX principles especially on the gallery image stacking section and double CTA section.

    • @dereksiuau
      @dereksiuau 7 днів тому

      Hahaha - if this is a compliment thanks!

  • @JBurroughs17
    @JBurroughs17 9 днів тому

    Only problem with this is that it sorts images top to bottom instead of left to right. So if you want your layout to be specific and change with scaling, it completely breaks the order.

    • @dereksiuau
      @dereksiuau 4 дні тому

      Interesting, do you have a solution for this?

  • @1azjoy
    @1azjoy 9 днів тому

    Thank you for sharing this, learning a lot from you

    • @dereksiuau
      @dereksiuau 8 днів тому

      Glad you are learning!! & Thanks for watching / commenting.

  • @madewithbill
    @madewithbill 9 днів тому

    Clutch tip!

  • @Aliencancode
    @Aliencancode 9 днів тому

    Sir i have a question, What makes a person job ready as a Webflow developer ? Like what things he/she should be good at before applying for jobs, I am beginner and i always get stuck and think how much do i have to learn?

    • @dereksiuau
      @dereksiuau 9 днів тому

      If you are talking about working for someone else (ie. Company): - Willingness to learn and work - Getting your foot in the door with a good resume / portfolio (doesn't have to be real client work it can just be your personal projects). As for the actual Webflow skills, personally I think: - Confident in turning a website design into a Webflow site including coding the site with some sort of structure (eg. Section > Container > Item) and using classes efficiently. - Confident in making the website mobile responsive and adding animations - Confident with the Webflow CMS. If you need any more specifics let me know :)

    • @Aliencancode
      @Aliencancode 9 днів тому

      @@dereksiuau Thank you so much for this detailed reply! I really appreciate you taking the time to guide me. I'll focus on building a strong portfolio with personal projects and improving my skills in structure, responsiveness, animations, and CMS as you mentioned. For third-party integrations, I'm planning to learn tools like Zapier, Airtable, Memberstack, and Finsweet. Do you think there are any other tools or integrations I should explore?

    • @stevejohns3410
      @stevejohns3410 4 дні тому

      Nice website. I have a question, if the header is sticky, why have navigation menu (quick links) on the footer?

  • @FlowVeeran
    @FlowVeeran 12 днів тому

    Bro is so frustrated XD

    • @dereksiuau
      @dereksiuau 9 днів тому

      Ahhh sheeet this is embarrassing haha, this was my bad I was not having the best day lol (I re-recorded it a lot of times). Rest assured this video is the last one with that level of quality.

    • @FlowVeeran
      @FlowVeeran 8 днів тому

      @@dereksiuau being authentic always gets you the right ones so don't worry man you did great

  • @DiveSafariNZ
    @DiveSafariNZ 12 днів тому

    Thank you

  • @seize2179
    @seize2179 13 днів тому

    Great tutorial! How did you instantly put the padding on all sides?

    • @dereksiuau
      @dereksiuau 9 днів тому

      You can use a shortcut hold shift while dragging anyside and it will auto put padding to all sides. Give it a try yo!

  • @chetcutii
    @chetcutii 13 днів тому

    very helpful, keep the tutorials coming!!

    • @dereksiuau
      @dereksiuau 9 днів тому

      Thanks, will do! If you have any suggestions lmk.

  • @skou017
    @skou017 14 днів тому

    Nice one man!

  • @selvaconnections
    @selvaconnections 14 днів тому

    Thank you so much! Exactly what I needed :)

  • @webdevSolution
    @webdevSolution 16 днів тому

    Could you complement it by showing how to make the pop-up open after 10 seconds, for example?

    • @dereksiuau
      @dereksiuau 15 днів тому

      Using the same premise but for the video around 7:45 when I set up the interaction in my case Display:None to Display Flex you can add a delay. Let me know if you want me to make a tutorial on this, perhaps you are after a popup that opens automatically after 10sec? (without clicking any buttons or anything).

  • @adams.george
    @adams.george 16 днів тому

    Great work, Derek. Love the vibe and aesthetics. I've been learning Webflow since over a month now, but see a lot of people using Framer these days. Which one would you recommend to get freelance gigs? Also, could you make a video on how you used VW for better responsiveness?

    • @dereksiuau
      @dereksiuau 15 днів тому

      Thanks for the comment Adam - I have noted to make a video on the explanation of Viewport Width (VW). At the time of posting this comment, I have never used Framer before so I can't speak on it unfortunately :( I just personally like Webflow and am biased lol. But I'm sure there are pros and cons to everything.

  • @irshad7895
    @irshad7895 16 днів тому

    well done!

    • @dereksiuau
      @dereksiuau 16 днів тому

      Thanks for the praise and comment!

  • @Neutrino-xw6jl
    @Neutrino-xw6jl 17 днів тому

    This is really well done

    • @dereksiuau
      @dereksiuau 16 днів тому

      Thanks! The design was already done by client, so it was just turning it to life.

  • @Aliencancode
    @Aliencancode 17 днів тому

    Amazing work, love the color combinations, the overall layout and all really fits with brand's identity, and Thanks for connecting on LinkedIn

    • @dereksiuau
      @dereksiuau 16 днів тому

      The design was indeed really well thought out and much effort was put into the thought process by the CEO. It goes to show that design reflects the company quality / the app etc.

  • @StarscapeDigital
    @StarscapeDigital 18 днів тому

    Thanks

  • @98Nedeljko
    @98Nedeljko 18 днів тому

    I encounter an issue when I open the menu on phone and then scroll down the logo and menu btn both go up with the page. I don't want to make my navbar sticky because it doesn't work with my design... Any solutions?

    • @dereksiuau
      @dereksiuau 15 днів тому

      You could make the menu sticky but not scrollable by using custom code. So when the user taps on the hamburger icon the page (ie Body) is not scrollable. That is what I can think of immediately. Let me know if you want a tutorial.

  • @FlowVeeran
    @FlowVeeran 20 днів тому

    Nice one

  • @Squidlord1738
    @Squidlord1738 21 день тому

    If the space is too much on a 1920px+ monitor just widen or remove the max width on the container holding each page section, downside is you have to make sure the images have set widths or are in divs with set widths cause they’ll get stretched

    • @dereksiuau
      @dereksiuau 20 днів тому

      @@Squidlord1738Of course they are ways around this like you mentioned. But sometimes it’s not as easy as expanding the containers width (or adding a new breakpoint). Cause the design will get ruined (aspect ratio) so unless you are using a responsive unit like VW for everything (which has pros and cons) the reality is effort needs to be made to resize everything for a bigger screen.

  • @skou017
    @skou017 21 день тому

    I kinda like the space on the sides. Mainly because super long horizontal screens require me to tilt my head sideways to read. Having it contained in a way makes it easier for me to process. It is indeed a slick template though!

    • @dereksiuau
      @dereksiuau 20 днів тому

      @@skou017 Nice good to know you don’t mind the space. It’s just people are having wider and wider screens haha. I think it just makes sense to have space on the sides but the question remains how big should the space be? I’m referring to the max container width .

    • @skou017
      @skou017 19 днів тому

      @@dereksiuau People who are more likely to use ultra-wide screens often do so to replace the need for dual monitors. Even with ultra-wide screens, there doesn’t seem to be a strict rule for setting specific spaces-it’s more about embracing the concept. For instance, with an ultra-wide screen, users are more likely to split a window into half or a third of the screen, which still aligns with the aspect ratio of current full HD screens. I personally lean toward the idea of maintaining enough spacing on the sides to support focus and content hierarchy. There’s also an opportunity to design specifically for ultra-wide screens, where less emphasis on spacing can enhance the aesthetics. For example, using the full screen for an immersive environment like Spline 3D could work well, especially for gamers who are more likely to fully utilise the entire screen.

  • @FlowVeeran
    @FlowVeeran 22 дні тому

    Absolute banger and a lot of insights

    • @dereksiuau
      @dereksiuau 20 днів тому

      @@FlowVeeran Glad you found value!

  • @unsa101
    @unsa101 25 днів тому

    is it possible on Framer?

    • @dereksiuau
      @dereksiuau 20 днів тому

      @@unsa101 Handbrake just compresses the video file size. As for adding a background video on the Tool Framer, that is another question that currently I’m not too sure, but I assume so.

  • @schlingen
    @schlingen 27 днів тому

    thank you so much!

  • @kbob6980
    @kbob6980 27 днів тому

    I've never heard of Handbrake before. Thanks Derek!

    • @dereksiuau
      @dereksiuau 26 днів тому

      There are a lot of tools out there. Handbrake is the one I have been using since Highschool haha. Glad you found this application useful.

  • @mr_draj
    @mr_draj 27 днів тому

    Awesome video, Thankyou for helping us.

  • @FoulOleRonThe3rd
    @FoulOleRonThe3rd 29 днів тому

    Very useful thanks! Do you know if there's a way to edit the code so that it affects only that particular video? Because I have other (image) lightboxes on my page that I don't want to go fullscreen, and currently if I use your code it affects every lightbox on the page.

    • @dereksiuau
      @dereksiuau 26 днів тому

      That will have to be done via custom code. Perhaps use Chat GPT. But I'm sure there is a way (like all things with code).

  • @emmanuelsofuwa280
    @emmanuelsofuwa280 29 днів тому

    Thank you so much

  • @jonasjakstas5305
    @jonasjakstas5305 Місяць тому

    Perfect !

  • @irshad7895
    @irshad7895 Місяць тому

    how much did you charge for this website?

    • @dereksiuau
      @dereksiuau Місяць тому

      I believe it was around $2-4K

  • @sitcomz
    @sitcomz Місяць тому

    Thanks

  • @Julie-h6n6m
    @Julie-h6n6m Місяць тому

    for everyone trying to switch pages with the toggle - sub the text toggle box for a button (format it the same as a text toggle) and when you link to the page you want choose pre-render! no custom coding needed

    • @dereksiuau
      @dereksiuau Місяць тому

      Yes - Great point on this, cool how versatile and creative Webflow development is.