Designing with Color for User Interfaces
121
-
Upload
andi-galpern -
Category
Design
-
view
136 -
download
0
Transcript of Designing with Color for User Interfaces
@andigalpern @cascadesf
Andi Galpern
An intro to color theory & terminology
Sir Isaac Newton designed the color wheel in 1666
The color wheel is a basic tool for combining colors.
Primary
Red, blue, and yellow.
+
+
+
violet
green
orange
=
=
=
Tertiary Colors
A tertiary color is a color made by mixing one primary color with one secondary color.
Complementary Colors
Warm and cool colors
Relationships and Interactions
Josef Albers
How to create a UI color scheme from scratch
step 1: get inspired
step 1: create a mood board
Collect images on Pinterest to create a mood board.
create a mood board
Dear ,Thank you for existing.
Love, Andi
step 2: Sample colors and explore palettes
step 3: Narrow down your palette
main secondary text accent accent
main secondary text accent accent
use sparingly
Do not overpower the lead singer. Support them with harmonies.
main secondary text accent accent
list out HEX codes
Tip 2: Use photos from nature.
How to add colors to an existing brand
step 1:Start with your primary
color
main
step 2:Understand the mood
smart, subtle, a little playful, but more conservative to reach a broader audience.
set main color, have darkest of dark, lightest of light, pick shadow & highlight
(supporting cast)
step 3:
main
secondary & text
accent
accentaccent
accent
Choose a couple different accent colors that will make the main
color shine
main
secondary & text
accent
accentaccent
accent
color harmony can be subjective.
Tip: Learn color theory to reduce
subjectivity.
The Psychology of Color
The Psychology of Color
Energy Power
Leadership Courage Love
Activity Joydanger
Security Stability Loyalty
Wisdom Confidence
Trust Friendliness
CourageIntelligence
Optimism
Happiness Freshness
Calming Ambition Money
Endurance Healing Calm
Generosity Natural Protection
CheerfulHappiness Creativity Enthusiasm FunDetermination
Success
Stability Power Luxury Ambition Dignity
WealthExtravagant
Mystery Magic
Goodness Innocence Safety
Clean Positive
Simplicity
Powerful Mysterious
Elegant FunctionalFear
Authority
Colors associated with emotions
Know your audience.
example: red
India recognizes red as a symbol of purity.
In Africa, red represents mourning.
Color naming
almost like going to a paint store where they name their colors
Tip: To get better at choosing colors, we need to pay attention to the details. There are so many colors that are
in between.
trust your instincts
Color Palette Generators
Adobe Color CC (formerly known as Kuler)
Hue — another word for color
Saturation (chroma) — the intensity or purity of a hue
Brightness (value) — dark to light
Use HSB to mix
Tech specs
Save the HEX Code
Accessibility
What are the most commonly confused colors?
blue, green
http://wave.webaim.org/
Tools to check for accessibility
How do color blind people see these colors?
Use patterns and textures to distinguish where colors should be.
Tip: Design in monochrome, then
add color.
Tip: Convert to grayscale in system
settings to test out contrast.
@aaron10buuren
Medium
githubhttps://yeun.github.io/open-color/swatches.html
Choose color schemes that can be easily identified by people with all types of color vision
Lighting
Improve Your Painting with 3 Simple Rules- Izzy's Logic of Light and Color: Ep 1
Izzy Medrano
https://www.youtube.com/watch?v=tx-TwkMtPwc Izzy Medrano
1. Objects and parts of objects most perpendicular to the light source receive
the most amount of light.
2. Objects further away receive less light.
3. Lights are closer to you are more illuminated and as you move away they
become dimmer.
If anything solid is blocking the light, it gets no light.
CSS3 gradient makers
