Android DevCon 2013 Design

96
Pretty Mobile How to look good and why it matters Thursday, May 23, 13
  • date post

    17-Oct-2014
  • Category

    Business

  • view

    640
  • download

    4

description

 

Transcript of Android DevCon 2013 Design

Page 1: Android DevCon 2013 Design

Pretty MobileHow to look good and why it matters

Thursday, May 23, 13

Page 2: Android DevCon 2013 Design

You’ll Learn

‣ How visuals support brand‣ Applying this to mobile‣ Making your apps better‣ The importance of icons

Please consider sharing!

Thursday, May 23, 13

Page 3: Android DevCon 2013 Design

Pay AttentionWhat do you think of these apps?

Thursday, May 23, 13

Page 4: Android DevCon 2013 Design

Thursday, May 23, 13

Page 5: Android DevCon 2013 Design

Thursday, May 23, 13

Page 6: Android DevCon 2013 Design

which...

stood out as good? bad?

Thursday, May 23, 13

Page 7: Android DevCon 2013 Design

worth $1b?

Thursday, May 23, 13

Page 8: Android DevCon 2013 Design

homemade?

Thursday, May 23, 13

Page 9: Android DevCon 2013 Design

for geeks?

Thursday, May 23, 13

Page 10: Android DevCon 2013 Design

why?

Thursday, May 23, 13

Page 11: Android DevCon 2013 Design

sorry... i lied

24 judgement calls in 7 second

‣ money

‣ education

‣ interesting

‣ etc.

Thursday, May 23, 13

Page 12: Android DevCon 2013 Design

what’s your brand?

professional

large

exciting

useful

grass roots

funeasy

personal

corporate

full featured

relaxing

Thursday, May 23, 13

Page 13: Android DevCon 2013 Design

your samples?

send:

‣ screenshot or wireframe

‣ 3 phrases to describe your brand

‣ brand inspiration (optional)

to: [email protected]

Thursday, May 23, 13

Page 14: Android DevCon 2013 Design

A Little About You

Thursday, May 23, 13

Page 15: Android DevCon 2013 Design

why’d ya come?

Existing App

New App

Thursday, May 23, 13

Page 16: Android DevCon 2013 Design

$0.00

$.99 - $2.99

$3.99 - $9.99

$9.99+

other (internal app)

pricing

$

$

$

?

Free!

$

$$

Thursday, May 23, 13

Page 17: Android DevCon 2013 Design

company size

lone gunslinger

2-10 employees/partners

11-100 employees

100+ employees

Thursday, May 23, 13

Page 18: Android DevCon 2013 Design

Thursday, May 23, 13

Page 19: Android DevCon 2013 Design

your superpower?

programming

design

usability

other

Thursday, May 23, 13

Page 20: Android DevCon 2013 Design

crayons

use Photoshop well

design 5 color pallets from this:

win awards for graphic design

design experience

Thursday, May 23, 13

Page 21: Android DevCon 2013 Design

A Little About MeFor perspective...

Thursday, May 23, 13

Page 22: Android DevCon 2013 Design

I’m a Hard-Ass

Thursday, May 23, 13

Page 23: Android DevCon 2013 Design

Thursday, May 23, 13

Page 24: Android DevCon 2013 Design

Thursday, May 23, 13

Page 25: Android DevCon 2013 Design

We make cool stuff with cool people.

Thursday, May 23, 13

Page 26: Android DevCon 2013 Design

Web. Mobile. Marketing. Strategy. Teaching.

Thursday, May 23, 13

Page 27: Android DevCon 2013 Design

You should also know

Thursday, May 23, 13

Page 28: Android DevCon 2013 Design

Artists Critique Art

Thursday, May 23, 13

Page 29: Android DevCon 2013 Design

It’s more fun to do great things

Thursday, May 23, 13

Page 30: Android DevCon 2013 Design

What is Visual Brand?Hint: not a style guide

Thursday, May 23, 13

Page 31: Android DevCon 2013 Design

gravityswith.com/andevcon

Thursday, May 23, 13

Page 32: Android DevCon 2013 Design

