- 70
- 133 435
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 SkinSafe.au | Webflow Showcase & UX Design Tips
Sharing my UX design and @Webflow development process for SkinSafe.au, a skincare clinic based in Adelaide, Australia. I’ll dive into my approach and the features that make this site unique.
👇 My Involvement / Key Features:
- Webflow Development
- User Experience Design
- CMS build (Articles, Services)
- HotDocs Integration
- Interactions & Animations
- The client can easily edit the site themselves using the Webflow editor
🌐 Check out the site yourself here:
www.skinsafe.au/
🧠 For more value visit:
www.dereksiu.com.au/value
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Affiliate Links:
Hire a Freelancer on Fiverr: fiverr.grsm.io/k8bhq1js4hmx
Try Webflow: webflow.partnerlinks.io/4brsncjjm7ge
--
📚 Time Stamps:
About SkinSafeAU: 00:00
Branding: 00:55
Homepage: 01:20
Service page: 7:03
Resources Pages: 8:13
About Page: 10:30
Contact page: 12:00
Closing Statement: 12:14
--
#Webflow, #WebDesign, #SkinSafeAU, #WebflowShowcase, #UXDesign, #WebsiteDevelopment, #DesignerShowcase
👇 My Involvement / Key Features:
- Webflow Development
- User Experience Design
- CMS build (Articles, Services)
- HotDocs Integration
- Interactions & Animations
- The client can easily edit the site themselves using the Webflow editor
🌐 Check out the site yourself here:
www.skinsafe.au/
🧠 For more value visit:
www.dereksiu.com.au/value
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Affiliate Links:
Hire a Freelancer on Fiverr: fiverr.grsm.io/k8bhq1js4hmx
Try Webflow: webflow.partnerlinks.io/4brsncjjm7ge
--
📚 Time Stamps:
About SkinSafeAU: 00:00
Branding: 00:55
Homepage: 01:20
Service page: 7:03
Resources Pages: 8:13
About Page: 10:30
Contact page: 12:00
Closing Statement: 12:14
--
#Webflow, #WebDesign, #SkinSafeAU, #WebflowShowcase, #UXDesign, #WebsiteDevelopment, #DesignerShowcase
Переглядів: 51
Відео
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Переглядів 4262 місяці тому
Learn how to create a multi-step form in @Webflow using Formly, a free third-party solution that integrates seamlessly with Webflow's native forms using attributes. Check out Formly here: www.tryformly.com/ This detailed tutorial guides you through every step, from setup to customization, ensuring you can build engaging and user-friendly forms for your website. Perfect for enhancing user experi...
Webflow Showcase: Myac.co
Переглядів 972 місяці тому
Sharing my UX and @Webflow development process for Myac.co. A Accounting and Tax service provider for Content Creators & Solopreneurs 👇 My Involvement / Key Features: - Webflow Development - User Experience Design - CMS build (Blog) - Calendly Integration - Interactions & Animations - The client can easily edit the site themselves using the Webflow editor 🌐 Check out the site yourself here: www...
Error 404 page in Webflow
Переглядів 3212 місяці тому
Learn how to create a custom 404 Error page in @Webflow! In this tutorial, I'll guide you through what is an error 404 page, why it happens and how to set up a user-friendly 404 page that keeps visitors engaged even when they land on a broken link. 📚 Time Stamps: Intro: 0:00 Example websites: 0:07 Error 404 page explained: 0:24 How to make a Error 404 page in Webflow: 1:58 Closing statements: 3...
Webflow Showcase: pmreconference.com
Переглядів 862 місяці тому
Sharing my UX and @Webflow development process for PMRE conference. A Photo Media Real Estate-focused conference that is held annually. 👇 My Involvement / Key Features: - Webflow Development - User Experience Design - CMS build - Finsweet CMS popup modal - CMS Marquee - Popup integration with e-mailing platform - Regfox integration - Interactions & Animations - The client can easily edit the si...
How to upload a PDF file to Webflow
Переглядів 6602 місяці тому
In this @Webflow tutorial, I'll explain in great detail how to upload a PDF file onto Webflow and how to link it to a button or link block or link. 📚 Time Stamps: Intro: 0:00 Example website: 0:07 Webflow walkthrough: 0:42 Compress your PDF file (Tip!): 1:24 Linking the PDF to a button: 2:30 Closing statements: 3:22 For more value please visit: www.dereksiu.com.au/value 📢 Connect With Me Websit...
Webflow Showcase: Slowtalk.us
Переглядів 522 місяці тому
Explaining my design and @Webflow development process for slowtalk.us a new human-powered conversation platform. 👇 My Involvement / Key Features: - Webflow Development - Interactions & Animations - Audio Functionality - CMS Functionality - Swiper JS Integration - Wista Video integration - Embedded form integration - The client can easily edit the site themselves using the Webflow editor 🌐 Check...
Prevent page scroll on Webflow Modal (using Chat GPT)
Переглядів 2722 місяці тому
Prevent page scroll on Webflow Modal (using Chat GPT)
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
Переглядів 2153 місяці тому
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
Compressing CMS Items (Images) in Webflow CMS
Переглядів 1723 місяці тому
Compressing CMS Items (Images) in Webflow CMS
Webflow Showcase: Philippstrucking.com
Переглядів 753 місяці тому
Webflow Showcase: Philippstrucking.com
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 1
Переглядів 1553 місяці тому
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
Переглядів 2,1 тис.3 місяці тому
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
Переглядів 3424 місяці тому
How to Limit Characters in Webflow Form Fields Natively: A Step-by-Step Tutorial
Webflow Showcase: whistlerstreettattoo.com.au
Переглядів 554 місяці тому
Webflow Showcase: whistlerstreettattoo.com.au
Webflow Tutorial: Tab Change Interactions
Переглядів 1,3 тис.4 місяці тому
Webflow Tutorial: Tab Change Interactions
Enhance UX: Success States & User Journey Case Studies (Restaurants & SM Skating)
Переглядів 774 місяці тому
Enhance UX: Success States & User Journey Case Studies (Restaurants & SM Skating)
Webflow Tutorial: How to Create Custom Checkboxes | Step-by-Step Guide
Переглядів 5864 місяці тому
Webflow Tutorial: How to Create Custom Checkboxes | Step-by-Step Guide
Webflow Tutorial: How to Create a Simple JavaScript Back Button
Переглядів 3545 місяців тому
Webflow Tutorial: How to Create a Simple JavaScript Back Button
Webflow Tutorial: How to Embed Google Maps on Your Website (Step-by-Step Guide)
Переглядів 4795 місяців тому
Webflow Tutorial: How to Embed Google Maps on Your Website (Step-by-Step Guide)
Adobe Illustrator to Webflow Showcase: StudioNekoyama
Переглядів 905 місяців тому
Adobe Illustrator to Webflow Showcase: StudioNekoyama
Webflow Navbar Color Change on Scroll - Step-by-Step Tutorial
Переглядів 3,5 тис.5 місяців тому
Webflow Navbar Color Change on Scroll - Step-by-Step Tutorial
Figma to Webflow Showcase: AniamteQLab
Переглядів 1155 місяців тому
Figma to Webflow Showcase: AniamteQLab
Did you write the copy aswell?
Hahha this is rare for me and normally I don't get this speed 😢
Thanks man! your explanation is so easy to understand and followed
Glad to hear it!
Amazing Work, Nice and simple design, love it! One request - can you please make a video on how to integrate third party apps like you did for "book an appointment"
Thanks for the comment. I will add it to my list not sure when it would be released. But essentially you can embed a third party app using the custom code (explained partly on my Google Maps video) then you can make a trigger with a popup (explained in my popup modal video). - Derek
Sana ganyan ang wifi speed ko...
Yeah, those are tricky. I once built a navigation where dropdown opens as overlay. Not the simplest solution. Other options could be to just hide some links and force the user to navigate through the page.
@janneparri-np5ed WOW someone can relate to me! Thanks for the comment haha
Truly incredible how well you explain things. Thank you so much for covering this! Exactly what I needed to learn.
@cheese22 Awesome glad you liked my explanation.
thanks for this man, really helpful videos, people these days would sell a course and charge for these types of videos! Kudos to you
Great tutorial, dude! You made it look simple. One question - do you know how to make each swipe moving exactly one card, and making it bigger when on screen? Thanks!
@@leszeksmieszek4523 That functionality can be done through Swiper JS.
I didnt understand a single word you just said but i feel your pain.. 🦆
@Hemzri Hahaha I don't even understand myself I just feel the pain lol
I have done mine. it's perfectly working.
@rakibhossainea Such a great feeling eh :)
great video I uploaded favicon it shows on google tabs but not showing on google search how can I solve it
@@maymemyintzaw851 Thanks, Google search doesn't show favicon. Favicon only appears on the browser tab.
Oh Chungus, Big Chungus!
@@Shaaffy-zj6te HIS A CHUNKY BOI
hey. thanks for your tutorials. this marquee swipes along with my canvas on the published panel, how do i go about to make it static on webflow?
@blwzonel I will be revisting this tutorial in the future. But for now it seems like there is horizontal scroll on your page? If so you need to set a width on the parent wrapper (of the logos) and set overflow to hidden.
Amazing tutorial😀
@@minayunan3002 Thank you :P
благодарю!
Thank you @Derek, I really appreciate your help. I'm trying to add the "Luminosity" effect to my logos - turn them from gray to color when users hover over them on the marquee loop. Do you have any suggestions on how to do so? Thanks!
@KellEgbertDesign Thanks for the comment Kell. There are many ways to achieve this. The best perhaps is the upload the logo in color (adding a class of course) then apply a filter (Brightness - bring it down & maybe greyscale) to the class. Then apply a hover effect. Let me know! This is a good suggestion I may do a tutorial on this.
sounds good, does'nt work
@davidschaer Sorry to hear David I know how frustrating it can be. I would suggest following exactly step by step then reverse engineer to understand the premise. Otherwise you can always use the Webflow native component.
really explained nicely👍
Hi, this tutorial was probably closest to what I needed for the toggle button I'm trying to build. But I was wondering if it's possible to use this toggle button to reveal a different set of information on the same page (does not transition/link to a new page). I saw a comment you responded to earlier, which said it can be done natively in Webflow, and was hoping you could point me in the direction of how to do so if it's not too complicated to explain. Thank you!
Hey sorry for the late reply. After the toggle is built, around 12:45 min in the video I explain how to attach a interaction with it. In the video I explained making a light / dark mode. But in your case you can put the information in a DIV (wrapper) with a class holding all the content then making the toggle interaction for example going from Display: None to Display: Flex or Block or Grid. Hope that makes sense, let me know if you need further help.
How do I make sure that the nav closes and the animation plays whenever a user clicks on a link? Do I have to create a custom animation for every type of interaction?
Great question you can make the close animation once and assign it to affect the class. So just have the links with the same class and have the interaction affect that class.
Thank you man! It was so easy with your tutorila!
You're welcome!
what a great tutorial, thank you very much!
You're very welcome!
God bless you! I've been looking for this, the over videos I've seen just rushed over the responsiveness...thanks man
You're very welcome! God bless and Praise God.
Bro, please can u make a video on how to add APIs on Webflow?
Zapier is the easiest way. Will note this suggestion down.
Thanks mann
Great Video, thanks!
You bet!
That double optin was clutch! That and Captcha is what had me stuck.
Yeah true, glad you realised this and yes Captcha is something I might have forgot to mention in this video. Thanks for sharing.
I did everything the same way and it does not work
Oh no, sorry to hear. I understand it can frustrating. Did you end up resolving this?
It's easier to write code and not mess around!
interesting...
Thank you for this tutorial, Derek. I was using Finsweet's Accesible Components Checkbox and for some reason the custom icon and background color weren't visible in the the style panel (maybe a bug) but if I change it, it works. So you saved me and now I can customize it however I want. Great stuff. Cheers.
Awesome stuff Martin- glad it worked and thanks for the comment!
Hi Derek, nice Video. Can you do a tutorial on how to build a swiper from scratch in webflow please?
Added to my list (just a matter of time hahaha)
Bro is so underrated fr, Amazing tutorial Respect ++
Glad you think so!
Thank you man I learned it. Can, you make a video how to let play 2 videos after filling out the contact form?
There are many ways, but the most simple is to create a seperate "success" page which will have what ever content you want (ie. 2 videos) then once the contact form has been submitted go to the Form settings and add a re-direct link.
@@dereksiuau thank you, I Got it
5:00 can you please make a video about this scrolling?
Nice! added to my list, so be sure to subscribe to be notified when this would be out.
Hi Derek Siu, I'm a big fan of your Webflow tutorials, and they have been incredibly helpful for my projects. I was wondering if you could create a video on how to add a "popular post" feature to a blog website in Webflow. Specifically, I'd love to learn how to track post views and automatically display the most popular posts based on view count or other metrics. This would be really useful for anyone building dynamic blogs and wanting to highlight trending content. Your step-by-step approach is always super easy to follow, and I'm sure many others would benefit from this as well.
Thanks for your comment Rashed! A manual popular post is very simply to do. However a more automatic way based on view counts or other metric has to be done via custom code. I have noted this request.
I love you SO much for this. I was looking for this EXACT tutorial, my friend!
Glad I could help!
Very useful and short video instruction! Thank u bro😇
Glad it helped!
i saw few video about Foq, youe technique is the best
Wow, thanks!
Thank you
Welcome!
Thanks ! It was understable ans easy to reproduce !
Glad it helped!
your tutorial does not work
Sorry to hear that, this was a very specific technique (ONE way of doing it) I plan to revisit this in the future.
It does work
Hi! I did this but somehow, it won't work on ios devices. It works with android and desktops tho, could you help me?
It should work on both! Send me your read-only link and I can take a look for you when I get the chance.
Great explanation!
Glad you think so :)
Thanks bro a lot, u saved me!!
Glad I could help
This method has a serious disadvantage, if we open one faq-item, and click to another, the opened one doesn't close.
There are many variations of the FAQ, this is just the basic premise. Your version can be achieved through interactions or applying custom code.
@@dereksiuau Can you explain how this is done using interactions? thanks ;)
Hi! In my case, on smaller devices when the animation comes to the looping moment, I experience some kind of "refresh" that lasts just for a fraction of a second, but it's really noticeable. I have a longer wrapper with 11 logos, repeated a couple of times. Do you know if it's just webflow's way of dealing with this? Or maybe I am missing something?
Something should be "missing" perhaps a small 0.5sec transition delay or the loop is not perfect.
very good brother
Thank you so much 😀
brother thank you so mych this is what I was looking for so long time, very useful and very to the point, thank you, it is amazing explanation, keep uploading tutorials like this man, this is super useful to the point thanks brother
Thanks for the comment brother! Glad you found it helpful.
Thanks for sharing bro
No problem 👍, thanks for watching and commenting.