How I Organize Colors for a UI Design Project

Рет қаралды 181,023

Күн бұрын

▶︎▶︎ www.udemy.com/course/learnske... - Today I'm taking a step back from my design tool and sharing one of my personal workflows. Organizing colors for a UI design project is a step often skipped and as a result, we create headaches for ourselves. By the end of a project, many hours spent working off the cuff turn into many disjointed colors that send mixed messages to our users. Let's take a look at some of the ways I force myself to get organized from the start to save myself time and afford myself consistency.
-
🐦 Follow me on X:
/ jatodaro
🎉 Download my free 3D illustrations from Shapefest:
www.shapefest.com
📷 The video gear I use:
www.amazon.com/shop/josephato...
🧑🏻‍💻 Design a website for free with Framer:
bit.ly/goframer

Пікірлер: 206

@guiancarlo 5 жыл бұрын

I love the fact that you can just go to KZfaq and learn a lot for free. Thank you for this, Joseph!!

@AdrianLopez-sr3dd 6 жыл бұрын

Ive found this video really really more usefull than i thought that it was going to be when i clicked on it xD

@loliradotopper 5 жыл бұрын

Me too. It’s just boom, knowledge.

@gamasierra 3 жыл бұрын

Same.

@zaturntarto3814 3 жыл бұрын

xD ? Pun intended ?😀

@ruthumez 2 жыл бұрын

Same here! I was pleasantly surprised.

@kitziasalgado 2 жыл бұрын

same

@AnshMehraa 3 жыл бұрын

Really well made! the association of brand colour with error vs success was a really interesting point! Thanks a lot.

@AlexFlores-cl9fo 5 жыл бұрын

Thanks Joseph! Definitely was in the "overwhelmed with possibilities" category and I really appreciate how you broke down the variants of colors actually needed and your process for discovering them. Much appreciated!

@MultiMarty1987 5 жыл бұрын

This video taught me infinitely more than any other video on how to use colour properly - thank you!!

@CuriousWanderer_ 5 жыл бұрын

_The informative video that I have been looking for years is now right before my eyes._ This is what I need. *Perfect.*

@noisydoll168 2 жыл бұрын

Dude I love this. I saw this video as part of Springboard's UI/UX curriculum and had to open it on KZfaq to tell you how much I like your explanations and your sense of humor. I'm definitely going to keep coming back to this channel to supplement what I'm learning there.

@russellbalahadia2984 4 жыл бұрын

This is really useful specially for someone like me that is struggling with color combination. Thank you

@huntrrams 5 жыл бұрын

The animations were oddly satisfying. Great video!!

@arkinzoodsma1510 3 жыл бұрын

Thank you for this great video! I just started getting into UI design and I felt lost. But seeing the way you look and think about design projects worked magic for me! keep up the good work!

@yeaheiamahmudhridoy4590 2 жыл бұрын

Best color explaination video out there in YT! 👍😍

@tcroz7733 6 жыл бұрын

Really helpful! Definitely going to adapt this into my workflow

@temporarythoughts 5 жыл бұрын

This is a great great video! Would love to see more, like: how to organise text styles, how to organise everything.

@erikbriones 6 жыл бұрын

Wow. I have been looking for some sort of guide to come up with brand colors or comply with existing brand colors when developing a product design. This is absolutely helpful. thank you so much!

@RuxandraBklyn 5 жыл бұрын

Instructive, useful AND hilarious. So happy I clicked on this video, thanks!

@shravani9740 2 жыл бұрын

We are being taught accessibility with colours, it's good to see this example of it. Really helpful video!

@aaronruiz816 5 жыл бұрын

Absolutely terrific video, bro. Well done.

@Underhills 6 жыл бұрын

Thanks. That's a nice share. To the point, crisp sound and great hd production AND good content. Can't get any better than that.

@Pankaj-Verma- 4 жыл бұрын

Thank you so much for your kind help!

@Kris-to7vh 3 жыл бұрын

This is such a valuable video! I keep coming back to it everytime i need to do some UI Design, just to be sure I'm taking all these steps. THANKS SO MUCH

