- 722
- 19 754 150
Jesse Showalter
United States
Registrace 5. 06. 2009
Jesse Showalter shares Digital Design & Web Development videos each week focusing on tools, techniques, projects, and more to help creative people make amazing things. If you're an aspiring Web Designer, UI Designer, or Front-End Developer who is interested in creating awesome things in pixels and code, make sure to subscribe for helpful training videos.
The channel focuses on topics such as web design and development including but not limited to HTML, CSS, Sass, Javascript, Design Principles, User Experience, Interface Design, MODX, Open Source Stuff and more. Please subscribe and say hi in the comments so we can all be a happy internet family.
The channel focuses on topics such as web design and development including but not limited to HTML, CSS, Sass, Javascript, Design Principles, User Experience, Interface Design, MODX, Open Source Stuff and more. Please subscribe and say hi in the comments so we can all be a happy internet family.
Mastering Framer Components | Variants & Variables
In this comprehensive tutorial, we delve into mastering Framer components, focusing on Variants and Variables. Learn why using components can enhance reusability and consistency in your projects. We'll guide you through the process of creating components, understanding and using variants, and implementing variables for your components. We'll also cover interactive variants, states, and working from the Primary to affect everything else. Join us as we rebuild an accordion using nested components. This tutorial is designed to elevate your Framer skills and enhance your design projects. Don't forget to like, share, and subscribe for more tutorials like this.
... Remember to Subscribe goo.gl/6vCw64
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/16252
0:00 Intro
0:35 Basics
3:36 Variants & States
7:47 Variable Properties
12:06 Nested Components
14:09 Accordion
19:06 Outro
... Remember to Subscribe goo.gl/6vCw64
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/16252
0:00 Intro
0:35 Basics
3:36 Variants & States
7:47 Variable Properties
12:06 Nested Components
14:09 Accordion
19:06 Outro
zhlédnutí: 1 479
Video
Framer 3D Transforms
zhlédnutí 3,7KPřed měsícem
In this video, we take a deep dive into the world of 3D Transforms in Framer. We'll explore how to create stunning visual effects and animations in your projects, and how to leverage the power of Framer's 3D capabilities to enhance your design workflow. Whether you're a beginner just starting out or an experienced designer looking to learn something new, this video is a must-watch. Don't forget...
Design with CSS Grid Layout
zhlédnutí 4,4KPřed měsícem
Join us in this detailed tutorial as we dive into the world of Penpot CSS Grid Layout. We'll start with the basics, exploring the fundamental aspects of the grid system in Penpot. Then, we'll move onto the advanced features, showing you how to leverage these tools to create complex and visually appealing designs. Finally, we'll build a Bento Layout from scratch, demonstrating the power and vers...
My Design Tech Stack
zhlédnutí 8KPřed měsícem
In this video, I will be discussing and demonstrating my current tech stack. This includes a variety of tools such as Figma, Framer, Protopie, Nucleo, Jitter, and Notion, among others. These tools help me streamline my workflow, increase productivity, and manage various aspects of my projects. I will also be sharing how I use the Notion Calendar and Tidycal to keep track of all my meetings. Tun...
How Freelancers Can Get Paid for High-Fi Prototypes
zhlédnutí 3,5KPřed měsícem
In this video, we explore how freelancers can leverage the power of ProtoPie - a high fidelity prototyping tool that's a notch above Figma, Principle, and After Effects for complex interactions and device functionality. We delve into its ease of use, cost-effectiveness, and the value it can bring to your freelance work. Learn how ProtoPie can enhance your portfolio, help you charge higher rates...
Master Spacing in UI Design 💪
zhlédnutí 26KPřed měsícem
Join us in this video as we delve into the art of mastering spacing in UI design. We'll share key tips and strategies, such as embracing the 8pt grid for consistent and precise spacing, understanding the basics of spacing, and how to effectively use white space. This video will provide you with the knowledge you need to create a harmonious and visually appealing user interface. Don't miss out o...
Zeplin + Figma | Is this the dream team?
zhlédnutí 4,6KPřed 2 měsíci
Join us as we dive into the world of design delivery, exploring the differences and benefits of two major tools: Figma Dev mode and Zeplin Figma. We'll discuss collaboration, process creation, and the idea of a single source of truth. You'll learn how to use Figma and Zeplin together to optimize your workflow and unite your team. We'll also help you determine which toolset is right for your spe...
Learn Bubble.io in 30 Minutes
zhlédnutí 20KPřed 2 měsíci
Let me guide you through the basics of Bubble.io a powerful platform for building web applications without coding. Learn how to create stunning layouts, implement CRUD functionality, and integrate plugins for community and payment features. Whether you're a beginner or an experienced developer, this video will provide you with valuable insights and practical tips to help you build your own app ...
Framer Crash Course
zhlédnutí 23KPřed 2 měsíci
In this tutorial, we'll cover the basics of using Framer, a powerful tool for designing and building websites without coding. We'll start by setting up site styles, then move on to building a landing page from scratch. You'll learn how to create dynamic components and make your website responsive for all devices. We'll also dive into the exciting world of animations, showing you how to bring yo...
Multiple Revenue Streams for Creatives w/John D. Saunders
zhlédnutí 1,3KPřed 2 měsíci
In this CZcams video, John D Saunders discusses multiple revenue streams for creatives. He explores various strategies and methods to generate income outside of traditional avenues. From affiliate marketing to freelance work, John shares valuable insights and tips to help creatives diversify their revenue streams and maximize their earning potential. ... Remember to Subscribe goo.gl/6vCw64 🤝 //...
Amateur vs Pro UI Design | with examples
zhlédnutí 36KPřed 3 měsíci
In this video, we explore what separates top-tier UI design that attracts clients and lucrative positions from junior-level designs that struggle to gain traction. We'll examine a range of UI design samples, crafted by both novices and professionals, to guide you on your journey towards becoming a first-rate designer. From login & signup interfaces to dashboards and web apps, join us as we delv...
The top 5 Framer features that you should know
zhlédnutí 24KPřed 3 měsíci
The top 5 Framer features that you should know
How to Master Figma and Design 10X FASTER!
zhlédnutí 30KPřed 3 měsíci
How to Master Figma and Design 10X FASTER!
Raising your Rates & Getting Better Clients w/John D. Saunders
zhlédnutí 830Před 3 měsíci
Raising your Rates & Getting Better Clients w/John D. Saunders
From Full-time to Freelance w/John D. Saunders
zhlédnutí 1,6KPřed 3 měsíci
From Full-time to Freelance w/John D. Saunders
This is The Future of Design | Dan Mall
zhlédnutí 2KPřed 4 měsíci
This is The Future of Design | Dan Mall
Why You're Actually Afraid of Design Systems with Dan Mall
zhlédnutí 1,6KPřed 4 měsíci
Why You're Actually Afraid of Design Systems with Dan Mall
Building Responsive UI Components in Figma
zhlédnutí 29KPřed 5 měsíci
Building Responsive UI Components in Figma
SALES | The most important skill that most designers don't have
zhlédnutí 2,2KPřed 5 měsíci
SALES | The most important skill that most designers don't have
Relume AI Website Builder | $3,000 an hour
zhlédnutí 338KPřed 7 měsíci
Relume AI Website Builder | $3,000 an hour
Build a Landing Page without Code | Wix Studio for Beginners
zhlédnutí 14KPřed 7 měsíci
Build a Landing Page without Code | Wix Studio for Beginners
Build a Six-Figure Freelance Business | Steal My Process
zhlédnutí 7KPřed 7 měsíci
Build a Six-Figure Freelance Business | Steal My Process
You just have an opinion on how to make money as an entrepreneur. None of anything in this video remotely related to the evolution or challenges we face in making experiences for customers [ANY BRAND OR PRODUCT HIRING US TO DO SO]. Redefining human behavior is the answer. Data is more important than ever to understand. The tech. Not the pixels. Understanding ML, not Ai. Knowing how to read code, not to avoid it via “no code”. This is what matters now.
It’s not about that sorry. Real design knows how to do one thing above all: reduction of humanity via synthetic humanity. It’s what we want after all.
thanks
Thank you buddy. U r way too good. God bless. May u rise, shine and smile for ever. Have a good, healthy and a content fulll life. Hemant. India. Delhi.
You and about 330,000 will not make $3,000 or $5,000 an hour. Please, reason why he is on CZcams himself 😂
Thank you so much ❤
You're welcome 😊
Are you using the free version or one with the payment option? With the free plan, you cannot keep up with everything you’re teaching.
You should be able to do most things with a free plan as with a paid plan
Really cool video, hope I can find it sooner!! __ Summary by AskTube Chrome extension (BETA) The 60 30 10 Rule: A Guideline for Balanced Color Use in Mobile UI Design. Learn how to use color effectively in your mobile UI design projects, creating a mature, seamless, and non-distracting user experience. This video explores the 60 30 10 rule, a guideline for balancing color usage in UI design, and provides examples of its application. Introduction to the 60 30 10 Rule 📊 00:00 The 60 30 10 rule is a guideline for using color in mobile UI design, ensuring a mature, seamless, and non-distracting user experience. Understand how to use color effectively in your UI design projects. Understanding the 60 30 10 Rule 📝 01:27 The 60 30 10 rule consists of three blocks of color: 60% neutral or base color, 30% primary or secondary color, and 10% call-to-action color. Applying the 60 30 10 Rule in UI Design 🎨 02:46 A design example demonstrates how the 60 30 10 rule can improve the color usage in a UI design, creating a more mature and seamless design. Real-World Examples of the 60 30 10 Rule 📈 03:52 Explore various examples of the 60 30 10 rule in action, showcasing different design approaches and color palettes. Breaking the Rule and Creating Beautiful Designs 🎯 04:32 Discover how designers can creatively break the 60 30 10 rule to create unique and visually appealing designs. Conclusion and Final Thoughts 🙏 05:55 Recap the importance of balanced color usage in mobile UI design and the relevance of the 60 30 10 rule in creating a seamless user experience.
Glad you liked it
Who watch this video in 2024 like👇
Naa bro your content is just amazing, it’s like you personally want the best for us❤
You're the best!
Tried the first two so far and they suck. They're super superficial and basic designs even when you specify exactly what you want.
It’s still rough but AO is getting better every day
Thank you for creating the video - likes Unequivocally !!!!
Your so welcome
So many steps just to build something so simple. I understand Flash was propriety software, but I could have done all this in Flash in less than half hour. Including the animation and music.
Learning curves are hard, no platform will ever compete with the one you know
Only thing I hate about Framer, is the localization pricing ... outrageous!
💯
Kudos to this great content, it is straight to the point, easy to understand. And gives good practices specially on the CSS Flexbox. Totally agree on that! 🍻
Glad you liked it
thanks for providing a clear explanation of components jesse. lots of love from India ❤
My pleasure!
Why I don't have constrains
Eisai ligo baklavas
Nitpick: the intro song is too loud or your voice is too low volume. My ears went boom. But other than that great video😀
Ok thanks!
comming from designing UI/UX for games as a game designer, your videos provide good tips and tricks how to handle or watch for in general for UI/UX topics
From which website every ui ux designer get their needed materials in best pixels
May be this helps for your perfect font pairings : Cottorway pro with Open sans, Quinn display font with any sanserif.
Is there any figma plug-in? Like figma to webflow!...?
❤❤❤
Thank you for such a great tutorial and for showing us how to create our own sections from scratch! Massively helpful for understanding how to make your designs responsive and I managed to follow along and complete everything myself 😊Only part I couldn't replicate was the 3D scroll at the end, when I entered 15 in the X area, I don't see a 3D effect on my image, it just scales up and down? But this was so so helpful though as a complete beginner and thank you very much again! 🙏🏼
Also when I try to expand my nav bar on mobile/desktop versions, it appears as a scrollable container, not just part of the page, how can I fix this? Thanks! 🙏🏼
thank you so much..this was really helpful. All this time my spacing was messed up
How to Penpot a website to Webflow? I am trying out Penpot until realizing it doesn't seem to be integrated with any other apps.
I’ve been doing some bubble dev and I wish I watched this before starting. As someone without web design experience I learned this as I went with a lot of rework. This was a great foundation
Can we use this color rule in Reports, social media posts, or other places?
Can be used as a general Rule of thumb in most places
Nicely done work bro I loved it please make full video on it to understand full Framer.
I’m doing a full 6 part live series soon, stay tuned
Does Superhuman take an existing email like outlook and integrate to respond etc. as it was still located in outlook.
The best explanation of auto layout I’ve seen in youtube👌🏼
Wow, thanks!
hi good morning how can i use relume to copy an entire website and make some changes where i see fit ?
This man is forever hustling. I’m working towards gaining the confidence I need to be like him. He’s an inspiration to a long term unemployed, career switcher. ❤ his course is amazing btw guys.
i like your video but i HATE your thumbnail. i just hate it. why do you need to do a crazy face to make people click? Your content is great you don't need to do this. look the face of the guy from framer university (ie: Framer Trick: Convert 2D Elements into Interactive 3D): just a normal and a honest face look. very sorry for the comment but you don't need this clickbait face. Thanks for your content anyway.
Thanks for the feedback 😊
what a miserable comment lol
Can you do a similar video of choosing ui colours for light and dark mode
Hey Jesse! Please reply lol I would appreciate the clarity. I love your content, as a new UX designer I've improved tremendously since watching your videos. I have a question regarding Framer, can I design, build a website and transfer a website all within framer? Or do I have to use figma first then transfer it over to Webflow then Framer?
Framer is a self contained platform. You can love from Figma to Framer or just design and develop straight in Framer
Good information. Thanks for sharing. I have a question and maybe an idea for a future video. Can you build a Framer site and then add code for payments or other functions that need very secure functions? I'm thinking of building a site in Framer and then passing it off to a developer for more of these high security options. I know I could also dig into the Framer site to find this out but since you amke such great videos, I'd love to see your thoughts and process. Thanks.
Yes you can, you can insert custom code and create code components
@@JesseShowalter Fantastic! Thanks for responding.
Dude stop disappearing
What is the path of least resistance? That is what I care about. Boxes, circles, trialngles....oh my!
Decent video fella nice one!
boycott wix
Really great and helpful video :) Now it's easy to start prototyping!
Great tutorial! Thanks :)
AI tools have transformed my design workflow, making it faster and more innovative. Exploring these top tools has significantly boosted my creativity and productivity. Highly recommend giving them a try! #jedaai #ai
such a great tutorial, really awesome content and education! the poor sound quality made it very difficult for me to keep watching however. The plosives are so rough I feel like my ears are pounding. Wish you could have edited the sound more.
Everything is clear. Brief and clear. No water. Thank you)
nice video jesse
😮