Derek Siu | Webflow & Web Design
Derek Siu | Webflow & Web Design
  • Видео 88
  • Просмотров 147 805
How I Built Kalotravel.com – Webflow Showcase & UX Design Insights
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
- 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=dere...
Просмотров: 79

Видео

How to Create a Smooth Accordion Animation in Webflow
Просмотров 10112 часов назад
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
Просмотров 11419 часов назад
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
Просмотров 43День назад
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
Просмотров 8314 дней назад
Sharing my UX design and @Webflow development process for @SuperManBen a photographer and videographer based in Sydney 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 (portfolio items) - Pinterest (Masonry layout) - Interactions & Animations - The client can easily edit...
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
Просмотров 11914 дней назад
Large video files can slow down your @Webflow site's loading speed, affecting user experience and SEO. In this tutorial, I’ll guide you through using Handbrake to compress your video files, making them lightweight for faster Webflow performance. Follow along to optimize your videos and improve your page load times! ➡️ Check out Handbrake here: handbrake.fr/ 📚 Time Stamps: Intro: 0:00 Example we...
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
Просмотров 9621 день назад
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
Pretend to be a millionaire using the Inspect tool
Просмотров 5221 день назад
Pretend to be a millionaire using the Inspect tool
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Просмотров 19428 дней назад
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Просмотров 5943 месяца назад
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
Просмотров 5503 месяца назад
Error 404 page in Webflow
Webflow Showcase: pmreconference.com
Просмотров 903 месяца назад
Webflow Showcase: pmreconference.com
How to upload a PDF file to Webflow
Просмотров 9993 месяца назад
How to upload a PDF file to Webflow
Webflow Showcase: Slowtalk.us
Просмотров 563 месяца назад
Webflow Showcase: Slowtalk.us
Prevent page scroll on Webflow Modal (using Chat GPT)
Просмотров 3593 месяца назад
Prevent page scroll on Webflow Modal (using Chat GPT)
Webflow Showcase: SkiTutor.com
Просмотров 723 месяца назад
Webflow Showcase: SkiTutor.com
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
Просмотров 2254 месяца назад
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
Просмотров 2044 месяца назад
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
Просмотров 1584 месяца назад
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
Просмотров 2,8 тыс.4 месяца назад
Building a Basic FAQ Accordion in Webflow: A Step-by-Step Tutorial
Webflow Showcase: Visa3i.com
Просмотров 2264 месяца назад
Webflow Showcase: Visa3i.com
How to Limit Characters in Webflow Form Fields Natively: A Step-by-Step Tutorial
Просмотров 4144 месяца назад
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,7 тыс.5 месяцев назад
Webflow Tutorial: Tab Change Interactions
Enhance UX: Success States & User Journey Case Studies (Restaurants & SM Skating)
Просмотров 785 месяцев назад
Enhance UX: Success States & User Journey Case Studies (Restaurants & SM Skating)
Webflow Showcase: MarketModernise.nl
Просмотров 655 месяцев назад
Webflow Showcase: MarketModernise.nl

