• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing For Android
 

Designing For Android

on

  • 2,623 views

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

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

Statistics

Views

Total Views
2,623
Views on SlideShare
1,512
Embed Views
1,111

Actions

Likes
4
Downloads
21
Comments
0

2 Embeds 1,111

http://twotoasters.com 1072
http://xianminx.github.io 39

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Designing For Android Designing For Android Presentation Transcript

  • TWO TOASTERSANDROIDDESIGNING FOR4/26/2013
  • 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.
  • WORKED WITH…SMASHING!
  • BEGIN ANSWERINGWhy should I design natively for Android?How can I start designing idiomatically?What should I probably avoid?Where do I begin?DRROOOIIID
  • 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?
  • 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 almost completelydeprecated.Ratio of screens: 3:4:6:8THAT’S KINDACOMPLICATED.
  • 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
  • INTERESTING!LET’S START WITHBASICS TERMSBack Up• Always go to previousscreen• Can navigate tooutside the app• Always go higherwithin screenhierarchy• Can only navigateinside app
  • 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 estate at the topof each screen that isgenerally persistentthroughout the app.“
  • 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 placedhere.
  • 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,SEARCH..ETC?
  • 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 incorporated into action bar.PRETTY SIMPLE.
  • 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 should be obvious.YOU’RE KIDDING!
  • BACK BUTTONSRely on up and back behavior ratherthan designing back buttons. This is,very specifically, iOS elements.WE COVERED THIS?
  • 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…
  • ROUNDED APPICONSAndroid gives you the ability touse transparent PNGs so you canshape icons in any format.I’M SO USED TOROUNDED SQUARES!
  • WHERE TO BEGIN• The Set Up• Style Guide• Fragmentation• Multiple Resolutions• Landscape• Tablet• Slicing for Multiple Resolutions• 9PatchingI’M READY!
  • 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.
  • 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 9patches (stretchable assets)WHAT’S A 9PATCH?
  • 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?
  • 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…
  • 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 arestretchable.
  • 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?
  • Q&A TIME OOO! PICK ME FIRST!
  • TWO TOASTERSThank You!