As a developer, after watching this video, I am still confident that: a) designers are bad at math; b) I am bad at design, so will continue hiring designers for the design part.
the first design i actually thought was pretty. but when you revealed the second one, my brain understood how to use the interface so clearly even without reading the text. design is awesome.
Does anyone have an aversion to ux’s chosen vocabulary such as “heuristics” that actually are non-inclusive and alienates more people around what ux is? Always thought “learning by doing” or “using it” made more sense than the verbose heuristics.
@@jamiepark9700 Heuristic is just some "practical method that will immediately work, but will not be optimal or ideal". The word is not exclusive to UX.
@1984ogbrgbxgbGhostbusters Ahahahah I know what you mean, a similar episode happened to me as well. Just out of curiosity, is your car's color crimson? Quite often crimson is confused with purple.
@1984ogbrgbxgbGhostbusters hahahaha I get what you're saying I am also not that perceptive when it comes to anything in general. I never paid attention to colours or even what people I meet wear. I hardly notice changes, not to mention being able to tell between different shades of a colour.
…? Many people Longer videos makes you more watch time, and TH-cam recommends based on watched time/watched percentage Also having more time in the video (specially after 8min) allows for mid roll ads, and you can add more if the video is even longer So many people stretch their videos
I had never heard bout this rule before! Now I can understand why my design looks immature! But now I know how to fix it! Thanks for sharing! Great video!!
This is probably one of the best Design suggestions I got in several years, that too finding it in a random TH-cam Suggestion is absolutely a blessing. Thanks 😄
I'm mostly a backend developer so this was pretty confusing when seeing a 4th color for the font and sometimes other colors being added. It's what I dislike about design, there are no absolutes or precise standards it needs a lot of intuition, or taste, that I don't have.
Neutral colors are used on backgrounds and default text. Brand color can be used to highlight information, like tags, or a background of a card with important information, also can be used for buttons of lesser importance. The action color should be only on the most important and actionable elements, always clickable. Use the colors to represent functionality and hierarchy first and only after that worry about 60/30/10 rule. If you do it right, your design will naturaly fall somewhere into the ratio.
@@carnilino.m those "neutral text colors" could also be the brand colors set to a certain opacity or brightness or whatever so doesn't really matter. 🙃 There are no rules. It is allllll chaos. 🔥
I have to disagree, I’ve been full stack for around 5y now and can definitely say that I previously thought designing was all about having a “keen eye” or whatever but actually IME design is also just a science like anything else, there are systems you can keep in mind that will end up with a good looking UI every time I think being creative and having the inspiration to make things in a certain way can be down to that “keen eye” thing, but implementing a UI that’s been done thousands of times has some very clear patterns you can follow
Thanks Jesse for being a wonderful teacher to me. I am battling with payment issues with my google account and as soon as I resolve this intend to be a paid subscriber so I can have access to more of your educational resources. More grease and grace to your elbows.
This is why I am aiming to be a designer and a fullstack developer in the near future. Im studying UI/UX and I would say alot of the things mentioned are really helpful for widening my view as a whole.
What awesome timing. I'm a newly graduated and partially self taught designer who's been commissioned to create a Squarespace site. I'll totally implement this to it and my portfolio site.
Really good video Im a web developer and I always struggled in how to make my websites dont look distracting with a good selection of colors. Thanks, Keep it up
This is a great video.As a product designer,I always design in bad mood cus I have no rule to design.I am lack of thinking and summary. This rule let us kown how to think and how to design confidently.
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.
I'm not a graphic designer. But as a consumer it have to say if I were scrolling through, I'd choose the original over the cut-down version. The first was much more inviting. So designers might want to do a few mock-ups and run it by people. Just my opinion as a consumer. In the first, the shading drew my eyes down to the lesson units, and the grays clearly delineated the sections. I like that. The second is hard on the eyes. Not a fan of white on black. Just personal preference.
Im kinda starting UX/UI designing at work, I recently designed my first mobile app and this video made me wanna do more apps, such an amazing tip!!! Thanks a lot. Im so gonna subscribe and like this for future references.
I'm not a developper at all, but I clicked on the video and i think this is such a good rule. I'm gonna look for it on every phone app i have now thanks ;)
I always prefer the more simplified and clean application layout. Now thanks to you I know what’s the reason behind this design - so called 60-30-10 rule, which I like a lot.
Thank you so much for this video! I didn’t realize I was kinda following this already but I just didn’t know what it was called. This method is so sleek and nice with cool accents
Wow this helped me a lot. My computer teacher tasked us to do a webpage project and I got this in my yt feed. Thanks for the help. I will definitely subscribe for more videos.
This is my first time enjoying your TH-cam channel. Great content! Looking forward to hearing more from you! Your video was so informative. Thank you so much!
I've been making digital designs for my business and projects for years and never realized this. I think I kind of learned to understand it, but always wondered why some of my designs were 🔥 and some were 🗑. Thanks for this info.
Incredible! The 60-30-10 color rule is such a classic yet powerful design principle. We at Ceros often refer to these foundational rules while creating our own designs. Your explanation is spot on, and it's content like this that continues to inspire and guide the creative community. Well done!
That's actually good for using in Apps or sites that doesn't require buttons' hierarchy (eg: call to action vs inline actions vs confirms, excludes, etc) - after all, if you use all the same color for everything, you end up breaking hierarchy for what you *need* to highlight the most or specifically :) Good content bro.
Thanks for this great advice, a dev for about 9 years and still struggling with the proper combination of color and it's scope in the design, lot of thanks
The 60-30-10 rule is a guideline for using color in UI design. The rule suggests that you use 60% of a neutral or base color, 30% of a primary color, and 10% of a secondary color. The secondary color is typically a call-to-action color that draws attention to important elements in the design. However, it is important to note that this rule is not strict and can be broken if necessary. The primary color is important but not as important as the call-to-action color, which should be used sparingly. By following this rule, you can create a mature and seamless color scheme for your mobile UI design projects.
Wow thanks so much! Ive always thought my programming projects looked good in my head and then when I actually make them they look atrocious! Definitely going to use this
As a developer, after watching this video, I am still confident that: a) designers are bad at math; b) I am bad at design, so will continue hiring designers for the design part.
I hate math. I’m great at color. 🙂🙂
Lol not all designers are bad at maths tho.
I strongly agree with that one! I'm a really good Mobile Developer but I suck at design!
@@raja_uma1r😭 you just described me in 1 sentence
Just show me what to make and consider it done
I suck 50-50 at both
the first design i actually thought was pretty. but when you revealed the second one, my brain understood how to use the interface so clearly even without reading the text. design is awesome.
The simplicity, clarity, and overall usefulness of this video made me a subscriber.
This was a great video, as a developer I've always struggled with colours so knowing these kinds of heuristics is super helpful!
Does anyone have an aversion to ux’s chosen vocabulary such as “heuristics” that actually are non-inclusive and alienates more people around what ux is? Always thought “learning by doing” or “using it” made more sense than the verbose heuristics.
@@jamiepark9700 Heuristic is just some "practical method that will immediately work, but will not be optimal or ideal". The word is not exclusive to UX.
@1984ogbrgbxgbGhostbusters Ahahahah I know what you mean, a similar episode happened to me as well. Just out of curiosity, is your car's color crimson? Quite often crimson is confused with purple.
@1984ogbrgbxgbGhostbusters hahahaha I get what you're saying I am also not that perceptive when it comes to anything in general. I never paid attention to colours or even what people I meet wear. I hardly notice changes, not to mention being able to tell between different shades of a colour.
th-cam.com/video/kXLBSHbGcxc/w-d-xo.html sauce
I love how clean designs make the usability way easier.
Love how you don’t stretch out your videos unnecessarily. Great presentation and I learned something super quick!
Who stretches out their videos unnecessarily and why? It doesn't earn you more money and it requires a lot more hard work filming and editing.
…? Many people
Longer videos makes you more watch time, and TH-cam recommends based on watched time/watched percentage
Also having more time in the video (specially after 8min) allows for mid roll ads, and you can add more if the video is even longer
So many people stretch their videos
This is one of the best recommendations TH-cam gave me.. Using synchronized colors was always a tough thing to do..
I had never heard bout this rule before! Now I can understand why my design looks immature! But now I know how to fix it! Thanks for sharing! Great video!!
Me too..👍
immature haha
I’m an artist but I love using logic. This is why your method is so calming and satisfying to my nerves. Ahhhh. Thank you.
This is the type of information that is going to stick on the back of my head and guide me. LOVE IT!
This is probably one of the best Design suggestions I got in several years, that too finding it in a random TH-cam Suggestion is absolutely a blessing. Thanks 😄
Solved my problem in 3 minutes, I play every video in 2x speed, thanks man
So much value for a product designer in just 6 min. 🔥🔥
As a developer this is the king of content I like to see, because we're not designer haha
I'm mostly a backend developer so this was pretty confusing when seeing a 4th color for the font and sometimes other colors being added. It's what I dislike about design, there are no absolutes or precise standards it needs a lot of intuition, or taste, that I don't have.
Neutral colors are used on backgrounds and default text. Brand color can be used to highlight information, like tags, or a background of a card with important information, also can be used for buttons of lesser importance. The action color should be only on the most important and actionable elements, always clickable. Use the colors to represent functionality and hierarchy first and only after that worry about 60/30/10 rule. If you do it right, your design will naturaly fall somewhere into the ratio.
Eh just copy someone elses UI
@@carnilino.m those "neutral text colors" could also be the brand colors set to a certain opacity or brightness or whatever so doesn't really matter. 🙃 There are no rules. It is allllll chaos. 🔥
If you prefer the backend the fronted will always confuse you dude 🤣
I have to disagree, I’ve been full stack for around 5y now and can definitely say that I previously thought designing was all about having a “keen eye” or whatever but actually IME design is also just a science like anything else, there are systems you can keep in mind that will end up with a good looking UI every time
I think being creative and having the inspiration to make things in a certain way can be down to that “keen eye” thing, but implementing a UI that’s been done thousands of times has some very clear patterns you can follow
Really helpful didn't even knew this rule existed
The designer who uses Brave browser is immediately elevated to a new level of respect in my book!
Excellent overview of the 60-30-10 color rule! Your breakdown of how to effectively apply this principle in design is very insightful
Glad you enjoyed it!
if any tutorial youtuber deserves an appreciative comment, its you. Great on all metrics, thank you.
Wow, this video has solved a lot of clashes that happens between designs, stakeholders & developers. Thank you for making this concept so simple. 👌🏾
Glad it was helpful!
As a startup founder, this just saves me so much time! Thank you
Glad it helped!
Thanks Jesse for being a wonderful teacher to me. I am battling with payment issues with my google account and as soon as I resolve this intend to be a paid subscriber so I can have access to more of your educational resources. More grease and grace to your elbows.
oh man! Thank you so much for your support and encouragement! It means so much!!
Funny how I got a weird idea just by the title but then learned some good concepts whit the video itself!
Thanks!
Man, i just love you for quality content and no BS time wasting time dragger intro
This is why I am aiming to be a designer and a fullstack developer in the near future. Im studying UI/UX and I would say alot of the things mentioned are really helpful for widening my view as a whole.
Cool! Same here, actually.
Jesse, this video was straight Heads and Tails, bruh! 😼
The 60-30-10 rule is solid.
What awesome timing. I'm a newly graduated and partially self taught designer who's been commissioned to create a Squarespace site. I'll totally implement this to it and my portfolio site.
How did it come out?
Really good video Im a web developer and I always struggled in how to make my websites dont look distracting with a good selection of colors. Thanks, Keep it up
Not even a UI designer but I really enjoyed watching this and now I know a little bit more about what my dad does, he's also a UI designer
I appreciate your concise presentation. Makes perfect sense.
Glad it was helpful! Check out my course for more on color www.30dayui.com/
Great tips for use in any kind of design! Keep attention focused on a very limited area with a bright color. Thank you for sharing.
Me now checking all my phone apps to prove the concept.
Thank you!
As a newer designer I am glad to have been recommended this video. Helped with my landing page, Thank you sir! You are a gentleman and a scholar!🎉
This is a great video.As a product designer,I always design in bad mood cus I have no rule to design.I am lack of thinking and summary.
This rule let us kown how to think and how to design confidently.
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
I'm just getting into UI, and wanted to learn the right way for color patterns. Thank you!
Happy to help! Check out my UI program www.30dayui.com
youtube just recommend this video, and this will add a lot into my mobile dev skill
Thanks for this. This is the side of this industry that I love :)
yeaahhhhhhh!!!!
This 6 minutes Skill is literally INCREDIBLE!
I know this is simple tip but it make's a whole lot of difference! thanks
Glad it was helpful!
Amazing, this is a rule used in interior design!
I teach a little of this in my web class, but codifying it the way you did is super useful. Thank you for taking the time.
Man, I have seen a lot of videos about this rule but they always confused me. but this is right on point, Thanks jesse.
The 60-30-10 rule is so last year... 59-32-9 is on trend.
Thank you so much 😍I always got confused about how to manage different colors in design
Ohh that was a great information about the colors! You help me and now I'll use these rules in my projects.
The idea of a "call to action colour" was my main takeaway here. BFF not understood by enough people who have ui responsibility
i was always confused with colors, this video made my life easier thanks alot
That was so good, I always get confused when using colors for my design, but with this rule, it's much easier✨️
I'm not a graphic designer. But as a consumer it have to say if I were scrolling through, I'd choose the original over the cut-down version. The first was much more inviting. So designers might want to do a few mock-ups and run it by people. Just my opinion as a consumer. In the first, the shading drew my eyes down to the lesson units, and the grays clearly delineated the sections. I like that. The second is hard on the eyes. Not a fan of white on black. Just personal preference.
I thought so too, i was starting to doubt my taste 😞
the guy who made the vid is just speaking nonsense
@@vasilicarafizi No, he doesn't. He's just teaching us a rule, wich you can follow or not, simple as that.
It's not an absolute rule, it's a guide
Im kinda starting UX/UI designing at work, I recently designed my first mobile app and this video made me wanna do more apps, such an amazing tip!!! Thanks a lot. Im so gonna subscribe and like this for future references.
"...it looks like a yard sale." I need a whole series on this phrase and a whole book of more of these design idioms. So funny.
Hahah, yes, please! Like a small cheatsheet :D
“Yard sale” is also used when a snowboarder takes such a hard slam that their equipment becomes strewn across the slope, looking like a yard sale.
As a front-end developer I find this video super interesting and educational! Thank you for the amazing explanations, you got a sub from me :)
i want to contact you! how can i 😭😭😭😭
Perfect explanation of 60 30 10 rule and great examples
ive heard this phrase a lot but never knew what it meant until now, thanks for explaining it!
I'm not a developper at all, but I clicked on the video and i think this is such a good rule. I'm gonna look for it on every phone app i have now thanks ;)
This is awesome, you just struck that note inside me, I just could not figure out why I was always asking myself what I was missing
I always prefer the more simplified and clean application layout.
Now thanks to you I know what’s the reason behind this design - so called 60-30-10 rule, which I like a lot.
Your voice is perfect :D I'm not even a subscriber, I just came across you
Wow, thank you!
Fantastic video! Thank you so much for this. I couldn't help but notice the "sola fide" in your wall and I loved! God bless you!
I liked the first version better honestly
i just use gray and it looks professional, this video is a big upgrade for me...
Thank you so much for this video! I didn’t realize I was kinda following this already but I just didn’t know what it was called. This method is so sleek and nice with cool accents
Glad it was helpful!
Bravo... you dont need to ask to subscribe your channel your content deserves it.....
Wow this helped me a lot. My computer teacher tasked us to do a webpage project and I got this in my yt feed. Thanks for the help. I will definitely subscribe for more videos.
Glad it helped!
This is my first time enjoying your TH-cam channel. Great content! Looking forward to hearing more from you! Your video was so informative. Thank you so much!
Was creating on website, it was very useful to review my colour designs, greatly appreciated
You showing examples was extremely helpful, super easy to learn this way, thanks! ❤
Bro, this is really great from now on I'm really sure my designs will be a lot beautiful and meaningful.
I've been making digital designs for my business and projects for years and never realized this. I think I kind of learned to understand it, but always wondered why some of my designs were 🔥 and some were 🗑. Thanks for this info.
Thanks, that helped me a lot. Keep up the good work, our community need more guys like you. Respect. ❤
Hey man, nice job on this video. Great explanation.
Hey, thanks!
I like the first example way more than the one that follows this 'rule'
Incredible! The 60-30-10 color rule is such a classic yet powerful design principle. We at Ceros often refer to these foundational rules while creating our own designs. Your explanation is spot on, and it's content like this that continues to inspire and guide the creative community. Well done!
Oh man! Thank you so so much!! I am super appreciative of your kind words and support!!
Great video, i was confused while choosing colours but this 60 30 10 rule helped me out... thanks mate
Really easy to understand - looking forward to viewing more!
Great stuff! Do you have the link to the blog post you mentioned in the beginning of the video?
I really enjoyed this video, just hope this will help me out soon when I work in this field!
Best of luck!
That's actually good for using in Apps or sites that doesn't require buttons' hierarchy (eg: call to action vs inline actions vs confirms, excludes, etc) - after all, if you use all the same color for everything, you end up breaking hierarchy for what you *need* to highlight the most or specifically :) Good content bro.
Lovely guide to using color in the application.
This was really helpful for me to think about the colours on my website. Thanks for making this video!
I'm so glad!
Yap, i like the last example. Remains me of upwork UI, so simple but really clean.
A lot of thanks for making and sharing your video!!
Thank you so much!!!
i'm a dev not a designer but this was still very cool to find out about!
i m a programmer, i never this hooked with a design thingy. Good video, now i knoe why i never felt my game / web allways looks bad 😂😂
I love this stuff. Breaking it down for anyone to understand is gold. Thank you.
Thanks for this great advice, a dev for about 9 years and still struggling with the proper combination of color and it's scope in the design, lot of thanks
Thank''s for this unique information 🤗🤗
Amazing content, great teaching. Thank you!
Thanks so much, man!!
its really really useful video as i am so confused in putting up the colors into the design. Thank you so much!!
thanks man, it's really healpful to me as a beginner!!!
Glad to hear that!
The 60-30-10 rule is a guideline for using color in UI design. The rule suggests that you use 60% of a neutral or base color, 30% of a primary color, and 10% of a secondary color. The secondary color is typically a call-to-action color that draws attention to important elements in the design. However, it is important to note that this rule is not strict and can be broken if necessary. The primary color is important but not as important as the call-to-action color, which should be used sparingly. By following this rule, you can create a mature and seamless color scheme for your mobile UI design projects.
Thanks ChatGpt
@@kfibcudwiefjw7428 😅😅
List companies that utilize this rule
Thanks captain. I think we all watched the same obvious video. Ergo, this info is nothing original except to the originator.
Thanks, I didn’t want to watch 6 minutes of all that
Wow thanks so much! Ive always thought my programming projects looked good in my head and then when I actually make them they look atrocious! Definitely going to use this
Thanks for explaining beautiful concept of 60,30,10 😊
Awesome rule. I really like that. This was new to me!
Best method for color pallet creation? "By the eye" :D - 14+ years in UI design, it never let me down.
Thank you. This has helped me TREMENDOUSLY!
this rule's really helpful!! thanks for sharing! ☺☺
Glad it was helpful!
Honestly, this rule is great! Love it! Amazing video.