Tim Gabe
Tim Gabe
  • Видео 93
  • Просмотров 4 404 024
Design Better Than 99% of UI Designers
In this video we cover 7 key guidelines the top 1% UI designers use to design amazing websites again and again.
🔴 Framer Zero To Hero Course: timgabe.com/framer-course
Timecodes
0:00 - Intro
0:21 - Guideline 1
2:59 - Guideline 2
5:38 - Guideline 3
6:56 - Guideline 4
7:52 - Guideline 5
9:22 - Guideline 6
11:52 - Guideline 7
Просмотров: 182 464

Видео

From Figma To 3D Website (Using Framer & Spline)
Просмотров 53 тыс.7 месяцев назад
In this beginner tutorial we'll go from Figma to an animated Spline 3D Website in my favourite web design tool Framer. 🔴 Framer Course Waitlist: timgabe.com/framer-course 💜 Working Files: timgabe.com/resources/scrollable-3d-website Timecodes 00:00 - Intro to tutorial. 00:17 - Starting with converting Figma designs to a Framer website. 00:25 - Exporting from Figma to Framer using the Framer plug...
Framer Parallax Trick (Loop & Scroll Speed Tutorial)
Просмотров 8 тыс.7 месяцев назад
In this Framer Tutorial you will learn how to create a parallax scroll effect using some underrated settings and techniques. 🔴 Working File: timgabe.com/resources/sneaky-parallax-effect Timecodes 0:00 - Introduction 0:45 - Starting the creation of the frame in Framer. 1:15 - Positioning and sizing image frames. 1:51 - Discussing the removal of animations for initial setup. 2:30 - Adding and con...
3 Tricks For Amazing Button Animations (Framer Tutorial)
Просмотров 11 тыс.7 месяцев назад
In this Framer beginner tutorial, we're creating amazing button interactions with just a few simple techniques. 🔴 Working File: timgabe.com/resources/easy-button-animations Timecodes 0:00 - Introduction to the buttons 0:39 - Starting the first button with a text field 1:02 - Adjusting the background fill and gradient 1:23 - Matching the gradient colors to an example 1:54 - Adding radius and bor...
Nested Components in Framer (Beginner Tutorial)
Просмотров 14 тыс.7 месяцев назад
In this Framer Beginner Tutorial we're creating nested components to achieve next level stuff in Framer. 🔴 Working File: timgabe.com/resources/nested-tab-component Timecodes 0:00 - Introduction to the tutorial on creating nested components in Framer. 0:17 - Explaining the purpose of combining components. 0:53 - Starting the recreation of the tab component. 1:58 - Creating a hover state for the ...
Figma vs Framer in 100 Seconds
Просмотров 21 тыс.8 месяцев назад
How does Figma compare to Framer? In this video we learn the differences and when to use which tool, in just 100 seconds. 🔴 Framer Course: timgabe.com/framer-course
I Made The Biggest Movie Ever Into A Website
Просмотров 4,3 тыс.8 месяцев назад
Making an epic Hollywood Blockbuster into an equally epic website using modern web design tricks... In this video, we'll give it a try! 🔴 Learn To Create Websites Like This: timgabe.com/framer-course
Easy Scroll Animation For Beginners (Framer Tutorial)
Просмотров 8 тыс.8 месяцев назад
In this Framer Tutorial for Beginners we will learn easy ways to create impressive scroll animations. 🔴 Working File: timgabe.com/resources/easy-parallax-effect Timecodes 0:00 - Introduction 0:07 - Overview of What You'll Learn 0:12 - Explaining the Animation Sequence 0:39 - Setting up the Initial Structure 0:49 - Adding Elements to the Section 1:03 - Layer Organization 1:14 - Importance of Non...
5 Tricks For Epic Hero Animations (Framer Tutorial)
Просмотров 11 тыс.8 месяцев назад
In this Framer Tutorial we talk about 5 powerful tricks that will help you create next-level hero animations. 🔴 Working File: timgabe.com/resources/cinematic-hero-animation Timecodes 0:00 - Introduction and Overview 0:36 - Importance of Hero Sections 1:12 - Setting Up in Framer 1:48 - Brief Overview of Five Tricks 2:24 - First Trick Introduction 3:00 - Importing Image to Photoshop 3:36 - Select...
Webflow vs Framer in 100 Seconds
Просмотров 62 тыс.9 месяцев назад
Webflow vs Framer. Which one is the better choice for you? In this video, we'll compare the two softwares based on the 4 most searched questions-in 100 seconds. 🔴 Free Framer & Figma Resources: timgabe.com 🔴 My Upcoming Framer Course: timgabe.com/framer-course
Crash Course on Framer CMS (Beginner Tutorial)
Просмотров 23 тыс.9 месяцев назад
This Framer CMS tutorial for beginners will teach you the tricks used to build editable portfolios, eCommerce pages, blogs and much more. 🔴 Working File: timgabe.com/resources/cms-for-timgabe-com Timecodes 0:00 - Introduction to Framer CMS 0:19 - Designing Content for CMS 0:37 - Components of a Card 1:02 - Adding Hover State to Card 1:56 - Placeholder Image & Video 2:20 - Hover State Conditiona...
Can You Copy 6 Websites in 66 Seconds?
Просмотров 19 тыс.9 месяцев назад
Copying 6 websites in 66 seconds sounds like a joke. But with Framer, I assure you it's not. If you're interested in creating websites, this tool and their newest Copy HTML To Framer Feature will totally blow your mind. 🔴 Join My Framer Course Waitlist: timgabe.com/framer-course 🔴 Learn Framer For Free: timgabe.com/ Links to websites: blogger-site.webflow.io/ solveig-template.webflow.io/ fintri...
Sticky Scroll Explained in 3 Minutes (Framer Tutorial)
Просмотров 30 тыс.9 месяцев назад
Sticky scroll is used all across the web for beautiful animations. In this Framer tutorial you will learn how to use it in 3 minutes. 🔴 Working File: timgabe.com/resources/framer-sticky-scroll Timecodes 0:00 - Introduction to Sticky Scroll in Animations 0:16 - Four Key Points to Remember for Sticky Scroll 0:57 - Creating the Initial Layout 1:05 - Setting up Desktop as Stack 1:20 - Setting Scrol...
Framer Scroll Animations For Beginners
Просмотров 168 тыс.10 месяцев назад
Scroll animations in Framer are much less complex than you think, even if you're a beginner. 🔴 Working File: timgabe.com/resources/scroll-animations-for-beginners 🔴 Upcoming Framer Course: timgabe.com/framer-course Timecodes 0:00 - Introduction 0:18 - Setting up the initial layout; option to access finished working file. 0:28 - Creating a frame with specific dimensions and properties. 0:45 - De...
Framer Components For Beginners (Netflix Carousel)
Просмотров 13 тыс.10 месяцев назад
In this tutorial we'll learn to master components in Framer by recreating button, card and carousel components. We'll cover things like states, variants, variables and nested components - giving you everything you need to create whatever you can imagine. 🔴 Working File: timgabe.com/resources/netflix-style-carousel Timecodes 0:00 - Introduction to Netflix-style carousel in Framer. 0:07 - Overvie...
Card Layouts in Framer (Grid Tutorial)
Просмотров 17 тыс.10 месяцев назад
Card Layouts in Framer (Grid Tutorial)
Framer Breakpoints in 7 Minutes (Beginner Tutorial)
Просмотров 21 тыс.10 месяцев назад
Framer Breakpoints in 7 Minutes (Beginner Tutorial)
Master Stacks, Position & Sizing (Framer For Beginners)
Просмотров 32 тыс.10 месяцев назад
Master Stacks, Position & Sizing (Framer For Beginners)
Award Winning Website in Framer (Loop Effect Tutorial)
Просмотров 14 тыс.11 месяцев назад
Award Winning Website in Framer (Loop Effect Tutorial)
Get Started: Figma Variables in 3 Minutes
Просмотров 15 тыс.11 месяцев назад
Get Started: Figma Variables in 3 Minutes
I used Framer AI to create a website… in 5 minutes
Просмотров 24 тыс.Год назад
I used Framer AI to create a website… in 5 minutes
Master Carousels in Framer (Slideshow, Ticker & Carousel)
Просмотров 71 тыс.Год назад
Master Carousels in Framer (Slideshow, Ticker & Carousel)
Create Any Carousel in Figma (Beginner Tutorial)
Просмотров 104 тыс.Год назад
Create Any Carousel in Figma (Beginner Tutorial)
Designers Are Leaving Webflow... Here's Why
Просмотров 192 тыс.Год назад
Designers Are Leaving Webflow... Here's Why
Complete Website in Framer: Beginner Tutorial
Просмотров 136 тыс.Год назад
Complete Website in Framer: Beginner Tutorial
The Secret Trick For Amazing Animations in Figma
Просмотров 19 тыс.Год назад
The Secret Trick For Amazing Animations in Figma
The UI/UX Wireframe Hack Schools Don’t Teach
Просмотров 24 тыс.Год назад
The UI/UX Wireframe Hack Schools Don’t Teach
Make Your Figma Scroll Animation Real in 4 Minutes (Using Framer)
Просмотров 17 тыс.Год назад
Make Your Figma Scroll Animation Real in 4 Minutes (Using Framer)
4 Easy Tips For Stunning Landing Pages (Figma Tutorial)
Просмотров 18 тыс.Год назад
4 Easy Tips For Stunning Landing Pages (Figma Tutorial)
Master Figma’s Sticky Scroll in 4 Minutes
Просмотров 51 тыс.Год назад
Master Figma’s Sticky Scroll in 4 Minutes

