Anatomy of a button

1,441 views
1,253 views

Published on

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

No Downloads
Views
Total views
1,441
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Anatomy of a button

    1. 1. Anatomy of a Button Jonathan LibovProduct Manager @ Appsfire
    2. 2. I’m a Product Manager at ,adiscovery platform for iOS & Android apps. 6 million downloads Personalized and intelligent app recommendations Users come to Appsfire to discover high-quality appsA little about
    3. 3. Advertise with us Reach high-quality users with an App of the Day & Push Marketing Campaign Your app here!A little about
    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 prizesA little about
    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 IT
    6. 6. Buttons, buttons, buttons
    7. 7. Creating graphical assets for an app is often amostly procedural process.If you can write Objective C, you can contributegraphical assets when a designer is not on hand.What this is about
    8. 8. How to become a pseudo-designerHow to develop a great user experienceFor UI/UX, hire a designer or user experienceexpert to get you started on the right track. What this is not about
    9. 9. Understanding what needs to be done to thisrounded rectangle...To make it look like an awesome button...What this is about
    10. 10. And to understand the difference between this...And thisWhat this is about
    11. 11. And this...And thisWhat this is about
    12. 12. When you know how to toggle the rightparameters in Photoshop, you can producebeautiful 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
    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 yourfavorite apps. What this is not about
    14. 14. iOS 5 style nav bar button
    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° RULE
    16. 16. + - + - FRONT FACING SIDE VIEW, iPHONE VERTICALiOS 5 style nav bar button THE 90° RULE
    17. 17. LIGHT SOURCE LIGHT SHADOW LIGHT HITS THIS LIPiOS 5 style nav bar button WIREFRAME
    18. 18. StrokeGradientInner ShadowDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
    19. 19. StrokeMAKE THE BUTTON STANDOUT FROM ITS BACKGROUNDGradientInner ShadowDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
    20. 20. StrokeGradientGIVE THE BUTTON ACURVED SURFACEInner ShadowDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
    21. 21. StrokeGradientInner ShadowINDENT THE BUTTON INTOTHE NAV BARDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
    22. 22. StrokeGradientInner ShadowDrop ShadowRESOLVE THE BUTTONINDENTATIONiOS 5 style nav bar button LET’S BUILD IT
    23. 23. StrokeGradientInner ShadowJUST CHANGE THE BLACKTO WHITEDrop ShadowiOS 5 style nav bar button CHANGE IT UP
    24. 24. StrokeGradientMAKE IT DARKER & A LESSSTEEP GRADIENTInner ShadowMAKE IT DARK & INCREASE ITDrop ShadowiOS 5 style nav bar button PRESS THE BUTTON
    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 PROTRUDINGVariations
    26. 26. iOS 5iOS 6The iOS 6 style nav bar button
    27. 27. iOS 5 Slightly deeper via inner shadowiOS 6The iOS 6 style nav bar button
    28. 28. iOS 5 No glossy gradientiOS 6The iOS 6 style nav bar button
    29. 29. Copy/Paste!teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/Resources TEEHAN & LAX PSD
    30. 30. Read up flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php Try it Try it sachagreif.com/ebook designthencode.comResources SACHA GRIEF & FLYOSITY
    31. 31. Thank you!jonathan@appsfire.com @libovness

    ×