How I Organize Colors for a UI Design Project

Ғылым және технология

▶︎▶︎ 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
    @guiancarlo5 жыл бұрын

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

  • @AdrianLopez-sr3dd
    @AdrianLopez-sr3dd6 жыл бұрын

    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 жыл бұрын

    Me too. It’s just boom, knowledge.

  • @gamasierra

    @gamasierra

    3 жыл бұрын

    Same.

  • @zaturntarto3814

    @zaturntarto3814

    3 жыл бұрын

    xD ? Pun intended ?😀

  • @ruthumez

    @ruthumez

    2 жыл бұрын

    Same here! I was pleasantly surprised.

  • @kitziasalgado

    @kitziasalgado

    2 жыл бұрын

    same

  • @AnshMehraa
    @AnshMehraa3 жыл бұрын

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

  • @AlexFlores-cl9fo
    @AlexFlores-cl9fo5 жыл бұрын

    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 жыл бұрын

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

  • @noisydoll168
    @noisydoll1682 жыл бұрын

    Dude I love this. I saw this video as part of Springboard's UI/UX curriculum and had to open it on KZread 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
    @MultiMarty19875 жыл бұрын

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

  • @arkinzoodsma1510
    @arkinzoodsma15103 жыл бұрын

    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!

  • @erikbriones
    @erikbriones6 жыл бұрын

    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!

  • @russellbalahadia2984
    @russellbalahadia29844 жыл бұрын

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

  • @Fullstackdev18
    @Fullstackdev185 жыл бұрын

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

  • @Kris-to7vh
    @Kris-to7vh3 жыл бұрын

    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

  • @tcroz7733
    @tcroz77336 жыл бұрын

    Really helpful! Definitely going to adapt this into my workflow

  • @temporarythoughts
    @temporarythoughts5 жыл бұрын

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

  • @huntrrams
    @huntrrams5 жыл бұрын

    The animations were oddly satisfying. Great video!!

  • @Underhills
    @Underhills6 жыл бұрын

    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.

  • @devegram
    @devegram3 жыл бұрын

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

  • @aaronruiz816
    @aaronruiz8165 жыл бұрын

    Absolutely terrific video, bro. Well done.

  • @shravani9740
    @shravani97402 жыл бұрын

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

  • @nandhagopalgopalsamy1726
    @nandhagopalgopalsamy17266 жыл бұрын

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

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

    Thank you so much for your kind help!

  • @Michel2003g
    @Michel2003g2 жыл бұрын

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

  • @ricardorergis2442
    @ricardorergis2442 Жыл бұрын

    Dude this information is pure gold, thanks!

  • @RuxandraBklyn
    @RuxandraBklyn5 жыл бұрын

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

  • @yeaheiamahmudhridoy4590
    @yeaheiamahmudhridoy45902 жыл бұрын

    Best color explaination video out there in YT! 👍😍

  • @andreacruz6769
    @andreacruz6769 Жыл бұрын

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

  • @FleiDiego
    @FleiDiego3 жыл бұрын

    Super helpful these tips! Thanks for sharing!

  • @annia9157
    @annia91575 жыл бұрын

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

  • @adi_philosophy
    @adi_philosophy2 жыл бұрын

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

  • @ArthurLarin
    @ArthurLarin4 жыл бұрын

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

  • @SaSha-hb5rq
    @SaSha-hb5rq3 жыл бұрын

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

  • @joenotaverage
    @joenotaverage6 жыл бұрын

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

  • @Amheklerior
    @Amheklerior3 жыл бұрын

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

  • @khalidal-hassan2566
    @khalidal-hassan25664 жыл бұрын

    Those are really useful tips ! Thx a million

  • @ashleyleddy194
    @ashleyleddy1942 жыл бұрын

    Thank you for breaking it down!

  • @vlad74745
    @vlad747455 жыл бұрын

    Awesome approach!

  • @user-yj1fn9dz4z
    @user-yj1fn9dz4z6 жыл бұрын

    This was a great instructional video. Thanks!

  • @rectify2003
    @rectify20035 жыл бұрын

    Such a good explanation. 👍

  • @mmediaculturel3738
    @mmediaculturel3738 Жыл бұрын

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

  • @kgay
    @kgay2 жыл бұрын

    Absolutely awesome video.

  • @hanac5586
    @hanac5586 Жыл бұрын

    Really good small info packet! Thanks

  • @MashaShugrina
    @MashaShugrina6 жыл бұрын

    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?

  • @JawkneeTango
    @JawkneeTango5 жыл бұрын

    Very insightful methodology!

  • @nuvill1123
    @nuvill11236 жыл бұрын

    Really great video man! Thanks

  • @Faizan56388
    @Faizan563883 жыл бұрын

    Very helpful. Thanks for sharing.

  • @shriragreddy7193
    @shriragreddy71933 жыл бұрын

    Immensely helpful. Thank you for this video

  • @mdmozammel5731
    @mdmozammel57313 жыл бұрын

    very helpful😍 thank you, man.

  • @ibanezrg7421
    @ibanezrg74214 жыл бұрын

    So effing helpful. Thank you!

  • @SupernovaSites
    @SupernovaSites2 жыл бұрын

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

  • @user-pe9qg3hg3k
    @user-pe9qg3hg3k2 жыл бұрын

    What a super interesting and amazingly put together video

  • @adevikthur
    @adevikthur Жыл бұрын

    Thanks Joe!

  • @nuraydurmus1734
    @nuraydurmus17344 жыл бұрын

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

  • @kike1987
    @kike19875 жыл бұрын

    Great job! Thanks!

  • @sudikshakhanduja8165
    @sudikshakhanduja81654 жыл бұрын

    so so helpful thanks

  • @antoineleduc7611
    @antoineleduc76113 ай бұрын

    Excellent video, really helpful

  • @ruggeddog3103
    @ruggeddog31033 жыл бұрын

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

  • @intelone814
    @intelone8144 жыл бұрын

    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.

  • @sinarahimi3041
    @sinarahimi30414 жыл бұрын

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

  • @josephatodaro

    @josephatodaro

    4 жыл бұрын

    Thank you Sina 🙏 I really appreciate that

  • @djstylistictv
    @djstylistictv4 жыл бұрын

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

  • @user-hi8yg5nn7r
    @user-hi8yg5nn7r2 жыл бұрын

    thanks for the info

  • @hwj8640
    @hwj86402 жыл бұрын

    You are really smart, thanks for sharing

  • @DimitriBoyarski
    @DimitriBoyarski5 жыл бұрын

    Outstanding! Thanks alot!

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

  • @yileizhang3545
    @yileizhang35456 жыл бұрын

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

  • @mahibhrmi
    @mahibhrmi4 жыл бұрын

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

  • @josephatodaro

    @josephatodaro

    4 жыл бұрын

    Thank you!

  • @chethankvs6256
    @chethankvs62566 жыл бұрын

    Thanks. This was very insightful :)

  • @farhanfauzi8070
    @farhanfauzi80704 жыл бұрын

    Thank you so much joseph

  • @maryspringg
    @maryspringg5 жыл бұрын

    It was really useful Thank you Joseph

  • @MrFarkasOfficial
    @MrFarkasOfficial3 жыл бұрын

    Really good stuff!

  • @gadirosales1209
    @gadirosales12095 жыл бұрын

    great content!! keep it up !

  • @NdamuleloNemakh
    @NdamuleloNemakh4 жыл бұрын

    Great tips, thanks

  • @Microbex
    @Microbex5 жыл бұрын

    Super useful, thanks.

  • @MicheleDiTrani
    @MicheleDiTrani6 жыл бұрын

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

  • @kademello
    @kademello4 жыл бұрын

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

  • @AnilOfz
    @AnilOfz3 жыл бұрын

    It's really useful and would certainly help..

  • @Dizasteroner
    @Dizasteroner6 жыл бұрын

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

  • @devmrin
    @devmrin6 жыл бұрын

    This is pure gold! 🤑

  • @ish5057
    @ish50573 жыл бұрын

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

  • @anbrizuela
    @anbrizuela5 жыл бұрын

    Excellent! Thanks very much :D

  • @ruksanakabir46
    @ruksanakabir462 жыл бұрын

    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.

  • @yaj126
    @yaj1265 жыл бұрын

    2:12 Protip: #fff is the same in css as #ffffff. Together we can stop F key abuse

  • @lachlanearle6903

    @lachlanearle6903

    5 жыл бұрын

    F

  • @sylviapekarek4372

    @sylviapekarek4372

    5 жыл бұрын

    lol

  • @Rafael-Bravo
    @Rafael-Bravo3 жыл бұрын

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

  • @dipenparmar2273
    @dipenparmar22732 жыл бұрын

    Nice info.. great tricks

  • @toquival
    @toquival6 жыл бұрын

    You make learning fun!

  • @josephatodaro

    @josephatodaro

    6 жыл бұрын

    I'm so glad to hear that :)

  • @Enowbeats010
    @Enowbeats0104 жыл бұрын

    good info thanks!

  • @mohammadnajafian7335
    @mohammadnajafian73355 жыл бұрын

    Great , You are a teacher realy. :)

  • @sanaroma
    @sanaroma5 жыл бұрын

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

  • @davay1539
    @davay15393 жыл бұрын

    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!

  • @gametechvlog
    @gametechvlog3 жыл бұрын

    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

  • @nils42
    @nils426 жыл бұрын

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

  • @Kris-to7vh
    @Kris-to7vh3 жыл бұрын

    Damn this video is incredibly useful ! thanks

  • @yond3r427
    @yond3r4274 жыл бұрын

    This was edifying but also unexpectedly hilarious.

  • @divyasampath9500
    @divyasampath95004 жыл бұрын

    Informative!

  • @igorkhomenko9680
    @igorkhomenko96805 жыл бұрын

    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!

  • @loremipsum5503
    @loremipsum55035 жыл бұрын

    What Microphone did you use? Your voice is crystal clear

  • @What_was_wrong_w_jst_our_names
    @What_was_wrong_w_jst_our_names5 жыл бұрын

    Fascinating

  • @hardboiled2000
    @hardboiled20006 жыл бұрын

    great stuff

  • @joshuabaker31
    @joshuabaker316 жыл бұрын

    Great video! Could you do a video on project preparation as far as sketch to x-code go? I noticed I encountered a few trial and error problems with layering and grouping when prototyping with Principle/Flinto for the first time and it would be really helpful to know roughly what is expected by a dev to make their job easier :)

  • @josephatodaro

    @josephatodaro

    6 жыл бұрын

    Great idea Joshua!

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

  • @MaxWeir
    @MaxWeir6 жыл бұрын

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

  • @ashrock1990

    @ashrock1990

    3 жыл бұрын

    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

Келесі