Derek Siu | Webflow & Web Design
Derek Siu | Webflow & Web Design
  • 70
  • 133 435
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
Переглядів: 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)
Webflow Showcase: SkiTutor.com
Переглядів 663 місяці тому
Webflow Showcase: SkiTutor.com
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
Webflow Showcase: Alphatrend.io
Переглядів 633 місяці тому
Webflow Showcase: Alphatrend.io
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
Webflow Showcase: hamiltonbars.au
Переглядів 1043 місяці тому
Webflow Showcase: hamiltonbars.au
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
Webflow Showcase: Visa3i.com
Переглядів 2223 місяці тому
Webflow Showcase: Visa3i.com
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 Showcase: MarketModernise.nl
Переглядів 624 місяці тому
Webflow Showcase: MarketModernise.nl
Webflow Tutorial: How to Create Custom Checkboxes | Step-by-Step Guide
Переглядів 5864 місяці тому
Webflow Tutorial: How to Create Custom Checkboxes | Step-by-Step Guide
Webflow Showcase: MIDASMVMT.com
Переглядів 744 місяці тому
Webflow Showcase: MIDASMVMT.com
Webflow Tutorial: How to Create a Simple JavaScript Back Button
Переглядів 3545 місяців тому
Webflow Tutorial: How to Create a Simple JavaScript Back Button
Webflow Showcase: EthereansOS
Переглядів 1335 місяців тому
Webflow Showcase: EthereansOS
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

КОМЕНТАРІ

  • @jessedegroot4486
    @jessedegroot4486 2 години тому

    Did you write the copy aswell?

  • @dereksiuau
    @dereksiuau 5 годин тому

    Hahha this is rare for me and normally I don't get this speed 😢

  • @AuckyHalim
    @AuckyHalim 8 годин тому

    Thanks man! your explanation is so easy to understand and followed

  • @Aliencancode
    @Aliencancode 8 годин тому

    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"

    • @dereksiuau
      @dereksiuau 4 години тому

      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

  • @sharpnelshots
    @sharpnelshots 10 годин тому

    Sana ganyan ang wifi speed ko...

  • @janneparri-np5ed
    @janneparri-np5ed День тому

    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.

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

      @janneparri-np5ed WOW someone can relate to me! Thanks for the comment haha

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

    Truly incredible how well you explain things. Thank you so much for covering this! Exactly what I needed to learn.

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

      @cheese22 Awesome glad you liked my explanation.

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

    thanks for this man, really helpful videos, people these days would sell a course and charge for these types of videos! Kudos to you

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

    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!

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

      @@leszeksmieszek4523 That functionality can be done through Swiper JS.

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

    I didnt understand a single word you just said but i feel your pain.. 🦆

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

      @Hemzri Hahaha I don't even understand myself I just feel the pain lol

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

    I have done mine. it's perfectly working.

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

      @rakibhossainea Such a great feeling eh :)

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

    great video I uploaded favicon it shows on google tabs but not showing on google search how can I solve it

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

      @@maymemyintzaw851 Thanks, Google search doesn't show favicon. Favicon only appears on the browser tab.

  • @Shaaffy-zj6te
    @Shaaffy-zj6te 8 днів тому

    Oh Chungus, Big Chungus!

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

      @@Shaaffy-zj6te HIS A CHUNKY BOI

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

    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?

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

      @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.

  • @minayunan3002
    @minayunan3002 10 днів тому

    Amazing tutorial😀

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

      @@minayunan3002 Thank you :P

  • @zassdaniil
    @zassdaniil 11 днів тому

    благодарю!

  • @KellEgbertDesign
    @KellEgbertDesign 11 днів тому

    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!

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

      @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.

  • @davidschaer
    @davidschaer 11 днів тому

    sounds good, does'nt work

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

      @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.

  • @sudhanshupawar1516
    @sudhanshupawar1516 11 днів тому

    really explained nicely👍

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

    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!

    • @dereksiuau
      @dereksiuau 3 години тому

      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.

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

    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?

    • @dereksiuau
      @dereksiuau 3 години тому

      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.

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

    Thank you man! It was so easy with your tutorila!

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

    what a great tutorial, thank you very much!

    • @dereksiuau
      @dereksiuau 3 години тому

      You're very welcome!

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

    God bless you! I've been looking for this, the over videos I've seen just rushed over the responsiveness...thanks man

    • @dereksiuau
      @dereksiuau 3 години тому

      You're very welcome! God bless and Praise God.

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

    Bro, please can u make a video on how to add APIs on Webflow?

    • @dereksiuau
      @dereksiuau 3 години тому

      Zapier is the easiest way. Will note this suggestion down.

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

    Thanks mann

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

    Great Video, thanks!

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

    That double optin was clutch! That and Captcha is what had me stuck.

    • @dereksiuau
      @dereksiuau 3 години тому

      Yeah true, glad you realised this and yes Captcha is something I might have forgot to mention in this video. Thanks for sharing.

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

    I did everything the same way and it does not work

    • @dereksiuau
      @dereksiuau 3 години тому

      Oh no, sorry to hear. I understand it can frustrating. Did you end up resolving this?

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

    It's easier to write code and not mess around!

  • @MartinGomezWD
    @MartinGomezWD 23 дні тому

    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.

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

      Awesome stuff Martin- glad it worked and thanks for the comment!

  • @davvy6659
    @davvy6659 23 дні тому

    Hi Derek, nice Video. Can you do a tutorial on how to build a swiper from scratch in webflow please?

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

      Added to my list (just a matter of time hahaha)

  • @Aliencancode
    @Aliencancode 24 дні тому

    Bro is so underrated fr, Amazing tutorial Respect ++

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

    Thank you man I learned it. Can, you make a video how to let play 2 videos after filling out the contact form?

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

      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.

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

      @@dereksiuau thank you, I Got it

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

    5:00 can you please make a video about this scrolling?

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

      Nice! added to my list, so be sure to subscribe to be notified when this would be out.

  • @RashedKhanMenon-u4w
    @RashedKhanMenon-u4w 28 днів тому

    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.

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

      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.

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

    I love you SO much for this. I was looking for this EXACT tutorial, my friend!

  • @ВасилийБонецкий
    @ВасилийБонецкий Місяць тому

    Very useful and short video instruction! Thank u bro😇

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

    i saw few video about Foq, youe technique is the best

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

    Thank you

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

    Thanks ! It was understable ans easy to reproduce !

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

    your tutorial does not work

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

      Sorry to hear that, this was a very specific technique (ONE way of doing it) I plan to revisit this in the future.

    • @jxxxn7137
      @jxxxn7137 10 днів тому

      It does work

  • @AlexReyes-d8g
    @AlexReyes-d8g Місяць тому

    Hi! I did this but somehow, it won't work on ios devices. It works with android and desktops tho, could you help me?

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

      It should work on both! Send me your read-only link and I can take a look for you when I get the chance.

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

    Great explanation!

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

    Thanks bro a lot, u saved me!!

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

    This method has a serious disadvantage, if we open one faq-item, and click to another, the opened one doesn't close.

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

      There are many variations of the FAQ, this is just the basic premise. Your version can be achieved through interactions or applying custom code.

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

      @@dereksiuau Can you explain how this is done using interactions? thanks ;)

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

    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?

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

      Something should be "missing" perhaps a small 0.5sec transition delay or the loop is not perfect.

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

    very good brother

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

      Thank you so much 😀

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

    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

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

      Thanks for the comment brother! Glad you found it helpful.

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

    Thanks for sharing bro

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

      No problem 👍, thanks for watching and commenting.