Android DevCon 2013 Design

Pretty Mobile
How to look good and why it matters
Thursday, May 23, 13

You’ll Learn
‣ How visuals support brand
‣ Applying this to mobile
‣ Making your apps better
‣ The importance of icons
Please consider sharing!

Pay Attention
What do you think of these apps?

which...
stood out as good? bad?

worth $1b?

homemade?

for geeks?

sorry... i lied
24 judgement calls in 7 second
‣ money
‣ education
‣ interesting
‣ etc.

what’s your brand?
professional
large
exciting
useful
grass roots
fun
easy
personal
corporate
full featured
relaxing

your samples?
send:
‣ screenshot or wireframe
‣ 3 phrases to describe your brand
‣ brand inspiration (optional)
to: jess@gravityswitch.com

A Little About You

why’d ya come?
Existing App
New App

$0.00
$.99 - $2.99
$3.99 - $9.99
$9.99+
other (internal app)
pricing
$
$
$
?
Free!
$
$$

company size
lone gunslinger
2-10 employees/partners
11-100 employees
100+ employees

your superpower?
programming
design
usability
other

crayons
use Photoshop well
design 5 color pallets from this:
win awards for graphic design
design experience

A Little About Me
For perspective...

I’m a Hard-Ass

We make cool stuff with
cool people.

Web. Mobile. Marketing.
Strategy. Teaching.

You should also know

Artists Critique Art

It’s more fun to do
great things

What is Visual Brand?
Hint: not a style guide

gravityswith.com/andevcon

Articulating Brand

(Most) Style Guides are Dumb
55 pages!

Please Don’t Ever do This

Mood Board / Style Tile

Try One
Find:
Posters
Pictures
Fonts
Colors

Remember
It doesn’t matter if you like it
It doesn’t matter if your boss likes it
It matters if it works!

Design Elements
Fonts, colors, menus & navigation

Fonts
How to choose

serif = conservative

serif = conservative sans-serif = modern

when in doubt...
easy to read small
more common (digitally)
... use sans-serif.

Strange Fonts are Hard

What else to know
‣ Buy your fonts
‣ 3 fonts MAXIMUM
‣ S p a c i n g matters
‣ Android still limited... but

you can’t go wrong with helvetica roboto
source: theunderstatement.com

Got Style?
Menus & navigation

main menu

iPhone Vs. Android

colored navigation

Color Matters

Colors are HARD
2 years of Focused Practice

A Good Color Palette Has...
5-7 Colors
2 that stand out
3-5 that are related

Shortcut 1: Online
colorblender.com

Shortcut 2: From a Picture

What Else to Know

What Else to Know
‣ Match your saturation level

What Else to Know
‣ More saturation isn’t better

What Else to Know
‣ Contrast is eye-catching

What Else to Know
‣ Contrast is eye-catching
‣ Too much contrast = a Kmart ﬂier

Tips
From the masters

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

Consider wireframes
Less to think about
Good/Bad

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

Hiring a designer
2 hours
5-10 people
Pay them for their time
Mood Boards and Designs
You’ll know who to work with

Good/Bad Designer

Good/Bad Designer
What do you like?

Good/Bad Designer
What do you like?
What do you want people to feel?

Good/Bad Designer
What do you like?
Do I have to use your logo?

Good/Bad Designer
What do you like?
What color should it be?

Good/Bad Designer
What do you like?
Is there a style guide to be aware of?

Good/Bad Designer
What do you like?
I’ll make you a style guide first.

Good/Bad Designer
What do you like?
I’ll make you a style guide first.
I’ll start with mood boards

The Golden Rule
If you can’t tell what you changed in the
past 10 minutes, it’s time to stop
working.
Christine Mark

Critiques
critiques are about being critical
jason@gravityswitch.com

Icons
what can we learn from logos

What’s the Difference?

There’s Also These

Icons Should Be Iconic
don’t tell a story
one idea only
simple shapes
don’t overdo it

Icon Critiques

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

brand = emotions
not a logo

what does your app
in 140 characters

who uses it?
in 140 characters

what should users feel?
national brands
what emotions?
what expectations do they have?

What did
Jessica do?
look at some samples

Ask Me Questions
http://gravityswitch.com/andevcon
@jasonNmark
eBooks (Thursday 8:30)

Android DevCon 2013 Design

Recommandé

Recommandé

Contenu connexe

Similaire à Android DevCon 2013 Design

Similaire à Android DevCon 2013 Design (9)

Plus de gravityswitch

Plus de gravityswitch (8)

Dernier

Dernier (20)

Android DevCon 2013 Design