Articulating Brand

Thursday, May 23, 13

Page 33: Android DevCon 2013 Design

(Most) Style Guides are Dumb

55 pages!

Thursday, May 23, 13

Page 34: Android DevCon 2013 Design

Please Don’t Ever do This

Thursday, May 23, 13

Page 35: Android DevCon 2013 Design

Mood Board / Style Tile

Thursday, May 23, 13

Page 36: Android DevCon 2013 Design

Mood Board / Style Tile

Thursday, May 23, 13

Page 37: Android DevCon 2013 Design

Thursday, May 23, 13

Page 38: Android DevCon 2013 Design

Thursday, May 23, 13

Page 39: Android DevCon 2013 Design

Try One

Find:PostersPicturesFontsColors

Thursday, May 23, 13

Page 40: Android DevCon 2013 Design

Remember

It doesn’t matter if you like it

It doesn’t matter if your boss likes it

It matters if it works!

Thursday, May 23, 13

Page 41: Android DevCon 2013 Design

Design ElementsFonts, colors, menus & navigation

Thursday, May 23, 13

Page 42: Android DevCon 2013 Design

FontsHow to choose

Thursday, May 23, 13

Page 43: Android DevCon 2013 Design

serif = conservative

Thursday, May 23, 13

Page 44: Android DevCon 2013 Design

serif = conservative sans-serif = modern

Thursday, May 23, 13

Page 45: Android DevCon 2013 Design

when in doubt...

easy to read small

more common (digitally)

... use sans-serif.

Thursday, May 23, 13

Page 46: Android DevCon 2013 Design

Strange Fonts are Hard

Thursday, May 23, 13

Page 47: Android DevCon 2013 Design

What else to know

‣ Buy your fonts

‣ 3 fonts MAXIMUM

‣ S p a c i n g matters

‣ Android still limited... but

Thursday, May 23, 13

Page 48: Android DevCon 2013 Design

you can’t go wrong with helvetica roboto

source: theunderstatement.com

Thursday, May 23, 13

Page 49: Android DevCon 2013 Design

Got Style?Menus & navigation

Thursday, May 23, 13

Page 50: Android DevCon 2013 Design

main menu

Thursday, May 23, 13

Page 51: Android DevCon 2013 Design

main menu

Thursday, May 23, 13

Page 52: Android DevCon 2013 Design

main menu

Thursday, May 23, 13

Page 53: Android DevCon 2013 Design

iPhone Vs. Android

Thursday, May 23, 13

Page 54: Android DevCon 2013 Design

main menu

Thursday, May 23, 13

Page 55: Android DevCon 2013 Design

colored navigation

Thursday, May 23, 13

Page 56: Android DevCon 2013 Design

Color Matters

Thursday, May 23, 13

Page 57: Android DevCon 2013 Design

Colors are HARD

2 years of Focused Practice

Thursday, May 23, 13

Page 58: Android DevCon 2013 Design

A Good Color Palette Has...

5-7 Colors

2 that stand out

3-5 that are related

Thursday, May 23, 13

Page 59: Android DevCon 2013 Design

Shortcut 1: Online

colorblender.com

Thursday, May 23, 13

Page 60: Android DevCon 2013 Design

Shortcut 2: From a Picture

Thursday, May 23, 13

Page 61: Android DevCon 2013 Design

Shortcut 2: From a Picture

Thursday, May 23, 13

Page 62: Android DevCon 2013 Design

What Else to Know

Thursday, May 23, 13

Page 63: Android DevCon 2013 Design

What Else to Know

‣ Match your saturation level

Thursday, May 23, 13

Page 64: Android DevCon 2013 Design

What Else to Know

‣ Match your saturation level

‣ More saturation isn’t better

Thursday, May 23, 13

Page 65: Android DevCon 2013 Design

What Else to Know

‣ Match your saturation level

‣ More saturation isn’t better

‣ Contrast is eye-catching

Thursday, May 23, 13

Page 66: Android DevCon 2013 Design

What Else to Know

‣ Match your saturation level

‣ More saturation isn’t better

