UI Design | How to choose colors and color palettes

Поделиться
HTML-код
  • Опубликовано: 30 ноя 2024

Комментарии • 135

  • @DesignerUp
    @DesignerUp  2 года назад +2

    📚Watch more lessons like this in our Product Design (UI/UX) Course - designerup.co/product-design-ui-ux-course

  • @whitebear224
    @whitebear224 3 года назад +17

    I just love how calm and steady she is. This channel is way too underrated.

    • @DesignerUp
      @DesignerUp  3 года назад

      Appreciate that @Lancebear. 😊

  • @johvc
    @johvc 3 года назад +12

    Wonderful to finally see someone connecting the theory behind colors with the practical aspect of applying them in your work. Well done!

  • @okupaonome1032
    @okupaonome1032 2 года назад +2

    i have been struggling with colors, watched alot of videos but this made it easy for me to understand. Thank you from a picky understanding brain

    • @DesignerUp
      @DesignerUp  2 года назад +1

      So happy to hear that. You’re welcome, from one picky brain to another 💜🤓

  • @maxdude4567
    @maxdude4567 4 года назад +9

    Awesome video. The "less is more" approach always surprises me with how well it works

    • @DesignerUp
      @DesignerUp  4 года назад +1

      MaxM that’s exactly it!

  • @UmairUlhaque
    @UmairUlhaque Год назад +2

    Thank you for making such a comprehensive presentation about using colors effectively in UI design. Please make a short presentation or may be a video tutorial on 60-30-10 rule of applying colors.

  • @damienabbott9805
    @damienabbott9805 2 года назад +2

    Hi Elizabeth - this video is so brilliant as you as you open up a multitude a possibilities in colour combinations through the use of just one colour. This in turn make designer products slick, minimalistic and aesthetically pleasing. Just the way they should be. Thank you for this amazing tip.

    • @DesignerUp
      @DesignerUp  2 года назад +2

      Thank you Damien! That was exactly my hope for the video, which you so articulately stated 😀 thanks, as always for your support. Hope you are keeping well

  • @alexemma2826
    @alexemma2826 3 года назад +1

    Wow! what a huge Level Up!

  • @ashtonlandry
    @ashtonlandry 2 года назад +1

    Your speaking tone is brilliant 🙌💜 - great channel content as well! You’ve got a new subscriber 👍

    • @DesignerUp
      @DesignerUp  2 года назад

      So happy to hear that Ashton! 💜 Thank you! 😊

  • @prathikshasshetty9601
    @prathikshasshetty9601 2 года назад +3

    Thanks for sharing this. You make learning fun and simple, thats truly an art.

    • @DesignerUp
      @DesignerUp  2 года назад +1

      That means a lot, thank you very much 😊

  • @fluffymaverick
    @fluffymaverick 3 года назад +1

    Thank God I can finally sleep. Ended up watching this and be able to fully grasp how to choose a color and how color theory works in a nutshell

    • @DesignerUp
      @DesignerUp  3 года назад

      That’s wonderful to hear 😀Best of luck

  • @kulrajchavda9538
    @kulrajchavda9538 3 года назад +1

    Best channel everrrrr

  • @andigomez1993
    @andigomez1993 5 лет назад +9

    Great Video, i really like how you broke down how to pick our colors if choosing a monochromatic approach.

    • @DesignerUp
      @DesignerUp  5 лет назад +1

      Thank you Andi! I'm happy that you found it useful.

  • @jeffbarnhart6441
    @jeffbarnhart6441 2 года назад +1

    thank God yt delivered me to you. just what I was looking for for wp colors

    • @DesignerUp
      @DesignerUp  2 года назад

      Hahah so happy to hear that Jeff! It was meant to be!

  • @lstx1977
    @lstx1977 4 года назад +3

    Really underrated! Great video!

  • @artiphishle
    @artiphishle 4 месяца назад

    first and most important: Thank you! Very nice explained videos. Then (fun fact): as not only a software engineer but also as a hobby: audio engineer and game sound designer (more orchestral composition and foley for the latter) I've learnt: mixing colors is like mixing audio, so why the noise in the background ;) you really can adopt the knowhow about design to make it sound (pun intended) 🎉

  • @KwekuTech
    @KwekuTech 2 года назад +1

    Wow I now know how to select colors when it comes to design. This is really helpful

    • @DesignerUp
      @DesignerUp  2 года назад

      Really happy to hear that Kweku!

  • @charleshaddock4426
    @charleshaddock4426 4 года назад +2

    Damn, best video on color theory I've ever seen...and I've seen a lot of them. ty!

  • @johnlin6121
    @johnlin6121 3 года назад +2

    Thank you for this very doable tut! Excellent work.

  • @nidarahman2305
    @nidarahman2305 3 года назад +1

    Wow that was a lot of very useful information in very short time

  • @anmolsingh4026
    @anmolsingh4026 3 года назад +2

    My quest for colors end today

  • @gabrielmoraes4516
    @gabrielmoraes4516 2 года назад +1

    Awesome! Thank you!

  • @kinie43
    @kinie43 3 года назад +1

    I love your videos so much. Have been struggling to understand colour theory for UI

    • @DesignerUp
      @DesignerUp  3 года назад +1

      Thank you Keneilwe. I sincerely hope they help you struggle a bit less! My best wishes 💜

  • @realavy3577
    @realavy3577 Год назад +1

    One of the best video

    • @DesignerUp
      @DesignerUp  Год назад

      That’s so nice to hear! Thank you 😊

  • @NurlanZhumakanov
    @NurlanZhumakanov 4 года назад +3

    Wow!
    Thank you so much!
    You are also a good explainer )

  • @shreyjain3562
    @shreyjain3562 5 лет назад +7

    Very informative video, I was looking for information something like this. Thank you for sharing the knowledge.

    • @DesignerUp
      @DesignerUp  5 лет назад +2

      Thank you Shrey! I’m glad it helped. Appreciate you taking the time to comment!

  • @wonderfullife8416
    @wonderfullife8416 4 года назад +7

    that's some quality content, tbh!

  • @suheiralattar5996
    @suheiralattar5996 2 года назад +1

    thank you for your efforts , so useful videos and organised

  • @MarkWhiteartist
    @MarkWhiteartist 3 года назад +43

    anybody feel like we should of paid for this? lol this was amazing!

    • @DesignerUp
      @DesignerUp  3 года назад +2

      Haha that really made me laugh and smile. Thanks for that Mark.

    • @sarjeetthakur715
      @sarjeetthakur715 2 года назад +1

      I really didn't not get kind of information from my high reputed college❤️

    • @emmyugwuoti6245
      @emmyugwuoti6245 2 года назад +1

      Dont give them ideas

  • @FrameThaiTunes
    @FrameThaiTunes 4 года назад +3

    Really great video with clear information :)

    • @DesignerUp
      @DesignerUp  4 года назад

      Thanks Frame Sorravit ! Glad you thought so

  • @abdou023
    @abdou023 4 года назад +7

    I'd like a video showing where exactly are you selecting the colors on the color wheel instead of describing the process.

    • @DesignerUp
      @DesignerUp  4 года назад

      Thanks for your thoughts here! I do touch on that in this video @2:38 ruclips.net/video/wuZuvhF4u6U/видео.html but could definitely consider expanding more on that, however it's respective of the design software that you are using (ie. sometimes you'll be looking at a color spectrum vs a wheel).

  • @AmolImpal
    @AmolImpal 4 года назад +1

    Nicely explained. Want more...

  • @sachinwalia264
    @sachinwalia264 Год назад +1

    Wonderful video!

  • @saumyarastogi2154
    @saumyarastogi2154 4 года назад +8

    Thank you:) u made it so easy to understand:)

    • @DesignerUp
      @DesignerUp  4 года назад +1

      Thank you! Glad it helped!

    • @jituchauhan3431
      @jituchauhan3431 4 года назад

      Amazing, also learn figma in my channel ruclips.net/channel/UCRwYDakXkxcLfismc23aS_g

  • @sduka1909
    @sduka1909 2 года назад +1

    Very helpful!

  • @shamirk.a7172
    @shamirk.a7172 Год назад +1

    Helpful, thank you

  • @CoryTheSimmons
    @CoryTheSimmons 4 года назад +1

    I really don't want to toot my own horn but I never studied this and just ended up figuring out _all_ of these exact same things. Not even kidding. Yes, I know this comment is cringe. I'm sorry. :(
    Excited to subscribe and see more! You really condensed color stuff down to the perfect essentials.

    • @DesignerUp
      @DesignerUp  4 года назад

      Not cringe at all! haha that's pretty much how I learned this all too!! Thanks Cory, means a lot that it makes sense to others the way it finally clicked for me. More to come!

  • @suganyabasker4703
    @suganyabasker4703 2 года назад +1

    Amazing, thanks very useful

  • @MartinGarnett
    @MartinGarnett 4 года назад +3

    Hi, nice paced video. But I’m wondering, how do you handle errors, warnings, and success colours when designing with just one hue?

    • @DesignerUp
      @DesignerUp  4 года назад +1

      Thanks Martin. For this particular video I didn't go into color as applied to UX or usability hieristics for components states. This is really just focused on pairing hues for UI visual elements. In terms of errors, warning and success...there are some standard color guidelines that we normally follow (along with applying contrast standards). Red for error, yellow for warnings, orange for transient warnings, green for success/encouragement. These are generally universally understood to be good practice. Hope that helps!

  • @shubhashisdas9399
    @shubhashisdas9399 2 года назад

    Its too good .amaziing

  • @mouadhboukefa1546
    @mouadhboukefa1546 4 года назад +1

    Great video. Thank you so much

  • @carlosreyes6612
    @carlosreyes6612 Год назад +1

    Thank you, for this video,

  • @michaelbarley
    @michaelbarley 4 года назад +2

    Very good information! Thank you very much

    • @DesignerUp
      @DesignerUp  4 года назад

      Thank you Michael, I'm glad you found it useful.

  • @tanveersingh8717
    @tanveersingh8717 5 лет назад +2

    Awesome, so easy to learn and understand

    • @elle8995
      @elle8995 5 лет назад +1

      Really happy to hear you think so! Appreciate your comment.

    • @DesignerUp
      @DesignerUp  4 года назад

      Glad to hear it @Tanveer thank you!

  • @milindkhadse556
    @milindkhadse556 3 года назад +1

    It's very helpful

  • @lme918
    @lme918 3 года назад +1

    Thanks, too little views for such a gold live-saving material!

  • @arthurpedro4510
    @arthurpedro4510 4 года назад +2

    Love it!

  • @Dima-ij2qi
    @Dima-ij2qi 2 года назад +1

    Thank you!

  • @farshadamirshoghi9323
    @farshadamirshoghi9323 2 года назад +1

    thank you , good video

  • @LIMELIGHT0
    @LIMELIGHT0 Год назад +1


    Lovely I very much appreciate

  • @yasirabbas6650
    @yasirabbas6650 4 года назад +1

    Hello, at 2:57, what are the fonts used for heading 'Color Theory' and 'Revolves around the color wheel' text. Thanks in advance!!!

    • @DesignerUp
      @DesignerUp  4 года назад +1

      Hi @Yasir the font for all of the headings including 'Color Theory' is Futura PT in Bold and the subheadings including 'Revolves around the color wheel' are Futura PT in Book. Thanks for watching!

  • @NoahThul
    @NoahThul 5 лет назад +2

    Awesome presentation!

    • @elle8995
      @elle8995 5 лет назад

      Thanks @Noah! Hope it was helpful.

    • @NoahThul
      @NoahThul 5 лет назад +1

      @@elle8995 I've been in design for a good amount of time now and this was a great way start thinking more concisely about color selection. It was both affirming of previous knowledge as well as inspiring for future projects. I particularly liked the pallet presentation at 3:34 and the shade/saturation insights at 2:39.

    • @DesignerUp
      @DesignerUp  4 года назад

      This is such appreciated feedback @Noah Thul! Having taught color theory in different ways over the years I noticed my students found it most helpful when I related things back to the color picker (which is the main vehicle through which we and apply this information in our design process ). I'm glad to hear this resonated with you too and for you stopping by to say as much.

  • @balamsingh1356
    @balamsingh1356 3 года назад +1

    Thank you so much for this video...Just request to you...could you please make a video with an example with the help of coolors.co

  • @karthikletskode8721
    @karthikletskode8721 3 года назад +1

    what's the font used for `Color Theory` & `Revolves around color wheel`?

    • @DesignerUp
      @DesignerUp  3 года назад

      Hi there, the font is called Futura and is available on Googlefonts.

  • @richarddyer3701
    @richarddyer3701 5 лет назад +2

    Really good video thanks!

    • @DesignerUp
      @DesignerUp  4 года назад

      Thank you Richard! Glad it was helpful :)

  • @LinguistAna
    @LinguistAna 5 лет назад +3

    great video , thanks alot

  • @OlanrewajuOnakoya
    @OlanrewajuOnakoya 2 года назад +1

    Wait that's not her voice behind the animated video 😳🤩🤩🤩🤩🤩🤩😍

  • @THEMILLMINDSET
    @THEMILLMINDSET 5 лет назад +3

    Amazing video

  • @nested9301
    @nested9301 3 года назад +1

    i like blue grey and white best combination for me

  • @courtneym7552
    @courtneym7552 4 года назад +2

    Here from springboard ⭐️

  • @Mewsword
    @Mewsword Год назад +1

    thanks alot!

  • @woahbruh1897
    @woahbruh1897 3 года назад +1

    nice one g

  • @nileshgosavi9527
    @nileshgosavi9527 5 лет назад +3

    Very Good Video @Elizabeth Alli

  • @chiotingkiat7548
    @chiotingkiat7548 4 года назад +1

    Fantastic video and visualization! Quick clarification, what did you mean by tinting your greys and blacks with your brand color?

    • @DesignerUp
      @DesignerUp  4 года назад +1

      Thank you Chio!! So instead of dragging your color picker all the way to solid gray or black. Start with your brand color and drag it into the back or gray (but keep it to where you can still see that brand color peaking through). For example, if your brand color is purple, your gray should be a purple-ish gray or if it’s green, a green-ish gray or whatever your main color is. Make sense? It should be subtle but by having a little hint/tint of that main color mixed in you get a really nice harmony between colors and something to ground your palette! 🎨

  • @heshamabuzaid4293
    @heshamabuzaid4293 4 года назад +1

    thank you

  • @brotherstechnical1140
    @brotherstechnical1140 4 года назад +1

    Play at 1.25x for better experience

    • @DesignerUp
      @DesignerUp  4 года назад

      Ha yeah, I was weirdly slow in the beginning :/

  • @mahdibaha5127
    @mahdibaha5127 3 года назад +1

    Awsome

  • @khurramsiddique8889
    @khurramsiddique8889 4 года назад +1

    Thanks sister

  • @blackartify
    @blackartify 4 года назад +3

    Video is perfect at 1.25x

    • @DesignerUp
      @DesignerUp  4 года назад

      Ha yeah, the sound is rough during the intro. It has been fixed in current videos (ashame I can't reupload this one) Thanks for watching anyway! Cheers.

  • @georgejames3868
    @georgejames3868 4 года назад

    Mute the audio on the introduction or almost anywhere at all, you would think she is on slow motion

    • @DesignerUp
      @DesignerUp  4 года назад

      So cringe, I know. I talk about this all the time. Hopefully you'll find subsequent videos far improved 😅

    • @georgejames3868
      @georgejames3868 4 года назад +1

      @@DesignerUp No cringe at all, and there isn't anything wrong with the way you talk, it was just something I noticed by mistake, your video is informative.

    • @DesignerUp
      @DesignerUp  4 года назад

      @@georgejames3868 Thanks George. I appreciate that.

  • @2002budokan
    @2002budokan 4 года назад +1

    Informative but the whole course costs 997$$$, I think they strongly believe that everyone in this planet earns dollars. 🤞

    • @DesignerUp
      @DesignerUp  4 года назад

      Hello, 2002budokan
      The education and preparation you receive from a high quality education correlates to your ability to earn a higher income. It is an investment in your future that enables you to make more money. We know how expensive this can be for some and have managed to make our course the most affordable program of its kind by far. We also offer generous discounts and other course packages to those that are in need. The value you receive from our program, as our students will tell you is well beyond the cost.
      Just to give you some perspective if you’ve ever looked into other similar programs:
      Our DesignerUp Course - $997 USD
      General assembly - $14950 USD
      Springboard- $9891 USD
      Career foundry - $6999 USD
      Designlab - $6749 USD
      We also offer endless free content and talks for those that are not able to invest this much in their career

    • @2002budokan
      @2002budokan 4 года назад +1

      @@DesignerUp Udemy : 10$ per course. Skillshare: 99$ annual fee... Further, I am learning design not for job search, just because I want to learn it.

  • @davay1539
    @davay1539 3 года назад +1

    Can I get you a better mic? =)

    • @DesignerUp
      @DesignerUp  3 года назад

      Well if you're offering... lol Cringe I know, but hey was my first video ever. I'd say the improvement now is apparent.

  • @rectify2003
    @rectify2003 4 года назад

    Sorry, but the music is extremely annoying

  • @shauntan5395
    @shauntan5395 4 года назад +1

    Great video