60-30-10 Colors - Design Masterclass

Master colors in UI/UX design with me in just 8 minutes. We'll use a little bit of AI to see how it can potentially help with generating beautiful color palettes, but also our eyes and our brains so we know what we're doing every step of the way.
Get my course:
hype4academy.gumroad.com/l/fu...
In this video I share my trusted palettes, how to pick the right accent colors in user interface design, how to use the 60/30/10 color theory rule and how it works for both interior design and graphics / ui design.
#colors #tutorial #ai
00:00 - Intro
00:04 - UX/UI Design tools
00:13 - AI tools in UI design
00:23 - Color theory
00:40 - 60/30/10 Color rule
00:51 - Interior design 60/30/10 example
01:09 - UI Colors example
01:29 - Colors for beginners
02:17 - Generate colors with Chat GPT
03:17 - Creating a color mockup
03:41 - Tweaking the colors
04:04 - Manual accent color tip
04:40 - My go-to colors in UI design
05:19 - Midjourney UI asset creation
05:58 - Chat GPT for product name and descripton
06:37 - Tweaking the output manually
07:05 - Critical thinking in UI design
07:39 - Future of AI in UX/UI

[@vineesque]

New videos from you always make my day. Thank you for your efforts Michal ✨

[@MalewiczHype]

My pleasure! I'm working hard on improving them at least 1% every time so it makes me happy when they resonate :)

[@maryvalenzuela298]

You have no idea how much I love your videos.

[@MalewiczHype]

Thank you Mary, comments like this motivate me to make more of them :-)

[@OgundipeAyomide868]

Malewicz is undoubtedly my favorite teacher!

[@nicolas90211]

Great Job in the editing, your videos are improving so much!

[@MalewiczHype]

After 3 years I finally learned how my camera works on manual settings ;) Hopefully it'll only get better from here! I appreciate it!

[@Chef12239]

Great video Michal! Partnering with AI is creating color palettes is a gamechanger! I'm looking forward to your course! congrats on 100k subscribers !

[@MalewiczHype]

Thank you! Generally I'd say there are better uses for AI than color, but in any case it's important to not take anything AI does at face value and always use critical thinking to evaluate it : ) It does let us do a lot of things faster though and I'm all for that!

[@sanaassi7328]

you did great man !!

[@muhammadbacar6051]

Great video ! Can't believe we getting this knowledge for free.

[@MalewiczHype]

Well I share about 40% of what I know for free, that's my way of giving back to the community (while the paid stuff pays me bills ;)

[@SkArifHossain]

You are spot on about not to trust blindly AI generated results, using critical thinking always becomes handy 🤩😍🥰

[@MalewiczHype]

That is the main premise of my course - those who really LEARN design well will thrive in that AI future because they'll be able to notice when AI does things well and where it clearly does bad ;)

[@RasTona_]

Very helpful, gr8 presentation.

[@abdoo3301]

This video gave me a lot of things to think about, would play around with it more now, also really enjoyed the new editing style in this one, and the cinematics too, MMM 2.0 is going really well 😉🚀

[@MalewiczHype]

Glad to hear it! Each video will be 1% better than the last ;)

[@m-koke7185]

great work. Now I am member of your community

[@zeusproteus9902]

great video help me alot !

[@shubhamgaikwad4182]

Great! The 60/30/10 colour rule in UI Design is well known, and to see AI helping out with choosing colours as per product is cool, would try this out.

[@MalewiczHype]

It can help but what it really boils down to is using critical thinking to make the right choices from what AI shows you - that way you can have both good results and fast :)

[@mauriciocastro2876]

Nice work! 😁

[@abdulrehaman2406]

Loved it Thank you for your insights and breaking down complex things into bite sized information. You rock!

[@MalewiczHype]

Thank you! I hope to explore this format of talking and some designing in the future as well.

[@abdulrehaman2406]

@@MalewiczHype If you don't mind answering, can you tell me the perks I can have if I join the channel?

[@MalewiczHype]

You mean the members area here? It has some live streams with live designs and commentary and some exclusive videos. And every now and then some new exclusive videos get added.

[@abdulrehaman2406]

@@MalewiczHype Thank you for letting me know 😇

[@wareswaricz6948]

Spot on 🔥 🔥

[@creativereflux4336]

Thanks! Very helpful!

[@MalewiczHype]

Glad it helped!

[@jinn7821]

The sad part about your videos is...... they end😉😉

[@MalewiczHype]