Комментарии

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

    How does one make it responsive?

  • @bpfeuty
    @bpfeuty 13 часов назад

    I'm so proud to be the 1% who watch RUclips tutorials

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

    can we make a design like mid journey in figma?

  • @alejandroquarato8824
    @alejandroquarato8824 День назад

    Excellent explanation Tim, just one question, what is the difference between scroll animation and scroll transform?

  • @johanstam3602
    @johanstam3602 День назад

    Is it me or ? The baymard site uses a serif body font which is very hard to read.

  • @Djerique
    @Djerique День назад

    Is there also a workfile for this tutorial available?

  • @israelresendiz5038
    @israelresendiz5038 2 дня назад

    What prompt did you use for the other abstract designs? Thanks so much for the tutorials!

  • @chloeli1845
    @chloeli1845 2 дня назад

    Hi Tim! Thank you for creating this super useful video. I am following your process step by step but on the "Instance Property" part, the "Icon swap" isn't working and it has this warning of "Not use within component". How do I fix that?

  • @yandeschenes
    @yandeschenes 2 дня назад

    Very valuable thank you! +1 sub

  • @Livestreamfinland
    @Livestreamfinland 2 дня назад

    Framer doesn't export code

  • @TheEnigmaticSelf
    @TheEnigmaticSelf 2 дня назад

    You funny clown .......😂😂😂.... Designers are embracing webflow....

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

    So good❤

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

    Alhamdulillah. Thanks, man, it really helps me as a beginner who is stressing out about how to create a wireframe. your technique is spectacular 🎉🎉🎉🎉🎉🎉🎉🎉

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

    Thx!!!

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

    Hi. I have been trying to practice with Figma file provided in link but it is not editable, nor I can create branch, can you please provide appropriate permissions

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

    How do you keep the image showing up all the way in different size screens? When I make a breakpoint, it seems like the width and height lowers, and I end up unwilling cropping my image to a fraction of the full image/ Especially for mobile

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

    Greaaaaat class!

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

    Are the sign up buttons and other buttons clickable? or can the site be made to load from one page to the other?

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

    if frame one is hide then how can you show only the circle, when i move the nav out of the main frame the total section moved.

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

    no need to long.. I will definitely sub and like haha

  • @HienNguyen-gi8cp
    @HienNguyen-gi8cp 4 дня назад

    I lost effect when i copy figma design to framer. Can you help me with this problem :(((. Thank you so much

  • @AnthonyWalker-bf9be
    @AnthonyWalker-bf9be 5 дней назад

    So easy to understand and you've helped me level up my design system game! I'd seen booleans in other files but didn't get how they worked. Thank you!

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

    You are the best, thank you!!

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

    I had my playback speed at 2x and didn't even notice

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

    Tim, I recently discovered your channel and finished the Figma crash course in 2 days. I can not even tell you how helpful and insightful your videos are. I have learned the things in two days which I could not do in past 7-8 months. Your way of teaching is exceptional. 😍😍😍 I generally never comment on any video on RUclips, but your content is worth it. I am super grateful to find your channel. Please upload more content on a full website design with complex interactions. Looking forward for more amazing content 🌺🌻

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

    This is the best video I've ever seen about ui

  • @jonathan3488
    @jonathan3488 6 дней назад

    I think in the case of hierarchy of font sizes, sometimes it is absolutely crucial to include it for readability.

  • @khemrajunior
    @khemrajunior 6 дней назад

    Thank you

  • @GoddessofWarr
    @GoddessofWarr 6 дней назад

    As a big fan of Avatar and James Cameron : I LOVE THIS 😍😍

  • @nar1708
    @nar1708 6 дней назад

    I did everything but in the end when I place it to another frame to see if ot works it doesn't 😭

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

    thanks so much for this video. life-saver. quick q: I've created this w icons as tabs instead of text. when i click on one of the tabs, the previous one i clicked doesn't go back to default state. It's going back to default-hover instead. what am i missing?

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

    Good lord this is a GORGEOUS tutorial, Tim! Thanks a bunch from Seattle, USA and India.

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

    i still prefer Webflow!

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

    The problem is I can write code faster than I can use that toolbar on the right.

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

    I found the video to be very informative and the step-by-step process was extremely helpful. While the AI-generated content was useful in ui design, I do have some reservations about it. In an oversaturated market where many scam websites rely heavily on AI-created content, I believe that original photography of the product, location, or person can provide stronger social proof and authenticity for users -- Where seeing real, unique visuals adds more value than generic AI-based imagery. Overall, the video was great, but I think incorporating more original visual content would further enhance the user experience and build greater trust

  • @RahulRK-oi9pr
    @RahulRK-oi9pr 7 дней назад

    Users usually scroll not by dragging, so how to do this scrolling ?

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

    off-topic question: What is the background music that you are using? it is pretty awesome and ive been looking for something similar to add to my own videos (at least in the intro). Can you recommend a library for audio where this is contained? 🙂 btw. great video, I am just diggin myself into some alternatives to our Figma -> Elementor work process.

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

    Why it's not working in my case i followed the whole video

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

    Anyway you cut it...Framer is just crap compared to Webflow...and clients know it.

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

    Im an old school Photoshop user LMAO , thank you for quick tutorials

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

    Hey there, great video. However I'm running into an issue. I have a component that changes based on positioning. I've checked that it's a stack, and that it's overflow is visible. however the component is unable to be set to sticky no matter what tutorial I find. Is there a fix for this, or are components not able to be sticky yet?

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

    original volume is extremely low

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

    Great Tim! I also took these websites for the inspiration and also take the inspiration from the competitors websites. Thanks buddy for the such valuable content.

  • @XQuad_Insight
    @XQuad_Insight 9 дней назад

    Hey Tim! we've built an integration solution for Framer and Shopify! we are offering affiliate program to content creators and influencers... let me know if you are intrested!

  • @AbhinavGaurav-kz4sg
    @AbhinavGaurav-kz4sg 9 дней назад

    Hey Tim, Loved your job a lot. I would appreciate if you could create some content around creating variables in figma.

  • @esthernwaogu592
    @esthernwaogu592 9 дней назад

    WELL EXPLAINED, NICE HAIR CUT😇

  • @neilallen306
    @neilallen306 10 дней назад

    what was the example he gave for inspirations? I couldnt quite make it out. thanks for the great content.

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

    That's the most valuable video that ever i watched about design

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

    FRAMER iIS THE BEST, I open to work for build framer web my expertise is build personal web your portofolio, lets comment now

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

    JESUS IS THE MESSIAH THE GOD