Anatomy of a button

  • 996 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
996
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

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
  • \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

Transcript

  • 1. Anatomy of a Button Jonathan LibovProduct Manager @ Appsfire
  • 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. Advertise with us Reach high-quality users with an App of the Day & Push Marketing Campaign Your app here!A little about
  • 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. 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. Buttons, buttons, buttons
  • 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. 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. Understanding what needs to be done to thisrounded rectangle...To make it look like an awesome button...What this is about
  • 10. And to understand the difference between this...And thisWhat this is about
  • 11. And this...And thisWhat this is about
  • 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. 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. iOS 5 style nav bar button
  • 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. + - + - FRONT FACING SIDE VIEW, iPHONE VERTICALiOS 5 style nav bar button THE 90° RULE
  • 17. LIGHT SOURCE LIGHT SHADOW LIGHT HITS THIS LIPiOS 5 style nav bar button WIREFRAME
  • 18. StrokeGradientInner ShadowDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
  • 19. StrokeMAKE THE BUTTON STANDOUT FROM ITS BACKGROUNDGradientInner ShadowDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
  • 20. StrokeGradientGIVE THE BUTTON ACURVED SURFACEInner ShadowDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
  • 21. StrokeGradientInner ShadowINDENT THE BUTTON INTOTHE NAV BARDrop ShadowiOS 5 style nav bar button LET’S BUILD IT
  • 22. StrokeGradientInner ShadowDrop ShadowRESOLVE THE BUTTONINDENTATIONiOS 5 style nav bar button LET’S BUILD IT
  • 23. StrokeGradientInner ShadowJUST CHANGE THE BLACKTO WHITEDrop ShadowiOS 5 style nav bar button CHANGE IT UP
  • 24. StrokeGradientMAKE IT DARKER & A LESSSTEEP GRADIENTInner ShadowMAKE IT DARK & INCREASE ITDrop ShadowiOS 5 style nav bar button PRESS THE BUTTON
  • 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. iOS 5iOS 6The iOS 6 style nav bar button
  • 27. iOS 5 Slightly deeper via inner shadowiOS 6The iOS 6 style nav bar button
  • 28. iOS 5 No glossy gradientiOS 6The iOS 6 style nav bar button
  • 29. Copy/Paste!teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/Resources TEEHAN & LAX PSD
  • 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. Thank you!jonathan@appsfire.com @libovness