0
TWO TOASTERSANDROIDDESIGNING FOR4/26/2013
WHO ARE YOU?ADIT SHUKLACo-Founder & Creative Directorof Two ToastersAs design lead, he oversees productconceptualization, ...
WORKED WITH…SMASHING!
BEGIN ANSWERINGWhy should I design natively for Android?How can I start designing idiomatically?What should I probably avo...
USERS SPEAK INANDROIDNot literally, of courseBut, if you don’t design with Android paradigms,you must either teach the use...
Using elements from another platformis like forcing a toilet to flush in adifferent direction.THAT’S TOTALLY NOTIDIOMATIC!
LET’S START WITHBASICS TERMSLDPI, MDPI, HDPI and XHDPIBy far, XHDPI and HDPI are the most commonresolutions and LDPI is al...
WHAT THE HECK?LET’S START WITHBASICS TERMSDensity Independent Pixels (DP)8 DP @ LDPI = 6 px8 DP @ MDPI = 8 px8 DP @ HDPI =...
INTERESTING!LET’S START WITHBASICS TERMSBack Up• Always go to previousscreen• Can navigate tooutside the app• Always go hi...
WHERE AM I?SOME BASICNAVIGATION• Action bar• Action bar - Tabs• Action bar – View Control• Drawer
THE ACTION BAROH YEAH, LET’S SEESOME ACTION.As defined by Android guidelines:The action bar is a dedicatedpiece of real es...
THE ACTION BARAH! SO THAT’S WHERE ITGOES.It is 48dp tallin portrait
THE ACTION BARThis is basically what itlooks likeOK, GOT IT!
THE ACTION BARCOOL, SO I GUESS I CANTAP ON IT?Usually theapplicationicon
THE ACTION BARMAKES A WHOLE LOTMORE SENSE.When in screens further downin navigation stack, the upcarat will typically be p...
THE ACTION BARObviously, this is where yousee the screen title.It can also be great place forlogotype.CONTEXTUAL!
THE ACTION BARThese icons represent theactions the user is most likelygoing to require on this screenSO LIKE REFRESH,SEARC...
THE ACTION BARAny action buttonsthat don’t fit onscreen get placedin overflow menuSWEET, I CAN ADD ABUNCH OF ACTIONS.
TAB NAVIGATIONSO TABS GO UP TOP?It’s also 48dptall in portrait
TAB NAVIGATIONTab bar styling is very simplified. Interestingly,when user switches to landscape or tablet, thetab bar gets...
TAB NAVIGATIONScrollable tab bars offer you more space, butobfuscates the total number of tabs. This is 32dptall.IT SLIDES!
VIEW CONTROLInstead of tabs ordrop downs, usethe view controlspinner to handlemodifications to theview belowLIGHTWEIGHT.
EASY PEEZY.SIDE DRAWERIt’s important tonote that mostside drawerlibraries onAndroid normallyrequire the actionbar
THINGS TO AVOID• Chevrons• Back Buttons• Text Action Icons• Rounded App IconsAH, THE BAD SIDE OFTOWN.
CHEVRONSThese are a very common designelement, but don’t belong in Android.List actions that require tappingbehavior shoul...
BACK BUTTONSRely on up and back behavior ratherthan designing back buttons. This is,very specifically, iOS elements.WE COV...
TEXT ACTIONSButtons in the action bar should beicons. For save or done actions, usecontextual action bar. For nextbuttons,...
ROUNDED APPICONSAndroid gives you the ability touse transparent PNGs so you canshape icons in any format.I’M SO USED TOROU...
WHERE TO BEGIN• The Set Up• Style Guide• Fragmentation• Multiple Resolutions• Landscape• Tablet• Slicing for Multiple Reso...
THE SETUP• Personally…Photoshop• Use a single PSD and acombo of layer comps withsmart objects to keep app-wide easy• Desig...
STYLE GUIDE• Simplify• Simplify• Simplify• Everyone’s going simpleGEEZ, WE GET IT…YOULIKE THINGS SIMPLE
TWEET TWEET.
A TO THE Z.
SPOT-IFY
MULTIPLERESOLUTIONSXHDPI25.9%HDPI38.5%MDPI23.4%THAT’S LIKE 88% OFUSERS COVERED?
MULTIPLERESOLUTIONS• No easy answer, other than to tryand design a fluid layout.• Use fewer textures and patterns• Use 9pa...
LANDSCAPELAYOUTS• Absolutely necessary andexpected• Don’t just stretch elements, tryto see if a new layout emergesthat wor...
TABLETS• Try to compound layouts forlarge tablets• For smaller tablets, you shouldbe fine scaling up your HDPI orXHDPI ass...
SLICING FORMULTIPLERESOLUTIONS• A TutorialSWEET, TIME FORPHOTOSHOP!
9PATCHINGSWEET DESIGN BRO.9patching lets you compress an elementlike this to stretch without artifacts.
9PATCHINGOK?First, reduce the element down to as smallas you can get it with stretchable areas inmind.
9PATCHINGFREE STUFF! NICE.Drop it into the 9patch utility (available forfree)
9PATCHINGSAY THAT AGAIN?Draw outlines for portions of the elementthat you want stretchable.
9PATCHINGTHAT MAKES SENSE…Right and bottomedge define thearea that’s“content.”Top and leftedge defineareas that arestretch...
TO CONCLUDE…It’s important to consider the idiomaticapproach because it simplifies theinteractions you have to worry about...
Q&A TIME OOO! PICK ME FIRST!
TWO TOASTERSThank You!
Upcoming SlideShare
Loading in...5
×

