60-30-10 Color Rule

  Рет қаралды 1,875,951

Jesse Showalter

Jesse Showalter

2 жыл бұрын

How do you apply color in mobile UI design projects? Here's a little tip, the 60-30-10 color rule(it's more like a guideline) will help you to get a good start to applying color in a mature and seamless way... Remember to Subscribe goo.gl/6vCw64
How can you use color inside of your mobile UI design projects to come out looking really mature and really seamless and really well thought out and not obnoxious and loud? And really the worst thing that it could be is distracting. Well, you might want to use a little rule or guideline called the 60 30 ten rule, which is going to help you to understand how to use color, how to implement color, and when to break that rule. We're going to talk all about that coming up next.
------------------------------------------------------------------------------------
🤝 //////////// Learn UI Design in 30 Days with me
www.30dayui.com/
🏆 //////////// Join my members community to get access to perks:
designchamps.io/
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🎨 ////////// I design in Figma
psxid.figma.com/xcm8rxa8f162-...
🖥️ ////////// I build websites with Webflow
webflow.grsm.io/4495884
📅 ////////// 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/1...
------------------------------------------------------------------------------------
Design Examples:
dribbble.com/shots/15571949-T...
dribbble.com/shots/15460654-T...
dribbble.com/shots/17637163-E...
dribbble.com/shots/17446776-H...

