» Josh Miles @joshmiles » Principal & Founder » Miles Design » #HeroConf

What’s in a Color?: Design Tips from an Industry Pro*

*I didn’t write that title.

*I didn’t write that title.And as long as we’re disclaiming things I didn’t do… almost everything I’m showing you today is not mine. All trademarks, copyrights, etc. belong to their respective owners, and not me, Hanapin Marketing, or HeroConf. I’m showing these images today in the interest of “fair use” for the purposes of criticism, comment, and educational purposes. Capiche?

@joshmiles

Irony is…

@joshmiles

Irony is…When you ask the designer with the black and white identity system to speak on color.

@joshmiles

Slides and goodies: !

milesdesign.com/color !

@joshmiles

@joshmiles

Pro tips:

@joshmiles

Pro tips:- How do pros talk about color?

@joshmiles

Pro tips:- How do pros talk about color?- How does color impact meaning?

@joshmiles

Pro tips:- How do pros talk about color?- How does color impact meaning?- How can color guide user behavior?

@joshmiles

Pro tips:- How do pros talk about color?- How does color impact meaning?- How can color guide user behavior?- How does color impact your mood?

@joshmiles

Pro tips:- How do pros talk about color?- How does color impact meaning?- How can color guide user behavior?- How does color impact your mood?- Do pros use color for good or evil?

@joshmiles

Pro Tip #1: What do the pros talk about when the pros talk about color?

@joshmiles

Not fruit.

@joshmiles

Not fruit.

@joshmiles

Pantone. mmm…

@joshmiles

Pantone. mmm…

@joshmiles

Color spaces: Pantone: PMS Numbers CMYK: Cyan, Magenta, Yellow, Black RGB: Red, Green, Blue Hexidecimal: Red, Green, Blue

@joshmiles

Can you name this color? Pantone: 426c CMYK: 60, 60, 60, 100 RGB: 0, 0, 0 Hexidecimal: 000000

Ugh.

Ugh.

@joshmiles

Pro Tip #1: Pros create brand consistency by creating color standards.

@joshmiles

Pro Tip #2: What does that color mean?

Powerful

Black

White

Blue

Red

Green

Purple

Purple

Yellow

Orange

Brown

Grey/Silver

@joshmiles

Pro Tip #2: When pros use color, they’re conveying powerful meaning.

@joshmiles

Pro Tip #3: Can color guide behavior?

?

@joshmiles

Pro Tip #3: Pros use color to guide user behavior and create hierarchy.

@joshmiles

Pro Tip #4: Can color impact mood?

@joshmiles

Pro Tip #4: Pros use color to put you in the mood.

@joshmiles

Pro Tip #5: Should you use color for good or evil?

@joshmiles

WWBD? What would Basecamp do?

@joshmiles

Google Material DesignChoose your palette “Limit your choice of colors by choosing three color hues in the primary and one accent color in the secondary palette. The accent color may or may not need fall back options.”

@joshmiles

Pro Tip #5: Pros expect more out of their visitors & use color for good.

@joshmiles

@joshmiles

Pro tips:

@joshmiles

Pro tips:1. Talk about color like a pro.

@joshmiles

Pro tips:1. Talk about color like a pro.2. Convey meaning.

@joshmiles

Pro tips:1. Talk about color like a pro.2. Convey meaning.3. Create hierarchy & guide behavior.

@joshmiles

Pro tips:1. Talk about color like a pro.2. Convey meaning.3. Create hierarchy & guide behavior.4. Set the mood.

@joshmiles

Pro tips:1. Talk about color like a pro.2. Convey meaning.3. Create hierarchy & guide behavior.4. Set the mood.5. Expect more - use color for good.

@joshmiles

More of: This.

@joshmiles

More of: This.

Less of that.

@joshmiles

And this.

@joshmiles

And this.

@joshmiles

Resources:http://www.w3schools.com/tags/ref_colorpicker.asp https://kuler.adobe.com/create/color-wheel/ http://www.pantone.com/pages/pantone/index.aspx http://blog.marketo.com/2012/06/true-colors-what-your-brand-colors-say-about-your-business.html https://blog.kissmetrics.com/color-psychology/ http://www.google.com/design/ http://www.awwwards.com/

@joshmiles

Resources:http://www.w3schools.com/tags/ref_colorpicker.asp https://kuler.adobe.com/create/color-wheel/ http://www.pantone.com/pages/pantone/index.aspx http://blog.marketo.com/2012/06/true-colors-what-your-brand-colors-say-about-your-business.html https://blog.kissmetrics.com/color-psychology/ http://www.google.com/design/ http://www.awwwards.com/

@joshmiles

Thank you. !

milesdesign.com/color !

@joshmiles

Thank you. !

milesdesign.com/color !