A Practical Color Framework (that works great for almost all website projects)
HTML-код
- Опубликовано: 25 авг 2024
- View the written version of this video and all the resources here: theadminbar.co...
------
Of the many facets of web design, color can be one of the hardest to feel like you have a good grasp on. It’s both an art and science, which can be frustrating for the more “development-minded” folks who don’t have an natural eye for design.
And while clever developers have created very robust frameworks that use particular color spaces and complicated math - in practical terms, I find they’re often overkill in the types projects I’m working on.
Over the years I’ve slowly developed my own framework that works great as a starting place, and is often all I need. Now that I have that dialed in and ran through its paces on dozens of projects, I thought I’d share my system.
If you could use a simple, reliable, and practical color palette for your website projects, then stick around and let’s get started!
-----
💻 Visit Our Website: theadmin.bar/y...
🗨 Join Our Free Community: theadmin.bar/y...
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/y...
🔁 Sell More Care Plans: theadmin.bar/y...
🧮 Use My Website Price Calculator: theadmin.bar/y...
📜 Get My Proposal Template: theadmin.bar/y...
☑️ Get More Done with My Checklists: theadmin.bar/y...
🔴 Live Event Schedule: theadmin.bar/y...
🔧 The Tools I Use: theadmin.bar/y...
⚡ My Agency, OGAL Web Design: theadmin.bar/y...
Short and sweet. Thanks Kyle - this is actionable and particularly useful.
Thanks so much! Really glad you liked it!
Thank you, this makes something that was difficult into something simple and portable.
Tip - This is a great naming convention and it also makes for easy TextExpander shortcuts for when you are in need of your own brand colors in other design areas. Love this tutorial
Yeah, that's a great idea!
I love TextExpander!
10x thumbs up! 👍👍 One of your best videos ever - from concept, to explanation, to seeing it in action. Super super well done man, loved it!! 🔥
Oh dang dude 🙏 Thank you! I actually really struggled to make this one - but it's been one of my best performers 😅
Now the hard part... the next video 😂
What an extreeemly helpful video, thank you very much! I always struggle with the colors and with the corresponding assignment. And then when a color is to be added later, there is a big mess! With this system there is finally order and clarity in the color palette. I will definitely adopt it. Thank you for your very good videos 👍👍👍
So glad to hear it was helpful 🙌 Thanks for the support!
Good pure content, thanks
Glad you enjoyed it, thanks!
Thanks Kyle! I was using a primary, secondary, action (only used for ctas), and accent color (if necessary).
I like your base, brand, and action following the 60-30-10 formula better. It keeps it simple while still building beautiful sites.
Glad it was helpful! Thanks for the support!
Thank you Kyle. Very informative.
Glad you enjoyed it!
Awesome helpful video, thanks!
Thank you! Glad you enjoyed it!
This is excellent content. Cheers
So glad you enjoyed it!
This was really well done and easy to understand! Thank you. Do you have a similar system for your fonts?
Glad you enjoyed it!
Fonts are pretty basic... But if there's interest, I'd be happy to do a video!
@@TheAdminBar I would be very interested!
does base colors have to be neutral colors?
Keen to hear your thoughts on Kevin Geary's latest Blog Post Kyle, where he states the case for not using numbered shades...
I haven't read it, but I subscribe to the philosophy of "do what works best for you" :) Just sharing how I do it not trying to "make a case" for anything.
Great video! I'm clearly using too many colors, lol. :-) I am curious: how do you set up your colors and these naming conventions in the GenerateBlocks customizer? Do you delete all the defaults (and their locked names, such as contrast-2, accent, etc.) and start from scratch with the palette names shown in the video?
Yes, I just delete theres out, put in my own and reassign things in the customizer. Since I use a child theme and a starter site, I only have to do that one time - and then every new project, it's ready to go!
Thank you so much for this informative video. Btw How do you do that? I'm a bit confused. Do you define css variables in your child theme? I still can't figure how this process would be one time and work on your next projects where you use your starter theme? Thanks again ❤
Thank you! As someone who is... color-challenged... this 60/30/10 strategy and generator tools really help find a pleasing color palette so I don't spend too much time messing with it
There's some great info on the 60/30/10 strategy out there if you wanna dig in deeper. Glad you enjoyed the video!
da f*ck is color challenged?