Choosing and Applying UI Colors | 60-30-10 Rule for color palettes
Vložit
- čas přidán 26. 06. 2024
- Improve your UI designs by learning how to choose colors correctly using this 3 step guide. Apply colors like a pro using the 60/30/10 rule.
Learn how to use the horizontal grid to align your designs.
00:00 Intro
00:53 Select main color
01:25 Color palette - Color theory
04:00 60-30-10 Rule
05:11 Re-design 4 UI design principles
11:55 Horizontal grigs
12:52 Common mistakes to avoid
📺 Watch next: Improve UI Designs: • Better UI design skill...
📘 UX Books:
- Dont make me think: amzn.to/3VBi4Bj
- The design of everyday things: amzn.to/3BdWMS
The giveaway competition is now closed, but sign up to receive updated on the next one:
Mailing list: mailchi.mp/ca51b817ab2a/ol6ec...
Instagram: / uxtshili
Twitter: / uxtshili
Tiktok: / uxtshili
💬 HAVE QUESTIONS about UX/UI, tech or Figma? Add it in the comments and I will be happy to answer. You can also let me know what topics you would like me to create videos on
Some of the above are affiliate links, at no extra cost to you.
#figma #uxdesign #ux #ui #colour #colors #webdesign #graphicdesign - Jak na to + styl
Nice content, I like the examples and contrast after your change. It really demonstrates how your point is making design better. Thank you for all those videos!
Glad you liked it!
Thank you so much for this!
This is really helpful 💯
Glad it was helpful!😊
Thanks Tshili...your videos are always on point and very helpful. Keep up the great work and I look forward to your next vid.
Glad you like them! Thanks for watching😊
Thank you so much for this!
Glad it was helpful!😊
This is amazing Tshili! My fave part was applying the techniques we just learned by redesigning existing screens. Love how practical it is and it really makes the lesson stick :)
Thank you so much. Glad it was helpful
All Design Principles in one video. Thanks for making things simple
Most welcome 😊
Bravo Bravo bravo! Huge applause to you for making this great video!
Thank you very much!
Very informative Tshili! Thanks!
Glad it was helpful!
I could sit all day just watching her do thing. She is amazing...nice work there
Thank you so much for watching 😊
really great video. thanks!
Thank you for watching 😊
Beautiful! Thank you ma'am 🙏🏿
Thank you for watching
Yay!🎊🎉
For me, it comes down to these 3 rules when picking colors:
1. Pick colors that harmonize.
2. The picked colors must contrast well
3. Keep it as minimal as possible
For color harmony, there are tools online that help you see which colors harmonize well with whatever color you picked
For contrast, you can incorporate a neutral color. If not, you can turn the colors picked into a neutral by either tinting them whiter or shading them darker, depending on what works better for your needs.
From here, you can apply the 60 30 10 rule.
Yes this is a great way to to pick good colours. Thanks for watching 😊
Thanks Tshili! this was really informative and I will be using the concepts for my business
Glad it was helpful! Thanks for watching
Great! All Design Principles in one video.
Thank you for watching 😊
Very Helpfull for me thanks for the video
Thank you for watching 😊
So beautiful ❤❤❤❤ u go girl !
Thank you
Thank you so much for this great and useful content🥰.
And I would also love to see subsequent tuts video on style guides and components in figma.
Thanks for watching, that might be my next video 😉
@@uxtshili Great, thanks for all you do.
thank you
Thanks for watching😊
amazing video! can you do one on autolayout please?
Yes, added to the list!
This tutorial is absolutely amazing and so clarifying this complex topic… really a lot of congratulations and I thank you sooooo much for this great work.
One big question though…
Even though, as you did, we could see that there is more of this or that color in a design which could feel unbalanced, but how are you doing to calculate the exact pourcentage of the colors already there in a design like you’re doing? That is so mysterious to me. Are you guessing or Is there a plugin or something else to do that please ?
Best,
Apologies for the late response 😊 Thank you so much for your kind words.
It's not a strict calculation, its just a guide to help you when you first get started, just guess, and as you are practicing design you will get more confident with it
Ohhhh ok thank you so much for your great help and also you really deserve all of these kind words. bye
teaching is awesome it would have been good if you could have shared figma file for our better understanding
Thanks for watching. Apologies, I will take that into account next time 🙂
I am always confused when attempting to follow the 60-30-10 rule, particularly in material design systems that use baseline design tokens and assign different functions to colors. I find it difficult as a beginner to understand how to use these unique colors in my designs in a way that makes sense.
Yes I understand, Material design is very rigid in their colours and its very specific to Material design, most designers don't use it unless designing specially for android. As a beginner dont put too much pressure on yourself just keep experimenting, it will get easier 😊
@@uxtshili Thank you for this advice.
"stay away from gray"?
but everybody uses gray
😅
This is Suppose to be a color video right??
Why do you ask?
@@uxtshili You really deviated from it
Was thinking it was mainly for 60 30 10 color principle alone.
All along it was a solid one as always ☺️
Thanks.
@@_efeoghene ok, which parts do you feel deviated from talking about colour? I cant explain the 60-30-10 Rule without explaining colour theory. If you don’t start by picking the right colours, then the 60-30-10 is useless. Then I demonstrated how to actually design with it.
@@uxtshili Alignments and grids
I think if it was on colors.. then the video should be for just for just colors which you delivered as usual.. talking about alignments and laying emphasis on grid's wasn't really cool..I almost forgot I was watching a video on colors actually.