@michel_dg5051 2 жыл бұрын

this video is gonna help me out alot. thanks for explaining it so well.

@devegram 3 жыл бұрын

Super informative, directly to the core, pure knowledge which gets you ready to production

@Fullstackdev18 5 жыл бұрын

Your video is simple, perfect and make sense.. thanks for this man😀 subscribed

@ricardorergis2442 Жыл бұрын

Dude this information is pure gold, thanks!

@SaSha-hb5rq 3 жыл бұрын

your channel is so underrated, you have an awesome quality of your visuals and content.

@FleiDiego 3 жыл бұрын

Super helpful these tips! Thanks for sharing!

@nandhagopalgopalsamy1726 6 жыл бұрын

Loved the process and thanks for giving insight into ur process 👌👍

@andreacruz6769 Жыл бұрын

Yesssss, thats what i was looking for. hanks for helping

@hanac5586 Жыл бұрын

Really good small info packet! Thanks

@ArthurLarin 4 жыл бұрын

Great, informative video that still holds up today. Thanks!

@khalidal-hassan2566 4 жыл бұрын

Those are really useful tips ! Thx a million

@mmediaculturel3738 Жыл бұрын

TNice tutorials was so detailed! Great video for beginners. Thank you!

@vlad74745 5 жыл бұрын

Awesome approach!

@user-pe9qg3hg3k 2 жыл бұрын

What a super interesting and amazingly put together video

@SupernovaSites 2 жыл бұрын

Great video. Never thought about using one colour for the interactive elements!

@adi_philosophy 2 жыл бұрын

Thank you soooo much! This is great stuff. saved a lot of my time.

@ashleyleddy194 2 жыл бұрын

Thank you for breaking it down!

@annia9157 5 жыл бұрын

Thank you for this video, it's been super helpful!

@user-yj1fn9dz4z 6 жыл бұрын

This was a great instructional video. Thanks!

@kgay 2 жыл бұрын

Absolutely awesome video.

@ish5057 3 жыл бұрын

"You don't know what kind of screens people are using, you don't know what kind of eyeballs people are using" lol Really instructive video. Thank you!

@JawkneeTango 5 жыл бұрын

Very insightful methodology!

@joenotaverage 6 жыл бұрын

You're awesome dude.. thank you for sharing this video...

@nuvill1123 6 жыл бұрын

Really great video man! Thanks

@nuraydurmus1734 4 жыл бұрын

this is useful for me, because your english(speech) is very clear and I understand it

@ibanezrg7421 4 жыл бұрын

So effing helpful. Thank you!

@Amheklerior 3 жыл бұрын

What a fantastic video buddy :D awesome job.. It's been really useful, thank you

@rectify2003 5 жыл бұрын

Such a good explanation. 👍

@mdmozammel5731 3 жыл бұрын

very helpful😍 thank you, man.

@ruksanakabir46 2 жыл бұрын

Great example of 50 shades of Grey.. Haha very funny. I really love this.So wonderfully explained with lit bit humbleness and humor. Thank You Joseph.

@Faizan56388 3 жыл бұрын

Very helpful. Thanks for sharing.

@djstylistictv 4 жыл бұрын

Im in school for UX/UI so this helps a lot thanks.

@MashaShugrina 6 жыл бұрын

Thank you for posting this very useful tutorial! Could you please elaborate on how you actually organize these colors once you have selected them? What are some good palette management tools? Is there some way to keep a color "cheat sheet" always accessible as you work on your design?

@shriragreddy7193 3 жыл бұрын

Immensely helpful. Thank you for this video

@adevikthur Жыл бұрын

Thanks Joe!

@kike1987 5 жыл бұрын

Great job! Thanks!

@antoineleduc7611 3 ай бұрын

Excellent video, really helpful

@ruggeddog3103 3 жыл бұрын

this is some solid stuff, thanks for sharing man :)

@sinarahimi3041 4 жыл бұрын

Love your video, everything is excellent, animations, dialogs, and it is fun.🤞