With this amazing community I am seriously considering doing 2 videos per week ;)

[@jinn7821]

​@@MalewiczHype yaay!🎉

[@user-tp2nc9so4u]

Thank you!

[@MalewiczHype]

You're welcome!

[@CookJungle]

Great video ❤

[@djashawe88923]

Thanks a lot for the great content, as always. At 7:11, as a quick suggestion, it would be nice to have a side-by-side comparison of the before and after in a single frame for easier scanning. 🤓💯👍

[@im_mojammel]

This is video makes me your subscriber. I'm a newbie at design and I really want color suggestion that you given. Thank you very much!

[@lukakamber1609]

Great video again Michal, definitely agree with you when it comes to blindly trusting AI. Another reason why I believe that AI won't replace designers, but designers who know how to use AI to complement their skills will strive.

[@MalewiczHype]

I'd say designers who totally nail their design skills AND know how to use some AI tools will thrive - just a rephrase, but I think it better encapsulates my point here :)

[@jacksparr0w300]

Have you by chance thought of terminal colors? Also would those rules apply to terminal themes?

[@veeramani-cm7mq]

thanks bro

[@thatoramphore]

Awesome video🙂. What's the name of the software used for the rotating phone at 7:18?

[@OneBrighDay]

Interesting, I have gotten in the habit of using the Material UI method for color. For example, I choose a primary color, #3DE4C1, as a base 500, then ramp up or down from 50 to 900. 50 will be my "white", #FBFEFE, 900 will be my black, #041F1A, then my secondary is an accent color I use every once in a while, #9F14FB, would be my 500 secondary color. I think this is one of the things Material UI does really well because you have all the colors you need and their shades.

[@langdoo]

hi. is the accent color the primary in material 3 design?

[@CoolIntellect]

Wow, You're a true game-changer, and I can't thank you enough for making such complex topics so engaging and simple to understand. 🙌 I have a request for you: could you consider creating a detailed video on colors? It would be fantastic to see you dive into topics like brand colors, primary colors, secondary colors, color palettes, and all the in-depth stuff. I know it would be the best ever! P.S. (I mean, okay, I just mastered it this way, and now I want to take it to that next level. I know it's a good starting point, and I will understand more by practicing, but if you make a video as well, then it's going to be a game-changer.)

[@MalewiczHype]

I'm quitting these in-depth videos, they take too much time and energy.

[@CoolIntellect]

@@MalewiczHype I truly appreciate the value your videos have brought to my understanding. While I understand the challenges of in-depth content, I want to express my gratitude for your contributions to the community.

[@UmairUlhaque]

Wow, it is a true and natural use of AI with a little bit of human effort. It is the reason I enjoy your content because you do things with logic in mind. I am wondering how you removed the background in the first place without going inside the Sketch. Thanks!

[@LateAgainTube]

This function is actually built in macOS. Just right click on the photo and remove background ;)

[@morganmay9149]

I’d be curious to see how AI could cut down time it takes to build out more involved color systems. ie button states, dark mode, etc. Right now it seems like most people would be better off just making their own single accent color vs using AI just to generate one color. Lots to look forward to I think!

[@MalewiczHype]

I think general purpose AI systems won't get good at it as it's not their goal. But someone will definitely make more specialized AI's (I for one am working on something like that myself too) so we will have some practical uses too :)

[@burlondesign]

Hi malewicz, congrats for the 100k! I have a question about the 60-30-10 rule, i usually combine the background color and the text color in the 60% (white and black), is that wrong? I do because i want an extra color over the accent one.

[@MalewiczHype]

It's not wrong, but generally having an extra hue outside of accent makes it harder to do the colors well - you need more skills and experience to pull it off :)

[@user-cv3qm9qu3f]

What font do you use?

[@brain_respect_and_freedom]

👍☕I'm ready our COLORFUL MASTER😜

[@MalewiczHype]

My choice of clothing paints a pretty glum picture (only greyscale stuff ;)

[@brain_respect_and_freedom]

@@MalewiczHype I was thinking about your knowledge and rich personality. 👍

[@user-pu3pf1sv4s]

Great video like always! can I ask what tool did you use to remove the background that quick!?

[@MalewiczHype]

It's built into the mac itself - in the system.

[@henrikjuhl6587]

@@MalewiczHype How? Built with Automator? 🤔

[@PetersonJoseph]

Hey, I seem to have missed out on pre-orders for this course. Is there anyway to get some of that preorder love?