‣ Contrast is eye-catching

‣ Too much contrast = a Kmart flier

Thursday, May 23, 13

Page 67: Android DevCon 2013 Design

TipsFrom the masters

Thursday, May 23, 13

Page 68: Android DevCon 2013 Design

If you haven’t gone too far...... You haven’t done your job.

Thursday, May 23, 13

Page 69: Android DevCon 2013 Design

Consider wireframes

Less to think about

Good/Bad

Thursday, May 23, 13

Page 70: Android DevCon 2013 Design

Thursday, May 23, 13

Page 71: Android DevCon 2013 Design

Rules of Thumb

‣ Cartoons don’t work

‣ Don’t use clipart (other than icons)

‣ Know if you want to stand out,

or catch up

‣ Discard 3 effects before shipping

Thursday, May 23, 13

Page 72: Android DevCon 2013 Design

Hiring a designer

2 hours

5-10 people

Pay them for their time

Mood Boards and Designs

You’ll know who to work with

Thursday, May 23, 13

Page 73: Android DevCon 2013 Design

Good/Bad Designer

Thursday, May 23, 13

Page 74: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

Thursday, May 23, 13

Page 75: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

What do you want people to feel?

Thursday, May 23, 13

Page 76: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

What do you want people to feel?

Do I have to use your logo?

Thursday, May 23, 13

Page 77: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

What do you want people to feel?

Do I have to use your logo?

What color should it be?

Thursday, May 23, 13

Page 78: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

What do you want people to feel?

Do I have to use your logo?

What color should it be?

Is there a style guide to be aware of?

Thursday, May 23, 13

Page 79: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

What do you want people to feel?

Do I have to use your logo?

What color should it be?

Is there a style guide to be aware of?

I’ll make you a style guide first.

Thursday, May 23, 13

Page 80: Android DevCon 2013 Design

Good/Bad Designer

What do you like?

What do you want people to feel?

Do I have to use your logo?

What color should it be?

Is there a style guide to be aware of?

I’ll make you a style guide first.

I’ll start with mood boards

Thursday, May 23, 13

Page 81: Android DevCon 2013 Design

The Golden Rule

If you can’t tell what you changed in the

past 10 minutes, it’s time to stop

working.

Christine Mark

Thursday, May 23, 13

Page 82: Android DevCon 2013 Design

Critiquescritiques are about being critical

[email protected]

Thursday, May 23, 13

Page 83: Android DevCon 2013 Design

Iconswhat can we learn from logos

Thursday, May 23, 13

Page 84: Android DevCon 2013 Design

Hiring a designer

2 hours

5-10 people

Pay them for their time

Mood Boards and Designs

You’ll know who to work with

Thursday, May 23, 13

Page 85: Android DevCon 2013 Design

What’s the Difference?

Thursday, May 23, 13

Page 86: Android DevCon 2013 Design

There’s Also These

Thursday, May 23, 13

Page 87: Android DevCon 2013 Design

gravityswith.com/andevcon

Thursday, May 23, 13

Page 88: Android DevCon 2013 Design

Icons Should Be Iconic

don’t tell a story

one idea only

simple shapes

don’t overdo it

Thursday, May 23, 13

Page 90: Android DevCon 2013 Design

What is Brand?other than a word designers use to charge

more money...

Thursday, May 23, 13

Page 91: Android DevCon 2013 Design

brand = emotionsnot a logo

Thursday, May 23, 13

Page 92: Android DevCon 2013 Design

what does your app

in 140 characters

Thursday, May 23, 13

Page 93: Android DevCon 2013 Design

who uses it?

in 140 characters

Thursday, May 23, 13

Page 94: Android DevCon 2013 Design

what should users feel?

national brands

what emotions?

what expectations do they have?

Thursday, May 23, 13

Page 95: Android DevCon 2013 Design

What did Jessica do?look at some samples

Thursday, May 23, 13

Page 96: Android DevCon 2013 Design

Ask Me Questions

http://gravityswitch.com/[email protected]@jasonNmark

eBooks (Thursday 8:30)

Thursday, May 23, 13