Your SlideShare is downloading. ×
Anatomy of a button
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Anatomy of a button

906

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Anatomy of a Button Jonathan Libov Product Manager @ AppsfireWednesday, 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 aboutWednesday, 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 aboutWednesday, 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 aboutWednesday, 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 ITWednesday, June 20, 12
  • 6. Buttons, buttons, buttonsWednesday, 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 aboutWednesday, 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 aboutWednesday, 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 aboutWednesday, June 20, 12
  • 10. And to understand the difference between this... And this What this is aboutWednesday, June 20, 12
  • 11. And this... And this What this is aboutWednesday, 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 aboutWednesday, 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 aboutWednesday, June 20, 12
  • 14. iOS 5 style nav bar buttonWednesday, 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° RULEWednesday, June 20, 12
  • 16. + - + - FRONT FACING SIDE VIEW, iPHONE VERTICAL iOS 5 style nav bar button THE 90° RULEWednesday, June 20, 12
  • 17. LIGHT SOURCE LIGHT SHADOW LIGHT HITS THIS LIP iOS 5 style nav bar button WIREFRAMEWednesday, June 20, 12
  • 18. Stroke Gradient Inner Shadow Drop Shadow iOS 5 style nav bar button LET’S BUILD ITWednesday, 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 ITWednesday, 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 ITWednesday, 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 ITWednesday, June 20, 12
  • 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. 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. 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. 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. iOS 5 iOS 6 The iOS 6 style nav bar buttonWednesday, June 20, 12
  • 27. iOS 5 Slightly deeper via inner shadow iOS 6 The iOS 6 style nav bar buttonWednesday, June 20, 12
  • 28. iOS 5 No glossy gradient iOS 6 The iOS 6 style nav bar buttonWednesday, June 20, 12
  • 29. Copy/Paste! teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/ Resources TEEHAN & LAX PSDWednesday, 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 & FLYOSITYWednesday, June 20, 12
  • 31. Thank you! jonathan@appsfire.com @libovnessWednesday, June 20, 12

×