How to Use Color in UI Design (UI Principles Series)
22.3K views · 2020-07-26
UI DesignVisual & Graphic
This video is the third part of the UI Principles Series. In this video I discuss: color, color theory, elements of color which include hue, chroma, value, saturation, tones, tints and shades. Additionally, I cover color psychology, golden ratio, color rules in UI, color schemes, and color palettes. We go through 3 exercises and some additional resources which you can see below.
Design File:
Make sure to copy and paste elements into a new file
https://www.figma.com/file/z4k12ScGrgqp4u6bft18Hu/UI-Principles-Color-Exercises?node-id=0%3A1
Additional Resources:
* Color Theory for Designers Series - Smashing Magazine - https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
* The Fundamentals of Understanding Color Theory - 99designs - https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-theory/
* The Golden Ratio and how to use it in graphic design - 99 designs - https://99designs.com/blog/tips/the-golden-ratio/#:~:text=%E2%80%94,is%201.618%2C%20also%20called%20Phi.
* How to Design for Color Blindness by Usabilla - https://usabilla.com/blog/how-to-design-for-color-blindness/
* Color Matters. 6 Tips on Choosing UI Colors by UX Planet - https://uxplanet.org/color-matters-6-tips-on-choosing-ui-colors-260f56197a7b
* 8 Important Color Rules for UI Design - https://digitalsynopsis.com/design/ui-design-color-rules/
#ui #uidesign #uifundamentals #uiprinciples #uicolor #colortheory #goldenratio #designgoldenratio #colorpsychology #colorpalette
Design File:
Make sure to copy and paste elements into a new file
https://www.figma.com/file/z4k12ScGrgqp4u6bft18Hu/UI-Principles-Color-Exercises?node-id=0%3A1
Additional Resources:
* Color Theory for Designers Series - Smashing Magazine - https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
* The Fundamentals of Understanding Color Theory - 99designs - https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-theory/
* The Golden Ratio and how to use it in graphic design - 99 designs - https://99designs.com/blog/tips/the-golden-ratio/#:~:text=%E2%80%94,is%201.618%2C%20also%20called%20Phi.
* How to Design for Color Blindness by Usabilla - https://usabilla.com/blog/how-to-design-for-color-blindness/
* Color Matters. 6 Tips on Choosing UI Colors by UX Planet - https://uxplanet.org/color-matters-6-tips-on-choosing-ui-colors-260f56197a7b
* 8 Important Color Rules for UI Design - https://digitalsynopsis.com/design/ui-design-color-rules/
#ui #uidesign #uifundamentals #uiprinciples #uicolor #colortheory #goldenratio #designgoldenratio #colorpsychology #colorpalette