- Видео 88
- Просмотров 147 805
Derek Siu | Webflow & Web Design
Добавлен 8 янв 2023
Welcome to my RUclips 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 RUclips 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 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...
🌐 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)
Prevent page scroll on Webflow Modal (using Chat GPT)
Просмотров 3593 месяца назад
Prevent page scroll on Webflow Modal (using Chat GPT)
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
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
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
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
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.
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?
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.
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.
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?
I don't know any native way. You can use custom code perhaps :)
Thank you so much. This is exactly the tutorial I was looking for Thank you
You're welcome!
Please use an adblocker
Good idea!
If you think thats good... Your internet must suck.. XD
Different country, different speed and price. So be grateful if your place have better internet. My country only provide 30mbps for 20$ per month
This is very true all about perspective 🙏
I got 860 Mbps :D
Jeez that is crazy
Did you write the copy aswell?
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.
@@dereksiuau Nice thanks! I do the same thing. Most of the times I use chatGPT to quickly write a copy.
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
@@dereksiuau Thanks for the reply, Sure i'll definitely checkout those videos
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.