Пікірлер: 772
@GreenDimka1
@GreenDimka1 2 жыл бұрын
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.
@NotAnnaJones
@NotAnnaJones 2 жыл бұрын
I hate math. I’m great at color. 🙂🙂
@silhouettestories3669
@silhouettestories3669 11 ай бұрын
Lol not all designers are bad at maths tho.
@raja_uma1r
@raja_uma1r 8 ай бұрын
I strongly agree with that one! I'm a really good Mobile Developer but I suck at design!
@gintoki_sakata__
@gintoki_sakata__ 8 ай бұрын
​@@raja_uma1r😭 you just described me in 1 sentence Just show me what to make and consider it done
@Bhushankadam011
@Bhushankadam011 8 ай бұрын
I suck 50-50 at both
@cody9430
@cody9430 2 жыл бұрын
This was a great video, as a developer I've always struggled with colours so knowing these kinds of heuristics is super helpful!
@jamiepark9700
@jamiepark9700 2 жыл бұрын
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.
@minma02262
@minma02262 2 жыл бұрын
@@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.
@Simone-nw9lf
@Simone-nw9lf 2 жыл бұрын
@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.
@illogicallogic2039
@illogicallogic2039 2 жыл бұрын
@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.
@vladput5549
@vladput5549 2 жыл бұрын
kzfaq.info/get/bejne/ob58dbZ5x63HqJc.html sauce
@Jonpey
@Jonpey 2 жыл бұрын
Love how you don’t stretch out your videos unnecessarily. Great presentation and I learned something super quick!
@jesusislord6545
@jesusislord6545 2 жыл бұрын
Repent to Jesus Christ “In the same way, the Spirit helps us in our weakness. We do not know what we ought to pray for, but the Spirit himself intercedes for us through wordless groans.” ‭‭Romans‬ ‭8:26‬ ‭NIV‬‬ J
@DrummerJacob
@DrummerJacob Жыл бұрын
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.
@mendyc158
@mendyc158 10 ай бұрын
…? Many people Longer videos makes you more watch time, and KZfaq 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
@jawsstech
@jawsstech Жыл бұрын
The simplicity, clarity, and overall usefulness of this video made me a subscriber.
@P3d3r0s0
@P3d3r0s0 2 жыл бұрын
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.
@carnilino.m
@carnilino.m 2 жыл бұрын
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.
@andreasmortensen6809
@andreasmortensen6809 2 жыл бұрын
Eh just copy someone elses UI
@RodXLeon
@RodXLeon 2 жыл бұрын
@@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. 🔥
@sofnaji
@sofnaji 2 жыл бұрын
If you prefer the backend the fronted will always confuse you dude 🤣
@Apparentt
@Apparentt 2 жыл бұрын
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
@massiah1298
@massiah1298 2 жыл бұрын
This is one of the best recommendations KZfaq gave me.. Using synchronized colors was always a tough thing to do..
@jennifermagpantay7933
@jennifermagpantay7933 2 жыл бұрын
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!!
@clothdiaperlk
@clothdiaperlk 4 ай бұрын
Me too..👍
@mytripsvideos4511
@mytripsvideos4511 10 күн бұрын
immature haha
@NotAnnaJones
@NotAnnaJones 2 жыл бұрын
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.
@thetechnologyblues2207
@thetechnologyblues2207 2 жыл бұрын
This is probably one of the best Design suggestions I got in several years, that too finding it in a random KZfaq Suggestion is absolutely a blessing. Thanks 😄
@adevikthur
@adevikthur Жыл бұрын
I love how clean designs make the usability way easier.
@stevecarter8810
@stevecarter8810 2 жыл бұрын
The idea of a "call to action colour" was my main takeaway here. BFF not understood by enough people who have ui responsibility
@noahpedraza2659
@noahpedraza2659 2 жыл бұрын
This is the type of information that is going to stick on the back of my head and guide me. LOVE IT!
@noumanwajid
@noumanwajid 2 жыл бұрын
So much value for a product designer in just 6 min. 🔥🔥
@MeMyselfAi-kg2ep
@MeMyselfAi-kg2ep Жыл бұрын
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!🎉
@nepalesecreator8671
@nepalesecreator8671 2 жыл бұрын
60 - use more often in the ui 30 - used half our main colour 10 - extra color used really less
@PresentationProcess
@PresentationProcess 2 жыл бұрын
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.
@woodpalletprojects4318
@woodpalletprojects4318 2 жыл бұрын
I love this stuff. Breaking it down for anyone to understand is gold. Thank you.
@mahdiyehgachuyi8992
@mahdiyehgachuyi8992 10 ай бұрын
That was so good, I always get confused when using colors for my design, but with this rule, it's much easier✨️
@DeviLz1337
@DeviLz1337 8 ай бұрын
You showing examples was extremely helpful, super easy to learn this way, thanks! ❤
@ameereeo
@ameereeo 2 жыл бұрын
Man, I have seen a lot of videos about this rule but they always confused me. but this is right on point, Thanks jesse.
@Kellhound32
@Kellhound32 4 ай бұрын
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.
@MowizosCrib
@MowizosCrib 2 жыл бұрын
Great video. Straight to the point. Clearly explained. Short and sweet. Earned a sub.
@2402773096
@2402773096 8 ай бұрын
Wow, this video has solved a lot of clashes that happens between designs, stakeholders & developers. Thank you for making this concept so simple. 👌🏾
@JesseShowalter
@JesseShowalter 8 ай бұрын
Glad it was helpful!
@adeisaac
@adeisaac Жыл бұрын
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
@scratchgd5604
@scratchgd5604 2 жыл бұрын
ive heard this phrase a lot but never knew what it meant until now, thanks for explaining it!
@ahsath
@ahsath 2 жыл бұрын
Really helpful didn't even knew this rule existed
@bonniehoke-scedrov4906
@bonniehoke-scedrov4906 11 ай бұрын
This is my first time enjoying your KZfaq channel. Great content! Looking forward to hearing more from you! Your video was so informative. Thank you so much!
@viniciusps01
@viniciusps01 2 жыл бұрын
Bro, this is really great from now on I'm really sure my designs will be a lot beautiful and meaningful.
@leticiasayonara_
@leticiasayonara_ 2 жыл бұрын
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!
@lesitonio6402
@lesitonio6402 2 жыл бұрын
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.
@beneaththefloorboards
@beneaththefloorboards 2 жыл бұрын
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.
@mikeys4u
@mikeys4u 2 жыл бұрын
The 60-30-10 rule is so last year... 59-32-9 is on trend.
@mariumbegum7325
@mariumbegum7325 Жыл бұрын
Really easy to understand - looking forward to viewing more!
@livio8
@livio8 2 жыл бұрын
Wow! This video made understanding this colour rule a lot easier! Thank you for sharing! 😃
@VijayKumar-hp7xs
@VijayKumar-hp7xs Жыл бұрын
i was always confused with colors, this video made my life easier thanks alot
@kissgergo5202
@kissgergo5202 2 жыл бұрын
I liked the first version better honestly
@johnisaaccastillo3822
@johnisaaccastillo3822 2 жыл бұрын
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
@abrahamolaobaju2266
@abrahamolaobaju2266 10 ай бұрын
simple and straight to the point
@MrNasacort
@MrNasacort 2 жыл бұрын
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
@user-xm6bx7tz8u
@user-xm6bx7tz8u 7 ай бұрын
Solved my problem in 3 minutes, I play every video in 2x speed, thanks man
@squiggy18
@squiggy18 2 жыл бұрын
This is super helpful in providing a guideline, logic to follow.
@naomeecreates
@naomeecreates 7 ай бұрын
Thank you. This has helped me TREMENDOUSLY!
@VincentForDesign
@VincentForDesign Жыл бұрын
Well-articulate theory Well-chosen supporting examples and perfect lengthed video! Subbed!
@crisdolister
@crisdolister 7 ай бұрын
Ohh that was a great information about the colors! You help me and now I'll use these rules in my projects.
@guagua8886
@guagua8886 2 жыл бұрын
Super informative video, I’m glad I got it recommended! I’ve always had trouble with keeping a color palette
@AngelFX21
@AngelFX21 2 жыл бұрын
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
@engr.ahmadkhan2625
@engr.ahmadkhan2625 5 ай бұрын
Thank you so much 😍I always got confused about how to manage different colors in design
@fajobioluseun
@fajobioluseun 8 ай бұрын
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.
@JesseShowalter
@JesseShowalter 8 ай бұрын
oh man! Thank you so much for your support and encouragement! It means so much!!
@Hostelgeeks
@Hostelgeeks 2 жыл бұрын
Simple and clear! Thanks for sharing this, super useful!
@orange92670
@orange92670 2 жыл бұрын
Was creating on website, it was very useful to review my colour designs, greatly appreciated
@ibadur-rehman
@ibadur-rehman Жыл бұрын
Lovely guide to using color in the application.
@bronxandbrenx
@bronxandbrenx 10 ай бұрын
Love this video, simple but impactful
@CanadianChick811
@CanadianChick811 2 жыл бұрын
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.
@GulfCoastGrit
@GulfCoastGrit Жыл бұрын
How did it come out?
@mm_99321
@mm_99321 2 жыл бұрын
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.
@uriellatagnipes2792
@uriellatagnipes2792 4 ай бұрын
This is very helpful for me. thanks for sharing.
@kaywin15
@kaywin15 2 жыл бұрын
Honestly, this rule is great! Love it! Amazing video.
@geodigitalmarketing9747
@geodigitalmarketing9747 Жыл бұрын
Man, i just love you for quality content and no BS time wasting time dragger intro
@manojsinghrawat8211
@manojsinghrawat8211 Жыл бұрын
Great video, i was confused while choosing colours but this 60 30 10 rule helped me out... thanks mate
@VEOdev
@VEOdev 2 жыл бұрын
I think it all about taste , designer sometimes overreacting about things that have to look like modern and how they study or how they used to see things , but from a client perspective a regular person who doesn't learn about colors and design he may like the colorful one , and I do like the first one more , the second one feels blank and dead and depressed and really hard to see on it and tbh I hated it , sometimes colors gives you life and you like to look at it , but ofc you need to know how to mix those colors
@jesusislord6545
@jesusislord6545 2 жыл бұрын
Repent to Jesus Christ “In the same way, the Spirit helps us in our weakness. We do not know what we ought to pray for, but the Spirit himself intercedes for us through wordless groans.” ‭‭Romans‬ ‭8:26‬ ‭NIV‬‬ h
@iamajellyfish
@iamajellyfish Жыл бұрын
@@jesusislord6545 "Wild CHRISTIAN appeared!"
@stinkleaf
@stinkleaf 2 ай бұрын
I appreciate your concise presentation. Makes perfect sense.
@JesseShowalter
@JesseShowalter 2 ай бұрын
Glad it was helpful! Check out my course for more on color www.30dayui.com/
@RomuloHaack
@RomuloHaack 2 жыл бұрын
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.
@EricMiltsch
@EricMiltsch 2 жыл бұрын
Solid video, explained so simply. New subscriber, looking forward to more great videos.
@WittCode
@WittCode 2 жыл бұрын
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
@user-gh4zy8gu6q
@user-gh4zy8gu6q Жыл бұрын
Thank for this video. I am making Power BI reports and already see how I can implement it.
@samehdhamer6889
@samehdhamer6889 Жыл бұрын
this was really helpful for me, Thanks 💖
@prince_ofori
@prince_ofori 2 жыл бұрын
Really appreciate this, wanted to understand this for the longest time as a front-end dev ❤️
@CarlitoeGames
@CarlitoeGames 2 ай бұрын
if any tutorial youtuber deserves an appreciative comment, its you. Great on all metrics, thank you.
@elma_gnt
@elma_gnt Жыл бұрын
This was so helpful; thank you :) came in handy for figuring out my colour palette on Squarespace!
@fndrsm
@fndrsm 2 жыл бұрын
Yap, i like the last example. Remains me of upwork UI, so simple but really clean.
@baiwanzeng-td1zc
@baiwanzeng-td1zc 5 ай бұрын
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.
@cristianvaquero
@cristianvaquero Жыл бұрын
Wooow! thank you for the video, amazing, i didn't know this method
@evadesignagency
@evadesignagency 10 ай бұрын
I loved this! Thanks for your tips.
@cianalu94
@cianalu94 Жыл бұрын
Wow, this video is very straightforward! Thank you!
@danielgrannn
@danielgrannn Жыл бұрын
Awesome rule. I really like that. This was new to me!
@user-yo5jw6xh1p
@user-yo5jw6xh1p Жыл бұрын
its really really useful video as i am so confused in putting up the colors into the design. Thank you so much!!
@MortazaMehrnia
@MortazaMehrnia 2 жыл бұрын
Wow, this is one of the things I really needed. Subscribed and liked 😉
@JavierGonzalez-qg5el
@JavierGonzalez-qg5el 2 жыл бұрын
Great video. Really helpful for a current set of assignments.
@jessicasturchio6573
@jessicasturchio6573 Жыл бұрын
Will you do any videos regarding accessibility and ADA or WCAG standards? It definitely affects the use of colors. There are plenty color combos that comply to the standards - but aren’t always accessible to those with visual impairments when used as a standalone element. 3rd party plugins are not fool proof. Im genuinely interested in how you work within these standards while also producing designs that are creative and visually appealing…it’s something I’ve struggled with since the digital world has become hyper-focused on the issue! (Rightly so). Would love to hear how you approach these challenges as they emerge…
@rafaelborgesbatista2961
@rafaelborgesbatista2961 2 жыл бұрын
Excellent tip! Very useful. It’s the first time I heard about it
@FTomita
@FTomita 2 жыл бұрын
Thank you! This was very enlightening. Regards from Brazil!
@M.Asif66
@M.Asif66 Жыл бұрын
Thanks for explaining beautiful concept of 60,30,10 😊
@Harpie.
@Harpie. 9 ай бұрын
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
@JesseShowalter
@JesseShowalter 8 ай бұрын
Glad it was helpful!
@PixelInsight-vu5yd
@PixelInsight-vu5yd 10 ай бұрын
The designer who uses Brave browser is immediately elevated to a new level of respect in my book!
@han-loom
@han-loom 8 ай бұрын
Thank you so much jesse! i am newbie ui designer.This video helps a lot!
@soultabs
@soultabs Жыл бұрын
I'm a graphic design student and we need to learn more of this stuff in school. Great ressource (Y)
@shovi2934
@shovi2934 Жыл бұрын
super help full!! thank you so much on this vidoe!
@BrayanSanchez-ru6rv
@BrayanSanchez-ru6rv 3 ай бұрын
It's a really useful rule but simple, I never think a but it but it increase the quality of my job!
@Ando_Figueroa
@Ando_Figueroa Жыл бұрын
thanks so much for making this video, i've learnt a lot! definitely subscribed!
@JesseShowalter
@JesseShowalter Жыл бұрын
Thanks for the sub!
@chlima88
@chlima88 2 жыл бұрын
I really suck on design, but this this video gave me a great baseline to follow! Thx!
@fanuel1519
@fanuel1519 Жыл бұрын
Thanks man, very helpful.
@soft6977
@soft6977 9 ай бұрын
i really love it , it's awesome video , and super helpful , thanks a lot
@kkskhin7208
@kkskhin7208 4 ай бұрын
Wow. what a great content. Thank you so much for sharing.
@frazelladesigns6862
@frazelladesigns6862 6 ай бұрын
Thank you! Great video.
@armaanajoomal
@armaanajoomal 9 ай бұрын
informative and straight to the point - thank you!
@xvii145
@xvii145 7 ай бұрын
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.
@princeabelle7137
@princeabelle7137 7 ай бұрын
Cool! Same here, actually.
@8koi245
@8koi245 2 жыл бұрын
Funny how I got a weird idea just by the title but then learned some good concepts whit the video itself!
@yehudamakarov
@yehudamakarov 2 жыл бұрын
This was phenomenal. Thanks.
@emmanuelmwangi3071
@emmanuelmwangi3071 2 жыл бұрын
That was a very cool simple explanation for color rule
@dancu9271
@dancu9271 8 ай бұрын
A lot of thanks for making and sharing your video!!
@JesseShowalter
@JesseShowalter 8 ай бұрын
Thank you so much!!!
@WholesomeHC
@WholesomeHC 9 ай бұрын
Thanks, very helpful information!
Tools for New Designers
7:27
Jesse Showalter
Рет қаралды 49 М.
How I make UI color palettes
8:51
UX Tools
Рет қаралды 368 М.
Is it Cake or Fake ? 🍰
00:53
A4
Рет қаралды 16 МЛН
They RUINED Everything! 😢
00:31
Carter Sharer
Рет қаралды 23 МЛН
UFC 302 : Махачев VS Порье
02:54
Setanta Sports UFC
Рет қаралды 1,4 МЛН
WWDC 2024 Recap: Is Apple Intelligence Legit?
18:23
Marques Brownlee
Рет қаралды 4,7 МЛН
Beginning Graphic Design: Color
6:32
LearnFree
Рет қаралды 6 МЛН
Biggest AI announcements from Apple's WWDC 2024
11:21
The Verge
Рет қаралды 345 М.
Design Better Than 99% of UI Designers
14:52
Tim Gabe
Рет қаралды 178 М.
The Best Email Apps!
6:51
Julio Trois
Рет қаралды 130
60-30-10 Colors - Design Masterclass
8:15
Malewicz
Рет қаралды 54 М.
Best Web Design Resources 2024 Worth Bookmarking
7:03
Codex Community
Рет қаралды 125 М.
Color Theory in UI Design
13:21
Jesse Showalter
Рет қаралды 15 М.
Is it Cake or Fake ? 🍰
00:53
A4
Рет қаралды 16 МЛН