- 94
- 152 870
Derek Siu | Webflow & Web Design
Приєднався 8 січ 2023
Welcome to my UA-cam channel: Your destination for high-quality content on Webflow tutorials, UI/UX design insights + freelance knowledge. I'm Derek Siu a freelance Website designer and Webflow Developer based in Sydney Australia with over 4+ years of experience. My goal for this UA-cam channel is to provide free valuable resources to help you master Webflow and elevate your design skills.
Sit back, follow along, and unlock valuable insights in each video. Don't forget to show your support by liking, commenting, and subscribing for regular updates.
Discover more about me and my journey on my website:
www.dereksiu.com.au/about\u2028
Ready to get started with Webflow? Use my affiliate link here:
webflow.partnerlinks.io/4brsncjjm7ge
Want to hire me for your project or for consultation? Contact me here:
www.dereksiu.com.au/contact
Sit back, follow along, and unlock valuable insights in each video. Don't forget to show your support by liking, commenting, and subscribing for regular updates.
Discover more about me and my journey on my website:
www.dereksiu.com.au/about\u2028
Ready to get started with Webflow? Use my affiliate link here:
webflow.partnerlinks.io/4brsncjjm7ge
Want to hire me for your project or for consultation? Contact me here:
www.dereksiu.com.au/contact
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
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)
How to upload a PDF file to Webflow
Переглядів 1,1 тис.3 місяці тому
How to upload a PDF file to Webflow
Prevent page scroll on Webflow Modal (using Chat GPT)
Переглядів 3764 місяці тому
Prevent page scroll on Webflow Modal (using Chat GPT)
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
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
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
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
I actually didn't like this update, don't believe it was needed and webflow has other things more important to improve probably
Bro bla bla bla how to make this Interaktion 😅
I found this tutorial to be very useful and I will use this effect soon. Thanks!
I love you
Easy to understand and follow! Another learning! Thank you sharing your knowledge!
is the torch effect pure css Make a tutorial please
going to watch the scroll tut i was wondering on how to accomodate the nav length
BACKUP
Requesting BACKUP {over}
Good job you did there, can you make some lessons on how you build it from time to time?
This is an interesting idea - can you expand? Like a timelapse with my voice over recording or something?
@@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
How i remove that scrow line bellow site when i made this loop?
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.
Bro dropped banger regarding componentizing the cursor.
Always use components lol
Very helpful! Thank you for sharing! 🎉
You are so welcome! - thanks for the comment.
Bro slid in his own site lol 🔥good stuff
Haha gotta self plug - you know how it is lol.
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?
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 :)
Nice, thanks for you work !
No problem 👍
everything redirect to their homepage now. is this going to be fixed anytime soon?
Really wow - Actually I've seen the homepage be on the Webflow canvas before. You can refresh the page and it should be fixed!
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
Yeah it seems very different but we are creatures of habit so I'm sure we will all adjust.
Thanks man, we are working with Webflow on university, and I wanted to do this so bad! Thanks!
Glad it was helpful! Webflow university is a fantastic tool btw
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.
Hahaha - if this is a compliment thanks!
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.
Interesting, do you have a solution for this?
Thank you for sharing this, learning a lot from you
Glad you are learning!! & Thanks for watching / commenting.
Clutch tip!
GG!
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?
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 :)
@@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?
Nice website. I have a question, if the header is sticky, why have navigation menu (quick links) on the footer?
Bro is so frustrated XD
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.
@@dereksiuau being authentic always gets you the right ones so don't worry man you did great
Thank you
You're welcome
Great tutorial! How did you instantly put the padding on all sides?
You can use a shortcut hold shift while dragging anyside and it will auto put padding to all sides. Give it a try yo!
very helpful, keep the tutorials coming!!
Thanks, will do! If you have any suggestions lmk.
Nice one man!
Thank you! Cheers!
Thank you so much! Exactly what I needed :)
You're welcome :)
Could you complement it by showing how to make the pop-up open after 10 seconds, for example?
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).
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?
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.
well done!
Thanks for the praise and comment!
This is really well done
Thanks! The design was already done by client, so it was just turning it to life.
Amazing work, love the color combinations, the overall layout and all really fits with brand's identity, and Thanks for connecting on LinkedIn
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.
Thanks
No problem!
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?
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.
Nice one
Thanks 🔥
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
@@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.
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!
@@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 .
@@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.
Absolute banger and a lot of insights
@@FlowVeeran Glad you found value!
is it possible on Framer?
@@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.
thank you so much!
You're welcome!
I've never heard of Handbrake before. Thanks Derek!
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.
Awesome video, Thankyou for helping us.
No problem 👍
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.
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).
Thank you so much
You're most welcome
Perfect !
Amazing ! It worked.
how much did you charge for this website?
I believe it was around $2-4K
Thanks
No problem
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
Yes - Great point on this, cool how versatile and creative Webflow development is.