UI Design | How to choose colors and color palettes
HTML-код
- Опубликовано: 12 июн 2024
- Color theory is a complex subject, but choosing colors for our user interfaces and websites doesn't have to be. Most UI designs really only focus on using a few colors. I design 80% of my interfaces with One. Single. Color. Let me show you how...
#uidesign #colorpalettes #colors
🎥 WHAT TO WATCH NEXT
⊚ The ONLY color video you'll ever need! | • Super Practical Guide ...
🔗 MENTIONED IN THIS VIDEO
⊚ Color Contrast Checker | colorable.jxnblk.com/8b2d77/7...
⊚ Coolor | coolors.co/app
⊚ The Secret Live of Color Book | amzn.to/3VTYi4y
⊚ Full Blog Post | designerup.co/blog/ui-design-...
⊚ Musical Interlude: Atmospheria by Francis Preve
🔗Full Article Here - designerup.co/blog/ui-design-...
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ DesignerUp Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma | go.designerup.co/figma
⊚ ProtoPie | go.designerup.co/protopie
⊚ Notion | go.designerup.co/notion
⊚ Framer | go.designerup.co/framer
⊚ Canva | go.designerup.co/canva
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ RUclips creator
⊚ Author
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | learn@designerup.co
📚Watch more lessons like this in our Product Design (UI/UX) Course - designerup.co/product-design-ui-ux-course
I just love how calm and steady she is. This channel is way too underrated.
Appreciate that @Lancebear. 😊
Wonderful to finally see someone connecting the theory behind colors with the practical aspect of applying them in your work. Well done!
Cheers! Thanks a lot
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
So happy to hear that. You’re welcome, from one picky brain to another 💜🤓
Awesome video. The "less is more" approach always surprises me with how well it works
MaxM that’s exactly it!
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.
Great Video, i really like how you broke down how to pick our colors if choosing a monochromatic approach.
Thank you Andi! I'm happy that you found it useful.
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.
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
anybody feel like we should of paid for this? lol this was amazing!
Haha that really made me laugh and smile. Thanks for that Mark.
I really didn't not get kind of information from my high reputed college❤️
Dont give them ideas
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
That’s wonderful to hear 😀Best of luck
Damn, best video on color theory I've ever seen...and I've seen a lot of them. ty!
Thank you for this very doable tut! Excellent work.
Thanks John!
Thanks for sharing this. You make learning fun and simple, thats truly an art.
That means a lot, thank you very much 😊
Wow!
Thank you so much!
You are also a good explainer )
thank God yt delivered me to you. just what I was looking for for wp colors
Hahah so happy to hear that Jeff! It was meant to be!
Awesome! Thank you!
Your speaking tone is brilliant 🙌💜 - great channel content as well! You’ve got a new subscriber 👍
So happy to hear that Ashton! 💜 Thank you! 😊
Very informative video, I was looking for information something like this. Thank you for sharing the knowledge.
Thank you Shrey! I’m glad it helped. Appreciate you taking the time to comment!
Wow that was a lot of very useful information in very short time
I love your videos so much. Have been struggling to understand colour theory for UI
Thank you Keneilwe. I sincerely hope they help you struggle a bit less! My best wishes 💜
Really underrated! Great video!
Thanks!
Wow! what a huge Level Up!
thank you for your efforts , so useful videos and organised
Amazing, thanks very useful
Helpful, thank you
Really great video with clear information :)
Thanks Frame Sorravit ! Glad you thought so
Thank you, for this video,
Wow I now know how to select colors when it comes to design. This is really helpful
Really happy to hear that Kweku!
Very good information! Thank you very much
Thank you Michael, I'm glad you found it useful.
Thank you!
This was fabulous, so helpful.
Really glad to hear it Ryan 😀
My quest for colors end today
Thank you:) u made it so easy to understand:)
Thank you! Glad it helped!
Amazing, also learn figma in my channel ruclips.net/channel/UCRwYDakXkxcLfismc23aS_g
It's very helpful
Very helpful!
thank you , good video
Its too good .amaziing
Best channel everrrrr
Haha thank you Kulraj!
Awesome, so easy to learn and understand
Really happy to hear you think so! Appreciate your comment.
Glad to hear it @Tanveer thank you!
Really good video thanks!
Thank you Richard! Glad it was helpful :)
that's some quality content, tbh!
Thanks very much!
❤
Lovely I very much appreciate
Great video. Thank you so much
Thank you Mouadh!
thanks alot!
Nicely explained. Want more...
More coming soon!
One of the best video
That’s so nice to hear! Thank you 😊
Wonderful video!
Thanks Sachin!
great video , thanks alot
Thank you Ana
thank you
Love it!
Thanks Arthur!
Awesome presentation!
Thanks @Noah! Hope it was helpful.
@@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.
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.
I'd like a video showing where exactly are you selecting the colors on the color wheel instead of describing the process.
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).
nice one g
Here from springboard ⭐️
Amazing video
Thanks so much
Thanks, too little views for such a gold live-saving material!
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
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.
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!
Hi, nice paced video. But I’m wondering, how do you handle errors, warnings, and success colours when designing with just one hue?
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!
Awsome
Very Good Video @Elizabeth Alli
Thank you @Nilesh
Wait that's not her voice behind the animated video 😳🤩🤩🤩🤩🤩🤩😍
It sure is 😊
Great video
Appreciate you Shaun!
i like blue grey and white best combination for me
That’s a classic
Thanks sister
Thanks man!
Fantastic video and visualization! Quick clarification, what did you mean by tinting your greys and blacks with your brand color?
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! 🎨
Hello, at 2:57, what are the fonts used for heading 'Color Theory' and 'Revolves around the color wheel' text. Thanks in advance!!!
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!
what's the font used for `Color Theory` & `Revolves around color wheel`?
Hi there, the font is called Futura and is available on Googlefonts.
It's fine, but I miss something - the numbers. You've given one ratio: 4.5:1 for the contrast and it's great! I haven't met it before. But words like "darker" or "the darkest" are too generic. If you could use some numbers like "20% darker color using algorithm XYZ", e.g. like in the first reply here: graphicdesign.stackexchange.com/questions/75417/how-to-make-a-given-color-a-bit-darker-or-lighter + If you could give colors' HEX - and how you calculated it in particular examples.
Anyway - thanks for sharing your experience - it's valuable :)
Thanks for the thought @franki01mail! The video isn't really meant to be prescriptive in terms of telling you 'how' much darker or lighter you should make your colors. As that completely depends on your target contrast and your starting color. To specify 20% darker might put you outside of the range of acceptable accessibility contrast, so that's up to you to decide. Good link if you'd like a more mathematical description of arriving at color, but just keep that in mind 🙂
Play at 1.25x for better experience
Ha yeah, I was weirdly slow in the beginning :/
Video is perfect at 1.25x
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.
Mute the audio on the introduction or almost anywhere at all, you would think she is on slow motion
So cringe, I know. I talk about this all the time. Hopefully you'll find subsequent videos far improved 😅
@@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.
@@georgejames3868 Thanks George. I appreciate that.
Informative but the whole course costs 997$$$, I think they strongly believe that everyone in this planet earns dollars. 🤞
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
@@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.
Can I get you a better mic? =)
Well if you're offering... lol Cringe I know, but hey was my first video ever. I'd say the improvement now is apparent.
Sorry, but the music is extremely annoying