Designing For Android

3,230

Published on

Learn about how to design for the Android platform from the designer behind Airbnb and Simple's Android apps.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,230
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
40
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • Co-Founder & Creative Director of Two ToastersOver the past 4.5 years, designed iOS and Android applications for…Simple (Bank)AirbnbZumbaMTVLexusValencellRoom77GoTryItOnBCBSNC+ Just under a 2 dozen other mobile applicationsWorked in various capacities from defining the experience soup to nuts to taking on existing IP and reimagining it
  • Can only promise to give answers based on my experienceBut I’ll begin to start answering questions such as…Why designing idiomatically for Android (and really any platform) is very importantHow to actually begin designing idiomaticallyWhat are some things that should be avoided in designing for AndroidWhere do you begin as a designer
  • Can only promise to give answers based on my experienceBut I’ll begin to start answering questions such as…Why designing idiomatically for Android (and really any platform) is very importantHow to actually begin designing idiomaticallyWhat are some things that should be avoided in designing for AndroidWhere do you begin as a designer
  • The designers of these platforms have all interpreted actions in unique waysLike languages, platforms evolve from simple to complex interactionsThat complexity in interactions is where the differences will tend to ariseDesigners will interpret As a result, users begin to learn the idioms of a platform in the same way you learn to speak a languageYou start slow in figuring out the basic structure and casually, through repeated use, ideas become more engrained over timeLike nouns, sentence structure and colloquialisms; style, actions and layout become the identifiable characteristics of a platform
  • Think about these resolutions as MDPI being the equivalent of 1x on iPhone and XHDPI as being 2x. HDPI, then, in this case is like 1.5x.
  • Back – ReliableUp – Up in the stack in the phone (category example)
  • Equivalent to the navigation bar on iOSOr, in some ways, a header in web design
  • Transcript of "Designing For Android"

    1. 1. TWO TOASTERSANDROIDDESIGNING FOR4/26/2013
    2. 2. WHO ARE YOU?ADIT SHUKLACo-Founder & Creative Directorof Two ToastersAs design lead, he oversees productconceptualization, creative strategy sessions,and visual design. He has led Two Toastersdesign contribution on dozens of apps on bothiOS and Android, ranging from Airbnb andSimple, to Go Try It On and Lexus.
    3. 3. WORKED WITH…SMASHING!
    4. 4. BEGIN ANSWERINGWhy should I design natively for Android?How can I start designing idiomatically?What should I probably avoid?Where do I begin?DRROOOIIID
    5. 5. USERS SPEAK INANDROIDNot literally, of courseBut, if you don’t design with Android paradigms,you must either teach the user a new way ofinteracting or risk losing them entirely.IS THERE A ROSETTASTONE ADD ON FORTHAT?
    6. 6. Using elements from another platformis like forcing a toilet to flush in adifferent direction.THAT’S TOTALLY NOTIDIOMATIC!
    7. 7. LET’S START WITHBASICS TERMSLDPI, MDPI, HDPI and XHDPIBy far, XHDPI and HDPI are the most commonresolutions and LDPI is almost completelydeprecated.Ratio of screens: 3:4:6:8THAT’S KINDACOMPLICATED.
    8. 8. WHAT THE HECK?LET’S START WITHBASICS TERMSDensity Independent Pixels (DP)8 DP @ LDPI = 6 px8 DP @ MDPI = 8 px8 DP @ HDPI = 12 px8 DP @ XHDPI = 16 px
    9. 9. INTERESTING!LET’S START WITHBASICS TERMSBack Up• Always go to previousscreen• Can navigate tooutside the app• Always go higherwithin screenhierarchy• Can only navigateinside app
    10. 10. WHERE AM I?SOME BASICNAVIGATION• Action bar• Action bar - Tabs• Action bar – View Control• Drawer
    11. 11. THE ACTION BAROH YEAH, LET’S SEESOME ACTION.As defined by Android guidelines:The action bar is a dedicatedpiece of real estate at the topof each screen that isgenerally persistentthroughout the app.“
    12. 12. THE ACTION BARAH! SO THAT’S WHERE ITGOES.It is 48dp tallin portrait
    13. 13. THE ACTION BARThis is basically what itlooks likeOK, GOT IT!
    14. 14. THE ACTION BARCOOL, SO I GUESS I CANTAP ON IT?Usually theapplicationicon
    15. 15. THE ACTION BARMAKES A WHOLE LOTMORE SENSE.When in screens further downin navigation stack, the upcarat will typically be placedhere.
    16. 16. THE ACTION BARObviously, this is where yousee the screen title.It can also be great place forlogotype.CONTEXTUAL!
    17. 17. THE ACTION BARThese icons represent theactions the user is most likelygoing to require on this screenSO LIKE REFRESH,SEARCH..ETC?
    18. 18. THE ACTION BARAny action buttonsthat don’t fit onscreen get placedin overflow menuSWEET, I CAN ADD ABUNCH OF ACTIONS.
    19. 19. TAB NAVIGATIONSO TABS GO UP TOP?It’s also 48dptall in portrait
    20. 20. TAB NAVIGATIONTab bar styling is very simplified. Interestingly,when user switches to landscape or tablet, thetab bar gets incorporated into action bar.PRETTY SIMPLE.
    21. 21. TAB NAVIGATIONScrollable tab bars offer you more space, butobfuscates the total number of tabs. This is 32dptall.IT SLIDES!
    22. 22. VIEW CONTROLInstead of tabs ordrop downs, usethe view controlspinner to handlemodifications to theview belowLIGHTWEIGHT.
    23. 23. EASY PEEZY.SIDE DRAWERIt’s important tonote that mostside drawerlibraries onAndroid normallyrequire the actionbar
    24. 24. THINGS TO AVOID• Chevrons• Back Buttons• Text Action Icons• Rounded App IconsAH, THE BAD SIDE OFTOWN.
    25. 25. CHEVRONSThese are a very common designelement, but don’t belong in Android.List actions that require tappingbehavior should be obvious.YOU’RE KIDDING!
    26. 26. BACK BUTTONSRely on up and back behavior ratherthan designing back buttons. This is,very specifically, iOS elements.WE COVERED THIS?
    27. 27. TEXT ACTIONSButtons in the action bar should beicons. For save or done actions, usecontextual action bar. For nextbuttons, rely on bottom navigation.ICONS ARE HARD…
    28. 28. ROUNDED APPICONSAndroid gives you the ability touse transparent PNGs so you canshape icons in any format.I’M SO USED TOROUNDED SQUARES!
    29. 29. WHERE TO BEGIN• The Set Up• Style Guide• Fragmentation• Multiple Resolutions• Landscape• Tablet• Slicing for Multiple Resolutions• 9PatchingI’M READY!
    30. 30. THE SETUP• Personally…Photoshop• Use a single PSD and acombo of layer comps withsmart objects to keep app-wide easy• Designing at XHDPI (768x1280px)• 144DPI• Use Skala Preview• Use Invision for prototypingTAKING NOTES.
    31. 31. STYLE GUIDE• Simplify• Simplify• Simplify• Everyone’s going simpleGEEZ, WE GET IT…YOULIKE THINGS SIMPLE
    32. 32. TWEET TWEET.
    33. 33. A TO THE Z.
    34. 34. SPOT-IFY
    35. 35. MULTIPLERESOLUTIONSXHDPI25.9%HDPI38.5%MDPI23.4%THAT’S LIKE 88% OFUSERS COVERED?
    36. 36. MULTIPLERESOLUTIONS• No easy answer, other than to tryand design a fluid layout.• Use fewer textures and patterns• Use 9patches (stretchable assets)WHAT’S A 9PATCH?
    37. 37. LANDSCAPELAYOUTS• Absolutely necessary andexpected• Don’t just stretch elements, tryto see if a new layout emergesthat works better in landscapeDO I REALLY HAVE TOWORRY ABOUT IT?
    38. 38. TABLETS• Try to compound layouts forlarge tablets• For smaller tablets, you shouldbe fine scaling up your HDPI orXHDPI assets and keeping thedesign relatively the same• This is where planning forlandscape layouts pays offTHEY’RE KINDA POPULARRIGHT NOW…
    39. 39. SLICING FORMULTIPLERESOLUTIONS• A TutorialSWEET, TIME FORPHOTOSHOP!
    40. 40. 9PATCHINGSWEET DESIGN BRO.9patching lets you compress an elementlike this to stretch without artifacts.
    41. 41. 9PATCHINGOK?First, reduce the element down to as smallas you can get it with stretchable areas inmind.
    42. 42. 9PATCHINGFREE STUFF! NICE.Drop it into the 9patch utility (available forfree)
    43. 43. 9PATCHINGSAY THAT AGAIN?Draw outlines for portions of the elementthat you want stretchable.
    44. 44. 9PATCHINGTHAT MAKES SENSE…Right and bottomedge define thearea that’s“content.”Top and leftedge defineareas that arestretchable.
    45. 45. TO CONCLUDE…It’s important to consider the idiomaticapproach because it simplifies theinteractions you have to worry about.However, it’s not the end all be all. Becognizant of these idioms so you can pushthem further.DONE YET?
    46. 46. Q&A TIME OOO! PICK ME FIRST!
    47. 47. TWO TOASTERSThank You!
    1. A particular slide catching your eye?

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

    ×