Designing with Color for User Interfaces
•
2 likes•425 views
Learn to select the right colors for your brand, use HSB instead of RGB to pick and choose colors, learn about accessibility, and other methodologies to improve your design
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Designing with Color for User Interfaces
Similar to Designing with Color for User Interfaces (20)
More from Andi Galpern
More from Andi Galpern (9)
Recently uploaded
Recently uploaded (20)
Designing with Color for User Interfaces
- 3. An intro to color theory & terminology
- 4. Sir Isaac Newton designed the color wheel in 1666
- 6. The color wheel is a basic tool for combining colors.
- 7. Primary Red, blue, and yellow.
- 9. Tertiary Colors A tertiary color is a color made by mixing one primary color with one secondary color.
- 11. Warm and cool colors
- 19. Josef Albers
- 20. How to create a UI color scheme from scratch
- 22. step 1: create a mood board
- 23. Collect images on Pinterest to create a mood board. create a mood board
- 25. Dear , Thank you for existing. Love, Andi
- 26. step 2: Sample colors and explore palettes
- 31. step 3: Narrow down your palette
- 33. main secondary text accent accent
- 34. main secondary text accent accent use sparingly
- 36. Do not overpower the lead singer. Support them with harmonies.
- 38. main secondary text accent accent
- 39. list out HEX codes
- 40. Tip 2: Use photos from nature.
- 42. How to add colors to an existing brand
- 43. step 1: Start with your primary color
- 44. main
- 45. step 2: Understand the mood
- 46. smart, subtle, a little playful, but more conservative to reach a broader audience.
- 47. set main color, have darkest of dark, lightest of light, pick shadow & highlight (supporting cast) step 3:
- 49. Choose a couple different accent colors that will make the main color shine
- 51. color harmony can be subjective.
- 52. Tip: Learn color theory to reduce subjectivity.
- 53. The Psychology of Color
- 54. The Psychology of Color
- 56. Energy Power Leadership Courage Love Activity Joy danger
- 58. Security Stability Loyalty Wisdom Confidence Trust Friendliness Courage Intelligence
- 62. Calming Ambition Money Endurance Healing Calm Generosity Natural Protection
- 66. Stability Power Luxury Ambition Dignity Wealth Extravagant Mystery Magic
- 73. example: red
- 74. India recognizes red as a symbol of purity.
- 76. Color naming
- 77. almost like going to a paint store where they name their colors
- 78. Tip: To get better at choosing colors, we need to pay attention to the details. There are so many colors that are in between.
- 83. Adobe Color CC (formerly known as Kuler)
- 85. Hue — another word for color Saturation (chroma) — the intensity or purity of a hue Brightness (value) — dark to light Use HSB to mix
- 87. Tech specs
- 88. Save the HEX Code
- 89. Accessibility
- 90. What are the most commonly confused colors?
- 91. blue, green
- 94. Tools to check for accessibility
- 95. How do color blind people see these colors?
- 96. Use patterns and textures to distinguish where colors should be.
- 100. Tip: Design in monochrome, then add color.
- 101. Tip: Convert to grayscale in system settings to test out contrast.
- 108. Choose color schemes that can be easily identified by people with all types of color vision
- 109. Lighting
- 110. Improve Your Painting with 3 Simple Rules- Izzy's Logic of Light and Color: Ep 1 Izzy Medrano
- 113. 1. Objects and parts of objects most perpendicular to the light source receive the most amount of light.
- 114. 2. Objects further away receive less light.
- 115. 3. Lights are closer to you are more illuminated and as you move away they become dimmer.
- 116. If anything solid is blocking the light, it gets no light.
- 118. CSS3 gradient makers