Комментарии

  • @JBurroughs17
    @JBurroughs17 4 часа назад

    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.

  • @1azjoy
    @1azjoy 11 часов назад

    Thank you for sharing this, learning a lot from you

    • @dereksiuau
      @dereksiuau 6 минут назад

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

  • @madewithbill
    @madewithbill 17 часов назад

    Clutch tip!

  • @Aliencancode
    @Aliencancode 22 часа назад

    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 15 часов назад

      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 13 часов назад

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

  • @FlowVeeran
    @FlowVeeran 3 дня назад

    Bro is so frustrated XD

    • @dereksiuau
      @dereksiuau 15 часов назад

      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.

  • @DiveSafariNZ
    @DiveSafariNZ 3 дня назад

    Thank you

  • @seize2179
    @seize2179 4 дня назад

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

    • @dereksiuau
      @dereksiuau 15 часов назад

      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 4 дня назад

    very helpful, keep the tutorials coming!!

    • @dereksiuau
      @dereksiuau 15 часов назад

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

  • @skou017
    @skou017 5 дней назад

    Nice one man!

  • @selvaconnections
    @selvaconnections 5 дней назад

    Thank you so much! Exactly what I needed :)

  • @webdevSolution
    @webdevSolution 7 дней назад

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

    • @dereksiuau
      @dereksiuau 7 дней назад

      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 7 дней назад

    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 7 дней назад

      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 7 дней назад

    well done!

    • @dereksiuau
      @dereksiuau 7 дней назад

      Thanks for the praise and comment!

  • @Neutrino-xw6jl
    @Neutrino-xw6jl 8 дней назад

    This is really well done

    • @dereksiuau
      @dereksiuau 7 дней назад

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

  • @Aliencancode
    @Aliencancode 8 дней назад

    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 7 дней назад

      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 9 дней назад

    Thanks

  • @98Nedeljko
    @98Nedeljko 9 дней назад

    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 7 дней назад

      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 11 дней назад

    Nice one

  • @Squidlord1738
    @Squidlord1738 12 дней назад

    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 11 дней назад

      @@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 12 дней назад

    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 11 дней назад

      @@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 10 дней назад

      @@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 13 дней назад

    Absolute banger and a lot of insights

    • @dereksiuau
      @dereksiuau 11 дней назад

      @@FlowVeeran Glad you found value!

  • @unsa101
    @unsa101 16 дней назад

    is it possible on Framer?

    • @dereksiuau
      @dereksiuau 11 дней назад

      @@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 18 дней назад

    thank you so much!

  • @kbob6980
    @kbob6980 18 дней назад

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

    • @dereksiuau
      @dereksiuau 17 дней назад

      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 18 дней назад

    Awesome video, Thankyou for helping us.

  • @FoulOleRonThe3rd
    @FoulOleRonThe3rd 20 дней назад

    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 17 дней назад

      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 20 дней назад

    Thank you so much

  • @jonasjakstas5305
    @jonasjakstas5305 21 день назад

    Perfect !

    • @dereksiuau
      @dereksiuau 17 дней назад

      Amazing ! It worked.

  • @irshad7895
    @irshad7895 21 день назад

    how much did you charge for this website?

    • @dereksiuau
      @dereksiuau 21 день назад

      I believe it was around $2-4K

  • @sitcomz
    @sitcomz 23 дня назад

    Thanks

  • @Julie-h6n6m
    @Julie-h6n6m 24 дня назад

    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 21 день назад

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

  • @georgejurukovski
    @georgejurukovski 27 дней назад

    Great tutorial🙌Thanks! What I've bee trying to do is to switch tabs by clicking a link within the content area. Any way to do that?

    • @dereksiuau
      @dereksiuau 25 дней назад

      I don't know any native way. You can use custom code perhaps :)

  • @hana-bnzz
    @hana-bnzz 27 дней назад

    Thank you so much. This is exactly the tutorial I was looking for Thank you

  • @arjix8738
    @arjix8738 28 дней назад

    Please use an adblocker

  • @_Thieu.
    @_Thieu. 28 дней назад

    If you think thats good... Your internet must suck.. XD

    • @denisuya
      @denisuya 28 дней назад

      Different country, different speed and price. So be grateful if your place have better internet. My country only provide 30mbps for 20$ per month

    • @dereksiuau
      @dereksiuau 25 дней назад

      This is very true all about perspective 🙏

  • @stefanboonstra2583
    @stefanboonstra2583 28 дней назад

    I got 860 Mbps :D

  • @jessedegroot4486
    @jessedegroot4486 28 дней назад

    Did you write the copy aswell?

    • @dereksiuau
      @dereksiuau 25 дней назад

      Collaborated on the copy based on my expertise yes. At the end of the day it doesn't really make sense to write all the copy yourself as no one really knows the business more than the business owner / team.

    • @jessedegroot4486
      @jessedegroot4486 25 дней назад

      @@dereksiuau Nice thanks! I do the same thing. Most of the times I use chatGPT to quickly write a copy.

  • @dereksiuau
    @dereksiuau 28 дней назад

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

  • @AuckyHalim
    @AuckyHalim 28 дней назад

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

  • @Aliencancode
    @Aliencancode 28 дней назад

    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 28 дней назад

      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

    • @Aliencancode
      @Aliencancode 27 дней назад

      @@dereksiuau Thanks for the reply, Sure i'll definitely checkout those videos

  • @sharpnelshots
    @sharpnelshots 28 дней назад

    Sana ganyan ang wifi speed ko...

  • @janneparri-np5ed
    @janneparri-np5ed 29 дней назад

    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 29 дней назад

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

  • @cheese22
    @cheese22 Месяц назад

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

    • @dereksiuau
      @dereksiuau 29 дней назад

      @cheese22 Awesome glad you liked my explanation.

  • @chetcutii
    @chetcutii Месяц назад

    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 Месяц назад

    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 29 дней назад

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

  • @Hemzri
    @Hemzri Месяц назад

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

    • @dereksiuau
      @dereksiuau 29 дней назад

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

  • @rakibhossainea
    @rakibhossainea Месяц назад

    I have done mine. it's perfectly working.

    • @dereksiuau
      @dereksiuau 29 дней назад

      @rakibhossainea Such a great feeling eh :)

  • @maymemyintzaw851
    @maymemyintzaw851 Месяц назад

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

    • @dereksiuau
      @dereksiuau Месяц назад

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

  • @Shaaffy-zj6te
    @Shaaffy-zj6te Месяц назад

    Oh Chungus, Big Chungus!

    • @dereksiuau
      @dereksiuau Месяц назад

      @@Shaaffy-zj6te HIS A CHUNKY BOI

  • @blwzonel
    @blwzonel Месяц назад

    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 Месяц назад

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