How I Organize Colors for a UI Design Project

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ก.ค. 2024
  • ▶︎▶︎ 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
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 207

  • @guiancarlo
    @guiancarlo 5 ปีที่แล้ว +87

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

  • @AdrianLopez-sr3dd
    @AdrianLopez-sr3dd 6 ปีที่แล้ว +172

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

    • @loliradotopper
      @loliradotopper 5 ปีที่แล้ว +5

      Me too. It’s just boom, knowledge.

    • @gamasierra
      @gamasierra 3 ปีที่แล้ว +1

      Same.

    • @zaturntarto3814
      @zaturntarto3814 3 ปีที่แล้ว +1

      xD ? Pun intended ?😀

    • @ruthumez
      @ruthumez 2 ปีที่แล้ว

      Same here! I was pleasantly surprised.

    • @kitziasalgado
      @kitziasalgado 2 ปีที่แล้ว

      same

  • @AlexFlores-cl9fo
    @AlexFlores-cl9fo 5 ปีที่แล้ว +4

    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!

  • @CuriousWanderer_
    @CuriousWanderer_ 5 ปีที่แล้ว +4

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

  • @noisydoll168
    @noisydoll168 2 ปีที่แล้ว

    Dude I love this. I saw this video as part of Springboard's UI/UX curriculum and had to open it on TH-cam 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.

  • @MultiMarty1987
    @MultiMarty1987 5 ปีที่แล้ว +2

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

  • @russellbalahadia2984
    @russellbalahadia2984 4 ปีที่แล้ว +2

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

  • @AnshMehraa
    @AnshMehraa 3 ปีที่แล้ว +3

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

  • @erikbriones
    @erikbriones 6 ปีที่แล้ว +1

    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!

  • @arkinzoodsma1510
    @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
    @yeaheiamahmudhridoy4590 2 ปีที่แล้ว +1

    Best color explaination video out there in YT!
    👍😍

  • @tcroz7733
    @tcroz7733 6 ปีที่แล้ว +2

    Really helpful! Definitely going to adapt this into my workflow

  • @Michel2003g
    @Michel2003g 2 ปีที่แล้ว

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

  • @ricardorergis2442
    @ricardorergis2442 ปีที่แล้ว

    Dude this information is pure gold, thanks!

  • @aaronruiz816
    @aaronruiz816 5 ปีที่แล้ว +2

    Absolutely terrific video, bro. Well done.

  • @FleiDiego
    @FleiDiego 3 ปีที่แล้ว

    Super helpful these tips! Thanks for sharing!

  • @Kris-to7vh
    @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

  • @shravani9740
    @shravani9740 2 ปีที่แล้ว

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

  • @Pankaj-Verma-
    @Pankaj-Verma- 4 ปีที่แล้ว +1

    Thank you so much for your kind help!

  • @RuxandraBklyn
    @RuxandraBklyn 5 ปีที่แล้ว +1

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

  • @devegram
    @devegram 3 ปีที่แล้ว

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

  • @temporarythoughts
    @temporarythoughts 5 ปีที่แล้ว +5

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

  • @hanac5586
    @hanac5586 ปีที่แล้ว

    Really good small info packet! Thanks

  • @andreacruz6769
    @andreacruz6769 ปีที่แล้ว

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

  • @huntrrams
    @huntrrams 5 ปีที่แล้ว +1

    The animations were oddly satisfying. Great video!!

  • @Underhills
    @Underhills 6 ปีที่แล้ว +1

    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.

  • @Fullstackdev18
    @Fullstackdev18 5 ปีที่แล้ว +3

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

  • @nandhagopalgopalsamy1726
    @nandhagopalgopalsamy1726 6 ปีที่แล้ว

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

  • @khalidal-hassan2566
    @khalidal-hassan2566 4 ปีที่แล้ว

    Those are really useful tips ! Thx a million

  • @mmediaculturel3738
    @mmediaculturel3738 ปีที่แล้ว

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

  • @user-pe9qg3hg3k
    @user-pe9qg3hg3k 2 ปีที่แล้ว

    What a super interesting and amazingly put together video

  • @kgay
    @kgay 2 ปีที่แล้ว

    Absolutely awesome video.

  • @adi_philosophy
    @adi_philosophy 2 ปีที่แล้ว

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

  • @ashleyleddy194
    @ashleyleddy194 2 ปีที่แล้ว

    Thank you for breaking it down!

  • @Faizan56388
    @Faizan56388 3 ปีที่แล้ว

    Very helpful. Thanks for sharing.

  • @ArthurLarin
    @ArthurLarin 4 ปีที่แล้ว

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

  • @SaSha-hb5rq
    @SaSha-hb5rq 3 ปีที่แล้ว

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

  • @Amheklerior
    @Amheklerior 3 ปีที่แล้ว

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

  • @SupernovaSites
    @SupernovaSites 2 ปีที่แล้ว

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

  • @mdmozammel5731
    @mdmozammel5731 3 ปีที่แล้ว

    very helpful😍 thank you, man.

  • @nuraydurmus1734
    @nuraydurmus1734 4 ปีที่แล้ว

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

  • @annia9157
    @annia9157 5 ปีที่แล้ว

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

  • @sudikshakhanduja8165
    @sudikshakhanduja8165 4 ปีที่แล้ว +1

    so so helpful thanks

  • @antoineleduc7611
    @antoineleduc7611 4 หลายเดือนก่อน

    Excellent video, really helpful

  • @vlad74745
    @vlad74745 5 ปีที่แล้ว +1

    Awesome approach!

  • @adevikthur
    @adevikthur ปีที่แล้ว

    Thanks Joe!

  • @shriragreddy7193
    @shriragreddy7193 3 ปีที่แล้ว

    Immensely helpful. Thank you for this video

  • @joenotaverage
    @joenotaverage 6 ปีที่แล้ว +1

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

  • @MashaShugrina
    @MashaShugrina 6 ปีที่แล้ว +3

    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?

  • @mahibhrmi
    @mahibhrmi 4 ปีที่แล้ว +1

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

  • @MrFarkasOfficial
    @MrFarkasOfficial 3 ปีที่แล้ว

    Really good stuff!

  • @JawkneeTango
    @JawkneeTango 5 ปีที่แล้ว

    Very insightful methodology!

  • @user-yj1fn9dz4z
    @user-yj1fn9dz4z 6 ปีที่แล้ว

    This was a great instructional video. Thanks!

  • @nuvill1123
    @nuvill1123 6 ปีที่แล้ว

    Really great video man! Thanks

  • @user-hi8yg5nn7r
    @user-hi8yg5nn7r 2 ปีที่แล้ว

    thanks for the info

  • @djstylistictv
    @djstylistictv 4 ปีที่แล้ว

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

  • @kike1987
    @kike1987 5 ปีที่แล้ว +1

    Great job! Thanks!

  • @ibanezrg7421
    @ibanezrg7421 4 ปีที่แล้ว +1

    So effing helpful. Thank you!

  • @farhanfauzi8070
    @farhanfauzi8070 4 ปีที่แล้ว

    Thank you so much joseph

  • @ruggeddog3103
    @ruggeddog3103 3 ปีที่แล้ว

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

  • @sinarahimi3041
    @sinarahimi3041 4 ปีที่แล้ว +1

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

    • @josephatodaro
      @josephatodaro  4 ปีที่แล้ว +1

      Thank you Sina 🙏 I really appreciate that

  • @rectify2003
    @rectify2003 5 ปีที่แล้ว +1

    Such a good explanation. 👍

  • @hwj8640
    @hwj8640 2 ปีที่แล้ว

    You are really smart, thanks for sharing

  • @NdamuleloNemakh
    @NdamuleloNemakh 4 ปีที่แล้ว

    Great tips, thanks

  • @DimitriBoyarski
    @DimitriBoyarski 5 ปีที่แล้ว

    Outstanding! Thanks alot!

  • @gadirosales1209
    @gadirosales1209 5 ปีที่แล้ว +3

    great content!! keep it up !

  • @ruksanakabir46
    @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.

  • @MicheleDiTrani
    @MicheleDiTrani 6 ปีที่แล้ว

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

  • @AnilOfz
    @AnilOfz 3 ปีที่แล้ว

    It's really useful and would certainly help..

  • @devmrin
    @devmrin 6 ปีที่แล้ว

    This is pure gold! 🤑

  • @kademello
    @kademello 4 ปีที่แล้ว

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

  • @Microbex
    @Microbex 5 ปีที่แล้ว

    Super useful, thanks.

  • @huus5682
    @huus5682 2 วันที่ผ่านมา

    7:29 love your laughs 😁

  • @dipenparmar2273
    @dipenparmar2273 2 ปีที่แล้ว

    Nice info.. great tricks

  • @maryspringg
    @maryspringg 5 ปีที่แล้ว

    It was really useful
    Thank you Joseph

  • @Rafael-Bravo
    @Rafael-Bravo 3 ปีที่แล้ว +1

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

  • @yileizhang3545
    @yileizhang3545 6 ปีที่แล้ว

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

  • @MaxWeir
    @MaxWeir 6 ปีที่แล้ว +30

    What’s your process for choosing the level of lightness and darkness for the blue colour example you did?

    • @ashrock1990
      @ashrock1990 3 ปีที่แล้ว +1

      They always miss the most important parts to show

    • @toddhoward5947
      @toddhoward5947 3 ปีที่แล้ว

      @@ashrock1990 exactly 😂 they never share their knowledge just reading a random article to make a video

  • @Dizasteroner
    @Dizasteroner 6 ปีที่แล้ว +2

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

  • @SonNguyen-wi3nc
    @SonNguyen-wi3nc ปีที่แล้ว

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

  • @yond3r427
    @yond3r427 4 ปีที่แล้ว

    This was edifying but also unexpectedly hilarious.

  • @intelone814
    @intelone814 4 ปีที่แล้ว +1

    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.

  • @ish5057
    @ish5057 3 ปีที่แล้ว +2

    "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!

  • @chethankvs6256
    @chethankvs6256 6 ปีที่แล้ว

    Thanks. This was very insightful :)

  • @toquival
    @toquival 6 ปีที่แล้ว

    You make learning fun!

  • @Enowbeats010
    @Enowbeats010 4 ปีที่แล้ว

    good info thanks!

  • @gametechvlog
    @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

  • @anbrizuela
    @anbrizuela 5 ปีที่แล้ว +1

    Excellent! Thanks very much :D

  • @AmirWaisblay
    @AmirWaisblay ปีที่แล้ว

    Underrated video

  • @ngocngan9347
    @ngocngan9347 2 ปีที่แล้ว

    A good useful video, hope you create more interesting videos, always support u

  • @Kris-to7vh
    @Kris-to7vh 3 ปีที่แล้ว

    Damn this video is incredibly useful ! thanks

  • @igorkhomenko9680
    @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!

  • @davay1539
    @davay1539 3 ปีที่แล้ว +2

    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!

  • @divyasampath9500
    @divyasampath9500 4 ปีที่แล้ว

    Informative!

  • @mohammadnajafian7335
    @mohammadnajafian7335 5 ปีที่แล้ว +1

    Great , You are a teacher realy. :)

  • @AK-jt7kh
    @AK-jt7kh 4 ปีที่แล้ว +1

    This was a really useful video! A lot of times, this is stuff you already know, but since you never think about it, it can be helpful to someone to vocalize the process explicitly and simply to you if you're stuck. This kind of content gets me motivated to work! Thank you!

    • @josephatodaro
      @josephatodaro  4 ปีที่แล้ว

      I feel the same way. Glad to hear this was helpful for you!

  • @What_was_wrong_w_jst_our_names
    @What_was_wrong_w_jst_our_names 5 ปีที่แล้ว

    Fascinating

  • @nils42
    @nils42 6 ปีที่แล้ว

    Great video! Do you often use a warning denotive color in your projects?

  • @sanaroma
    @sanaroma 5 ปีที่แล้ว

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

  • @loremipsum5503
    @loremipsum5503 5 ปีที่แล้ว +3

    What Microphone did you use? Your voice is crystal clear