Anatomy of a button

  • 851 views
Uploaded on

 

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
851
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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