1. Anatomy of a Button
Jonathan Libov
Product Manager @ Appsfire
Wednesday, June 20, 12

2. I’m a Product Manager at ,a
discovery platform for iOS & Android apps.
6 million downloads
Personalized and intelligent
app recommendations
Users come to Appsfire to
discover high-quality apps
A little about
Wednesday, June 20, 12

3. Promote with us
Reach high-quality users
with an App of the Day &
Push Marketing Campaign
Your app here!
A little about
Wednesday, June 20, 12

4. Engage your users
Notifications (2) Close App Booster is a mobile CRM
Version 2.0 is on the App Store!
All new features, lots of social, and a brand
system to help you engage &
new design. Download now!
We recommend Talking Turtle
retain your users.
Feed your turtle and watch him
glow. Download now!
Like us on Facebook
Like us on Facebook and get news and
updates from us on our Wall. Just a few apps powered by App Booster
Try Talking Snowball
If you like Talking Gremlin, you’re
sure to love this app. Promoted
Enter our contest to win prizes
A little about
Wednesday, June 20, 12

5. 1 2 3
getap.ps/appsfire Send feedback Introduce yourself
(mention something about
“Anatomy of a Button”)
A little about LET’S TRY IT
Wednesday, June 20, 12

6. Buttons, buttons, buttons
Wednesday, June 20, 12

7. Creating graphical assets for an app is often a
mostly procedural process.
If you can write Objective C, you can contribute
graphical assets when a designer is not on hand.
What this is about
Wednesday, June 20, 12

8. How to become a pseudo-designer
How to develop a great user experience
For UI/UX, hire a designer or user experience
expert to get you started on the right track.
What this is not about
Wednesday, June 20, 12

9. Understanding what needs to be done to this
rounded rectangle...
To make it look like an awesome button...
What this is about
Wednesday, June 20, 12

10. And to understand the difference between this...
And this
What this is about
Wednesday, June 20, 12

11. And this...
And this
What this is about
Wednesday, June 20, 12

12. When you know how to toggle the right
parameters in Photoshop, you can produce
beautiful assets.
You’ll also be able to talk to your designer.
“Um, ‫ ,כאילו‬somehow this “The inner shadow should
doesn’t look right to me. be deeper when the button
Maybe it’s the color?” is in the pressed state.”
What this is about
Wednesday, June 20, 12

13. A crash course in color theory, font pairing,
icon design or any other erudite design skill.
But you will start noticing more details in your
favorite apps.
What this is not about
Wednesday, June 20, 12

14. iOS 5 style nav bar button
Wednesday, June 20, 12

15. “If you decide to add a bevel,
be sure that it is 90° (to help
you do this, imagine a light
source positioned at the top
of the icon).”
iOS 5 style nav bar button THE 90° RULE
Wednesday, June 20, 12

16. +
-
+
-
FRONT FACING SIDE VIEW, iPHONE VERTICAL
iOS 5 style nav bar button THE 90° RULE
Wednesday, June 20, 12

17. LIGHT SOURCE
LIGHT
SHADOW
LIGHT HITS
THIS LIP
iOS 5 style nav bar button WIREFRAME
Wednesday, June 20, 12

18. Stroke
Gradient
Inner Shadow
Drop Shadow
iOS 5 style nav bar button LET’S BUILD IT
Wednesday, June 20, 12

19. Stroke
MAKE THE BUTTON STAND
OUT FROM ITS BACKGROUND
Gradient
Inner Shadow
Drop Shadow
iOS 5 style nav bar button LET’S BUILD IT
Wednesday, June 20, 12

20. Stroke
Gradient
GIVE THE BUTTON A
CURVED SURFACE
Inner Shadow
Drop Shadow
iOS 5 style nav bar button LET’S BUILD IT
Wednesday, June 20, 12

21. Stroke
Gradient
Inner Shadow
INDENT THE BUTTON INTO
THE NAV BAR
Drop Shadow
iOS 5 style nav bar button LET’S BUILD IT
Wednesday, June 20, 12

22. Stroke
Gradient
Inner Shadow
Drop Shadow
RESOLVE THE BUTTON
INDENTATION
iOS 5 style nav bar button LET’S BUILD IT
Wednesday, June 20, 12

23. Stroke
Gradient
Inner Shadow
JUST CHANGE THE BLACK
TO WHITE
Drop Shadow
iOS 5 style nav bar button CHANGE IT UP
Wednesday, June 20, 12

24. Stroke
Gradient
MAKE IT DARKER & A LESS
STEEP GRADIENT
Inner Shadow
MAKE IT DARK & INCREASE IT
Drop Shadow
iOS 5 style nav bar button PRESS THE BUTTON
Wednesday, June 20, 12

25. GMail
FLAT AND PROTRUDING
Waze
NOT ONLY PROTRUDING, BUT
PRACTICALLY FLOATING DUE TO
BLURRY DROP SHADOW AND
EXCESSIVE INNER SHADOW
Skype
FLAT, BARELY PROTRUDING
Variations
Wednesday, June 20, 12

26. iOS 5
iOS 6
The iOS 6 style nav bar button
Wednesday, June 20, 12

27. iOS 5
Slightly deeper
via inner shadow
iOS 6
The iOS 6 style nav bar button
Wednesday, June 20, 12

28. iOS 5
No glossy gradient
iOS 6
The iOS 6 style nav bar button
Wednesday, June 20, 12

29. Copy/Paste!
teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/
Resources TEEHAN & LAX PSD
Wednesday, June 20, 12

30. Read up
flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
Try it Try it
sachagreif.com/ebook designthencode.com
Resources SACHA GRIEF & FLYOSITY
Wednesday, June 20, 12

31. Thank you!
jonathan@appsfire.com
@libovness
Wednesday, June 20, 12