[@MalewiczHype]

Likely yes :)

[@PetersonJoseph]

@@MalewiczHype Email sent, thanks Michal!

[@fatkhyfarhat398]

what is the name of the website you searched to find seats?

[@MalewiczHype]

You mean the AI generator? Midjourney

[@christianachleitner9439]

1:30 to 2:17 - The button text is definitely off / not perfectly centered ;)

[@Moonislam25]

Intro music name?

[@nobody-bt7mu]

I was here!

[@MalewiczHype]

Great!

[@felcastt]

Hi Michal! I'm having trouble locating the link to your AI course within Hype4Academy. Could you please provide me with the direct link? Apologies for the inconvenience! I want to get it before the price rises.

[@MalewiczHype]

Hey, the course is on our gumroad page hype4academy.gumroad.com for now. However due to my health problems right now the launch date has been postponed a little (likely to 10th of April) so the price will stay lower at least until that point.

[@felcastt]

Thanks, I forgot about gumroad for a second. I'm sorry to hear that you're facing health problems right now. Feel better ! Cheers

[@freaky425]

First tell me what font you used in the video 😂 it's amazing

[@dwojczuk1]

I once been told (by a Head of Design so not some random designer) that white and grey shouldn't be concidered as primary,secondary etc as they are neutrals and this is whole different thing. 🤷‍♀️ are there different approaches to this?

[@MalewiczHype]

Technically it can be interpreted both ways - I prefer to include neutral colors in the mix, because it helps (esp. junior people) not to pick too many colors for the interface - with just one accent. And when people aren't 100% sure of what they're doing having two neutrals and one accent is the best way to get a good result.

[@dwojczuk1]

​@@MalewiczHype makes sense 😊

[@talfrei]

WHy don't you use Black for text?

[@MalewiczHype]

too high contrast

[@xaincc]

Fix position is moved to prototype if you guys are confused about it.

[@dwayneadams348]

what kind of mouse is that?

[@MalewiczHype]

MX Vertical

[@PixelDough]

I wonder if ChatGPT was getting a little confused by the 10% rule of the accent color, thinking it might have something to do with the color being not as important and not as bright somehow.

[@derpauloferreira]

🎉🎉🙏🙏🙏🙏

[@MalewiczHype]

✨

[@SLApple-hp9ed]

From my observation, "60/30/10" is a safety design, and it won't make your artwork outstanding; however, it would flat your artworks and make them tedious. Google's Design team has always mentioned how useful the 6/3/1 rule is, and nevertheless, Google has created tons of toy-out-fashion designs over the years.

[@MalewiczHype]

It's more of a starting point for beginners and in that regard definitely worth exploring. After a while though you can get out of that comfort zone and do stuff like two strong accents - once you're comfortable matching them. But I try to not push people (esp juniors) too far into the exploratory before they get the basics right so I rarely cover those more advanced things.

[@DrSoWhat]

· serenord ·

[@ervn84]

i'm an artistic type, now i feel dummy after watching this

[@astrahcat1212]

Tutorial on how to use AI 😢

[@GinaMaher_]

*NordiSerenity - I can't tell if we're laughing at ai or it's laughing at us ha

[@GinaMaher_]

I'm warming too it, next range - NordiWar (punk) OR we go full nerd - NordiBuffy, NordiAngel, NordiFirefly 🤓

[@MalewiczHype]

Probably both

[@MalewiczHype]

Yeah AI is really kinda far from creative ;)

[@ArielLilly]

That's not figma, what's it?

[@TheChronoTiger]

it's Sketch for MacOS

[@yangguo402]

It doesn’t make much sense to ask Chat GPT to generate colors in this video ……

[@evilballer]

In reality uses more than three colors

[@skilletborne]

Just don't us AI? If you cannot do, learn, hire, or collaborate. If your idea is worth enough, you will either put the effort in or get someone who can

[@Vitoria-ug9cc]

I'm sorry, but using chatGPT to decide your colors is the most braindead idea I have ever heard in my life. Adobe Color has been right there for free for a decade. GPT is a text generator untrained in design or any visual media, I am surprised it knew what 60-30-10 even meant. It's going to give you shit colors, it doesn't know what a good color is, that discrimination was never in its training data. GPT is not an everything tool.

[@m-koke7185]

great work. Now I am member of your community

[@m-koke7185]

great work. Now I am member of your community

[@m-koke7185]

great work. Now I am member of your community