@josephatodaro 4 жыл бұрын

Thank you Sina 🙏 I really appreciate that

@MrFarkasOfficial 3 жыл бұрын

Really good stuff!

@mahibhrmi 4 жыл бұрын

I think this is thee Best video about choosing app color 👌 thanks!

@josephatodaro 4 жыл бұрын

Thank you!

@sudikshakhanduja8165 4 жыл бұрын

so so helpful thanks

@MicheleDiTrani 6 жыл бұрын

Thank you, that was very useful for a non-educated designer like me!

@intelone814 4 жыл бұрын

Joseph, you're such a good designer, please don't limit yourself to sketch, sketch tutorials are fine, but don't waste the rest of your capabilities ;) this a humble useful (I hope) advice from a fellow designer.

@devmrin 6 жыл бұрын

This is pure gold! 🤑

@yileizhang3545 6 жыл бұрын

This is hell useful!!!! Thank you so much!!!!

@kademello 4 жыл бұрын

this was really helpful! Thumbs up for your sense of humor :D

@gadirosales1209 5 жыл бұрын

great content!! keep it up !

@SonNguyen-wi3nc Жыл бұрын

TNice tutorials was really helpful for soone coming from Ableton Live and having used Fruity Loops waaaay back in the past

@Dizasteroner 6 жыл бұрын

I just saw and thought to my self... WOOOWWWW !!! Excelent VIDEOOOO !!! =D

@DimitriBoyarski 5 жыл бұрын

Outstanding! Thanks alot!

@hwj8640 Жыл бұрын

You are really smart, thanks for sharing

@Rafael-Bravo 3 жыл бұрын

Great video do more like this and I'll see you on your first 1M

@NdamuleloNemakh 4 жыл бұрын

Great tips, thanks

@maryspringg 5 жыл бұрын

It was really useful Thank you Joseph

@chethankvs6256 6 жыл бұрын

Thanks. This was very insightful :)

@user-hi8yg5nn7r 2 жыл бұрын

thanks for the info

@Microbex 5 жыл бұрын

Super useful, thanks.

@AnilOfz 3 жыл бұрын

It's really useful and would certainly help..

@farhanfauzi8070 4 жыл бұрын

Thank you so much joseph

@yond3r427 4 жыл бұрын

This was edifying but also unexpectedly hilarious.

@toquival 6 жыл бұрын

You make learning fun!

@josephatodaro 6 жыл бұрын

I'm so glad to hear that :)

@anbrizuela 4 жыл бұрын

Excellent! Thanks very much :D

@dipenparmar2273 2 жыл бұрын

Nice info.. great tricks

@sanaroma 5 жыл бұрын

Neat workflow! Though would love to know how have you recorded the voice for the video? It’s crystal clear

@What_was_wrong_w_jst_our_names 5 жыл бұрын

Fascinating

@mohammadnajafian7335 5 жыл бұрын

Great , You are a teacher realy. :)

@gametechvlog 3 жыл бұрын

Great video helps me a lot. It will be very use full to us if you update this video how you choose colors in 2020

@divyasampath9500 4 жыл бұрын

Informative!

@Enowbeats010 4 жыл бұрын

good info thanks!

@loremipsum5503 5 жыл бұрын

What Microphone did you use? Your voice is crystal clear

@hardboiled2000 6 жыл бұрын

great stuff

@Kris-to7vh 3 жыл бұрын

Damn this video is incredibly useful ! thanks

@igorkhomenko9680 5 жыл бұрын

Agree with every single word, I am using essentially the same approach. I will be stealing your -1 +1 naming convention - awesome! - much better than percents or hundreds. Very nice palette btw. Thanks from a year after the publishing your vid :) Subs!

@snimavat Жыл бұрын

A video on how to generate all this colors from a main color, what tools to use, and what to consider when doing this - would be helpful

@davay1539 3 жыл бұрын

Thanks for this amazing guide ! Could you please tell where did you edit this video? and how did you create all these animations as 6:02 for example? slide the color aside that it instantly creates another color as a combination of two ? thanks in advance!