Your SlideShare is downloading. ×
0
Anatomy of a Button                               Jonathan Libov                         Product Manager @ AppsfireWednesd...
I’m a Product Manager at            ,a       discovery platform for iOS & Android apps.                          6 million...
Promote with us                         Reach high-quality users                         with an App of the Day &         ...
Engage your users                 Notifications (2)                         Close        App Booster is a mobile CRM       ...
1                 2                   3                  getap.ps/appsfire   Send feedback      Introduce yourself        ...
Buttons, buttons, buttonsWednesday, June 20, 12
Creating graphical assets for an app is often a       mostly procedural process.       If you can write Objective C, you c...
How to become a pseudo-designer       How to develop a great user experience       For UI/UX, hire a designer or user expe...
Understanding what needs to be done to this       rounded rectangle...       To make it look like an awesome button...    ...
And to understand the difference between this...       And this       What this is aboutWednesday, June 20, 12
And this...       And this       What this is aboutWednesday, June 20, 12
When you know how to toggle the right       parameters in Photoshop, you can produce       beautiful assets.       You’ll ...
A crash course in color theory, font pairing,       icon design or any other erudite design skill.       But you will star...
iOS 5 style nav bar buttonWednesday, June 20, 12
“If you decide to add a bevel,                                be sure that it is 90° (to help                             ...
+                                                         -                                             +                 ...
LIGHT SOURCE                         LIGHT                         SHADOW                           LIGHT HITS            ...
Stroke       Gradient       Inner Shadow       Drop Shadow       iOS 5 style nav bar button   LET’S BUILD ITWednesday, Jun...
Stroke        MAKE THE BUTTON STAND        OUT FROM ITS BACKGROUND       Gradient       Inner Shadow       Drop Shadow    ...
Stroke       Gradient        GIVE THE BUTTON A        CURVED SURFACE       Inner Shadow       Drop Shadow       iOS 5 styl...
Stroke       Gradient       Inner Shadow        INDENT THE BUTTON INTO        THE NAV BAR       Drop Shadow       iOS 5 st...
Stroke       Gradient       Inner Shadow       Drop Shadow        RESOLVE THE BUTTON        INDENTATION       iOS 5 style ...
Stroke       Gradient       Inner Shadow        JUST CHANGE THE BLACK        TO WHITE       Drop Shadow       iOS 5 style ...
Stroke       Gradient        MAKE IT DARKER & A LESS        STEEP GRADIENT       Inner Shadow        MAKE IT DARK & INCREA...
GMail                         FLAT AND PROTRUDING                         Waze                         NOT ONLY PROTRUDING...
iOS 5       iOS 6       The iOS 6 style nav bar buttonWednesday, June 20, 12
iOS 5                           Slightly deeper                         via inner shadow       iOS 6       The iOS 6 style...
iOS 5                         No glossy gradient       iOS 6       The iOS 6 style nav bar buttonWednesday, June 20, 12
Copy/Paste!       teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/       Resources                                        ...
Read up                          flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php                      ...
Thank you!                         jonathan@appsfire.com                              @libovnessWednesday, June 20, 12
Upcoming SlideShare
Loading in...5
×

Anatomy of a button

934

Published on

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
934
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Anatomy of a button"

  1. 1. Anatomy of a Button Jonathan Libov Product Manager @ AppsfireWednesday, June 20, 12
  2. 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 aboutWednesday, June 20, 12
  3. 3. Promote with us Reach high-quality users with an App of the Day & Push Marketing Campaign Your app here! A little aboutWednesday, June 20, 12
  4. 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 aboutWednesday, June 20, 12
  5. 5. 1 2 3 getap.ps/appsfire Send feedback Introduce yourself (mention something about “Anatomy of a Button”) A little about LET’S TRY ITWednesday, June 20, 12
  6. 6. Buttons, buttons, buttonsWednesday, June 20, 12
  7. 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 aboutWednesday, June 20, 12
  8. 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 aboutWednesday, June 20, 12
  9. 9. Understanding what needs to be done to this rounded rectangle... To make it look like an awesome button... What this is aboutWednesday, June 20, 12
  10. 10. And to understand the difference between this... And this What this is aboutWednesday, June 20, 12
  11. 11. And this... And this What this is aboutWednesday, June 20, 12
  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 aboutWednesday, June 20, 12
  13. 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 aboutWednesday, June 20, 12
  14. 14. iOS 5 style nav bar buttonWednesday, June 20, 12
  15. 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° RULEWednesday, June 20, 12
  16. 16. + - + - FRONT FACING SIDE VIEW, iPHONE VERTICAL iOS 5 style nav bar button THE 90° RULEWednesday, June 20, 12
  17. 17. LIGHT SOURCE LIGHT SHADOW LIGHT HITS THIS LIP iOS 5 style nav bar button WIREFRAMEWednesday, June 20, 12
  18. 18. Stroke Gradient Inner Shadow Drop Shadow iOS 5 style nav bar button LET’S BUILD ITWednesday, June 20, 12
  19. 19. Stroke MAKE THE BUTTON STAND OUT FROM ITS BACKGROUND Gradient Inner Shadow Drop Shadow iOS 5 style nav bar button LET’S BUILD ITWednesday, June 20, 12
  20. 20. Stroke Gradient GIVE THE BUTTON A CURVED SURFACE Inner Shadow Drop Shadow iOS 5 style nav bar button LET’S BUILD ITWednesday, June 20, 12
  21. 21. Stroke Gradient Inner Shadow INDENT THE BUTTON INTO THE NAV BAR Drop Shadow iOS 5 style nav bar button LET’S BUILD ITWednesday, June 20, 12
  22. 22. Stroke Gradient Inner Shadow Drop Shadow RESOLVE THE BUTTON INDENTATION iOS 5 style nav bar button LET’S BUILD ITWednesday, June 20, 12
  23. 23. Stroke Gradient Inner Shadow JUST CHANGE THE BLACK TO WHITE Drop Shadow iOS 5 style nav bar button CHANGE IT UPWednesday, June 20, 12
  24. 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 BUTTONWednesday, June 20, 12
  25. 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 VariationsWednesday, June 20, 12
  26. 26. iOS 5 iOS 6 The iOS 6 style nav bar buttonWednesday, June 20, 12
  27. 27. iOS 5 Slightly deeper via inner shadow iOS 6 The iOS 6 style nav bar buttonWednesday, June 20, 12
  28. 28. iOS 5 No glossy gradient iOS 6 The iOS 6 style nav bar buttonWednesday, June 20, 12
  29. 29. Copy/Paste! teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/ Resources TEEHAN & LAX PSDWednesday, June 20, 12
  30. 30. Read up flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php Try it Try it sachagreif.com/ebook designthencode.com Resources SACHA GRIEF & FLYOSITYWednesday, June 20, 12
  31. 31. Thank you! jonathan@appsfire.com @libovnessWednesday, June 20, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×