Your SlideShare is downloading. ×
Designing an Appfrom Idea to Market  PRESENTATION        ANDEVCON • MAY 14, 2012
A LITTLE ABOUT USJuan Sanchez                        Tony HillersonDesigner & Partner                  Software Architect ...
WHO ARE YOU?•   Developer•   Designer•   Entrepreneur•   Etc.PRESENTATION       tackmobile.com
WHAT ARE WE TALKING ABOUT?•   Defining User Goals•   Design Concepts•   Translating Pixels•   Development Tactics•   Measu...
EXERCISE 1               Design an App               for AnDevConPRESENTATION                   tackmobile.com
THE FEATURES•   Chat•   Take Pictures    Edit Profile                    GO!••   View Schedule•   See a Map•   Check Weath...
Who wants to share?PRESENTATION                         tackmobile.com
A successful app is               more than a list of               features.PRESENTATION                     ANDEVCON • M...
Building an app is a               process.PRESENTATION                          tackmobile.com
THE ODDS ARE AGAINST YOU•   Timeline•   Budget•   Scope•   ResourcesPRESENTATION               tackmobile.com
68% of IT projects fail.PRESENTATION                          tackmobile.com
You can succeed but it’s               a series of successes.PRESENTATION                        tackmobile.com
IT’S A PROCESS                                DEFINITION               DISCOVERY                           DESIGN         ...
IT HAPPENS IN CYCLESPRESENTATION           tackmobile.com
A lot happens before               code is written and               pixels are pushed.PRESENTATION                    AND...
THERE’S SO MUCH TO LEARN•   who are your users?•   a current app?•   an existing brand?•   IT infrastructure already in pl...
WHAT ARE THE OBJECTIVES?•   increased business?•   increased brand awareness?•   increased users?•   increased user engage...
Ask questions.PRESENTATION                    tackmobile.com
WHO ARE YOUR USERS?                      images © Jason TravisPRESENTATION                tackmobile.com
KNOW YOUR USER•   what’s their digital ecology?•   what’s the demographic?•   what are they trying to accomplish?•   how c...
Referred to as               personas.PRESENTATION                    tackmobile.com
EXERCISE 2               Let’s create a               persona.PRESENTATION                    tackmobile.com
QUESTIONS: AS A CONFERENCE GOER•   what is the age range?•   what do you do?•   what devices do you use?•   how many event...
OUR PERSONA IS....               Hilly Tonnerson               •   Male, 19 - 45 years old               •   mobile develo...
Your persona(s) should               be present throughout               the process.PRESENTATION                       ta...
Defining what to build               is the hardest part.PRESENTATION                     ANDEVCON • MAY 14, 2012
http://www.gogamestorm.com/FIGURING IT OUT•   definition exercises•   proofs of concept•   user interviews•   sketching•  ...
FIGURING IT OUTvia http://www.gogamestorm.com/?p=855   picture taken by Dave Gray http://www.davegrayinfo.com/       PRESE...
This process isn’t               meant to be pretty.PRESENTATION                         tackmobile.com
EXERCISE 3               Define user goals               and featuresPRESENTATION                       tackmobile.com
QUESTIONS: USER GOALS•   what do you want to leave with?•   what do you like about conferences?•   what environment are yo...
Answers will help               define the “what”.PRESENTATION                        tackmobile.com
SOME OF OUR GOALS ARE...•   we’re here to present•   we want presenting to be easier•   we want to share information•   wa...
Based on the “what”,               define the “how”.PRESENTATION                      tackmobile.com
OUR FEATURES•   a presenter’s assistant app•   control the presentation•   people can ask questions•   people can raise th...
Interaction DesignPRESENTATION                        ANDEVCON • MAY 14, 2012
Design is how it works.               Steve JobsPRESENTATION                        tackmobile.com
This is just stupid.               A UserPRESENTATION                          tackmobile.com
Why? What can we do               to make it better?PRESENTATION                     tackmobile.com
DON NORMAN’S DESIGN VOCABULARY•   Visibility•   Affordances•   Feedback•   Mapping•   Constraint•   ConsistencyPRESENTATIO...
NATURAL DESIGN               Use what people know from their environment.PRESENTATION                                     ...
NATURAL DESIGNPRESENTATION     tackmobile.com
NATURAL DESIGN               http://www.subtraction.com/2011/03/28/an-illustration-for-stack-americaPRESENTATION          ...
NATURAL DESIGNPRESENTATION     tackmobile.com
Natural Design ≠               SkeumorphismPRESENTATION                      tackmobile.com
It doesn’t have to have               to look like something               that already exists.PRESENTATION               ...
UNIVERSAL PRINCIPLES•   Physics•   Gravity•   Friction•   Constraints•   SpacePRESENTATION           tackmobile.com
CONCEPTUAL MODEL               The “model” a user of a system builds to reason about a systemPRESENTATION                 ...
CONCEPTUAL MODEL•   The user sees the interface, and that    leads them to reason about the    system behind it.•   The in...
CONCEPTUAL MODEL               •   Hm, that looks like a                   brush stroke               •   I can change the...
VISIBILITY               Cues between the design of an object and its operationPRESENTATION                               ...
VISIBILITYPRESENTATION   tackmobile.com
VISIBILITYPRESENTATION   tackmobile.com
VISIBILITYPRESENTATION   tackmobile.com
AFFORDANCE               Perception that something can be interacted withPRESENTATION                                     ...
AFFORDANCEPRESENTATION   tackmobile.com
AFFORDANCEPRESENTATION   tackmobile.com
AFFORDANCEPRESENTATION   tackmobile.com
FEEDBACK               The effect of user actions should be obviousPRESENTATION                                           ...
FEEDBACKPRESENTATION   tackmobile.com
FEEDBACKPRESENTATION   tackmobile.com
MAPPING               A relation between intentions and possible actions and between               actions and their effec...
MAPPINGPRESENTATION   tackmobile.com
MAPPING               •   I can find my friends               •   Oh look, pictures I                   can slide         ...
CONSTRAINTS               Preventing errors before they can occurPRESENTATION                                             ...
CONSTRAINTSPRESENTATION   tackmobile.com
CONSISTENCY               The way visual objects are usedPRESENTATION                                     tackmobile.com
CONSISTENCYPRESENTATION   tackmobile.com
How does this apply               to mobile?PRESENTATION                         tackmobile.com
KNOW THE DEVICE•   dimensions•   orientation•   sensors•   inputs•   etc.PRESENTATION      tackmobile.com
KNOW THE PLATFORM•   this is not iOS•   this is not WP7•   this is not WebOS•   etc.PRESENTATION            tackmobile.com
STAY TRUE TO ANDROID                       concept by Guenther BeyerPRESENTATION                     tackmobile.com
MAKE IT FAST•   performance•   the illusion of fast•   optimizePRESENTATION               tackmobile.com
UPLOADING A PICTURE    Instagram dudes               https://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-d...
EMBRACE TOUCH•   people are using fingers,    not cursors•   content as interface•   multi-touch and gestures•   physical ...
A RULE OF THUMB•   44pt for touch•   30pt minimum•   Small items should still    have decent hit areasPRESENTATION        ...
GIVE EACH SCREEN A PURPOSE•   what’s most important?•   learn to eliminate•   content vs. controls•   smaller doesn’t mean...
ANIMATION & TRANSITIONS•   the illusion of faster•   just-in-time content•   progressive disclosure•   depth and space•   ...
A lot of work has               already been done.PRESENTATION                        tackmobile.com
ESTABLISHED PATTERNSPRESENTATION           tackmobile.com
ANDROID GUIDELINES               http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.htmlPRESE...
ANDROID DESIGN               http://developer.android.com/design/PRESENTATION                                          tac...
maisdcharlottes.blogspot.comCONTEXT•   what’s the environment?•   what’s the weather?•   what time is it?•   what’s the de...
WORKING WITH CONTENT•   use real content•   try avoiding lorem ipsum•   know what you really have    to work withPRESENTAT...
DON’T FORGET TO PLAY•   interface origami•   video games•   real world examples•   bend the rules•   swing by Best Buy•   ...
Details, details, details.PRESENTATION                          tackmobile.com
IT’S IN THE DETAILSPRESENTATION          tackmobile.com
Android can be               beautiful.PRESENTATION                    tackmobile.com
EXERCISE 4               Design an app for               AnDevCon.PRESENTATION                       tackmobile.com
DESCRIBE A FLOW•   focus on a task•   what are the screens?•   what’s the flow?•   where can the user go?PRESENTATION     ...
MAP IT OUTPRESENTATION   tackmobile.com
SKETCH OUT YOUR IDEAS•   pick one screen and sketch it out•   or, do multiple and describe how    a user accomplishes a ta...
THE FEATURES REVISITED•   a presenter’s assistant app•   control the presentation•   people can ask questions•   people ca...
HERE’S OURS•   slides on top•   view notes•   view questions•   share information•   time checkPRESENTATION            tac...
Now what?PRESENTATION               tackmobile.com
WIREFRAMES•   content•   structure•   interactions•   flowPRESENTATION       tackmobile.com
VISUAL DESIGN•   branding     •   layout•   color        •   hierarchy•   typography   •   spacing•   animation    •   aff...
MORE RESEARCH•   get feedback through iterations•   test assumptions•   doesn’t have to be for the entire app•   test spec...
HOW MANY PEOPLE TO ASK?PRESENTATION              tackmobile.com
WHO TO INTERVIEW?                    images © Jason TravisPRESENTATION              tackmobile.com
IT’S EASIER THAN YOU THINKPRESENTATION                 tackmobile.com
YOU DON’T NEED A FINISHED APPimage via A List Apart article by Shawn Medero      PRESENTATION                             ...
ANALYZE YOUR RESULTS•   content•   structure•   interactions•   flowPRESENTATION           tackmobile.com
EXERCISE 5               Get feedback on               your sketches.PRESENTATION                     tackmobile.com
WHAT WE HEARD•   how can I see all the slides?•   how do I switch slides?•   the icons don’t make sense•   how do I know w...
Who wants to share?PRESENTATION                         tackmobile.com
DevelopmentPRESENTATION                 ANDEVCON • MAY 14, 2012
You know what to               build, but how?PRESENTATION                      tackmobile.com
OUR DESIGNPRESENTATION   tackmobile.com
TRANSLATING PIXELS•   what’s the source? Photoshop?•   what is vector, what is bitmap?•   can you use out-of-the-box    co...
9 PATCH VS. XMLPRESENTATION      tackmobile.com
DRAWING               BUTTONPRESENTATION            tackmobile.com
CODE<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>	...
CODE  ...  <item android:top="2px">	 	 <shape android:shape="rectangle">	 	 	 <stroke android:color="@color/color_primary_...
CODE  ...	 <item android:top="1px" android:bottom="1px">	 	 <shape android:shape="rectangle">	 	      <gradient	 	        ...
It’s a multi-screen               world.PRESENTATION                         tackmobile.com
WHAT TO TARGET               http://developer.android.com/resources/dashboard/platform-versions.htmlPRESENTATION          ...
Unified code base for               all devices.PRESENTATION                       tackmobile.com
COMPATIBILITY LIBRARY + EXTENSIONSPRESENTATION                   tackmobile.com
PHONE LAYOUT <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/ androi...
TABLET LAYOUT <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/ res/andr...
CODE /** This is a callback that the list fragment (Fragment A) calls     when a list item is selected */ public void onIt...
RESOURCES res/layout/main_activity.xml # For phones res/layout-sw600dp/main_activity.xml # 7” tablets res/layout-sw720dp/m...
SEE HOW GOOGLE DOES IT•   RTFS•   source.android.com•   androiddrawableexplorer.appspot.comPRESENTATION                   ...
DRAWABLE EXPLORER               androiddrawableexplorer.appspot.comPRESENTATION                                         ta...
GO SEE JOSHUAAdvanced Design Implementation• Tuesday• 4:00 pm - 5:15 pm• Joshua JamisonPRESENTATION                     ta...
It’s a lot, we know.PRESENTATION                          ANDEVCON • MAY 14, 2012
Questions?PRESENTATION                tackmobile.com
Thanks!@juansanchez@thillerson@tackmobiletackmobile.com
Upcoming SlideShare
Loading in...5
×

Designing an Android App from Idea to Market

1,061

Published on

Originally presented by Juan Sanchez and Tony Hillerson at AnDevCon III.

Published in: Technology

Transcript of "Designing an Android App from Idea to Market"

  1. 1. Designing an Appfrom Idea to Market PRESENTATION ANDEVCON • MAY 14, 2012
  2. 2. A LITTLE ABOUT USJuan Sanchez Tony HillersonDesigner & Partner Software Architect & Partner Mobile design and development company based in Denver, CO.• Creating Visual Experiences • Flex on Rails• Co-creator of FieldTest • Co-creator of FieldTest @tackmobile• Senior Editor for UX Magazine • O’Reilly Screencasts tackmobile.com@juansanchez @thillersonjuan@tackmobile.com tony@tackmobile.comPRESENTATION tackmobile.com
  3. 3. WHO ARE YOU?• Developer• Designer• Entrepreneur• Etc.PRESENTATION tackmobile.com
  4. 4. WHAT ARE WE TALKING ABOUT?• Defining User Goals• Design Concepts• Translating Pixels• Development Tactics• Measurement & FeedbackWe’ll be doing group exercises.PRESENTATION tackmobile.com
  5. 5. EXERCISE 1 Design an App for AnDevConPRESENTATION tackmobile.com
  6. 6. THE FEATURES• Chat• Take Pictures Edit Profile GO!•• View Schedule• See a Map• Check Weather• Scan QR Code• Watch Video• Review SlidesPRESENTATION tackmobile.com
  7. 7. Who wants to share?PRESENTATION tackmobile.com
  8. 8. A successful app is more than a list of features.PRESENTATION ANDEVCON • MAY 14, 2012
  9. 9. Building an app is a process.PRESENTATION tackmobile.com
  10. 10. THE ODDS ARE AGAINST YOU• Timeline• Budget• Scope• ResourcesPRESENTATION tackmobile.com
  11. 11. 68% of IT projects fail.PRESENTATION tackmobile.com
  12. 12. You can succeed but it’s a series of successes.PRESENTATION tackmobile.com
  13. 13. IT’S A PROCESS DEFINITION DISCOVERY DESIGN DEPLOY DEVELOPMENTPRESENTATION tackmobile.com
  14. 14. IT HAPPENS IN CYCLESPRESENTATION tackmobile.com
  15. 15. A lot happens before code is written and pixels are pushed.PRESENTATION ANDEVCON • MAY 14, 2012
  16. 16. THERE’S SO MUCH TO LEARN• who are your users?• a current app?• an existing brand?• IT infrastructure already in place?• 20 stakeholders?• established content?PRESENTATION tackmobile.com
  17. 17. WHAT ARE THE OBJECTIVES?• increased business?• increased brand awareness?• increased users?• increased user engagement?PRESENTATION tackmobile.com
  18. 18. Ask questions.PRESENTATION tackmobile.com
  19. 19. WHO ARE YOUR USERS? images © Jason TravisPRESENTATION tackmobile.com
  20. 20. KNOW YOUR USER• what’s their digital ecology?• what’s the demographic?• what are they trying to accomplish?• how can you make that easier?• where do you fit in?PRESENTATION tackmobile.com
  21. 21. Referred to as personas.PRESENTATION tackmobile.com
  22. 22. EXERCISE 2 Let’s create a persona.PRESENTATION tackmobile.com
  23. 23. QUESTIONS: AS A CONFERENCE GOER• what is the age range?• what do you do?• what devices do you use?• how many events do you go to?• are you here with a group?PRESENTATION tackmobile.com
  24. 24. OUR PERSONA IS.... Hilly Tonnerson • Male, 19 - 45 years old • mobile developer • presenting on Android topics • relies on his Nexus SPRESENTATION tackmobile.com
  25. 25. Your persona(s) should be present throughout the process.PRESENTATION tackmobile.com
  26. 26. Defining what to build is the hardest part.PRESENTATION ANDEVCON • MAY 14, 2012
  27. 27. http://www.gogamestorm.com/FIGURING IT OUT• definition exercises• proofs of concept• user interviews• sketching• prototyping• wireframesPRESENTATION tackmobile.com
  28. 28. FIGURING IT OUTvia http://www.gogamestorm.com/?p=855 picture taken by Dave Gray http://www.davegrayinfo.com/ PRESENTATION tackmobile.com
  29. 29. This process isn’t meant to be pretty.PRESENTATION tackmobile.com
  30. 30. EXERCISE 3 Define user goals and featuresPRESENTATION tackmobile.com
  31. 31. QUESTIONS: USER GOALS• what do you want to leave with?• what do you like about conferences?• what environment are you in?• what bothers you about conferences?• what’s your day at a conference like?PRESENTATION tackmobile.com
  32. 32. Answers will help define the “what”.PRESENTATION tackmobile.com
  33. 33. SOME OF OUR GOALS ARE...• we’re here to present• we want presenting to be easier• we want to share information• want to know our audience• we want to be able to interact with attendees without disruptionPRESENTATION tackmobile.com
  34. 34. Based on the “what”, define the “how”.PRESENTATION tackmobile.com
  35. 35. OUR FEATURES• a presenter’s assistant app• control the presentation• people can ask questions• people can raise their hand• vibrates when there’s a questionsPRESENTATION tackmobile.com
  36. 36. Interaction DesignPRESENTATION ANDEVCON • MAY 14, 2012
  37. 37. Design is how it works. Steve JobsPRESENTATION tackmobile.com
  38. 38. This is just stupid. A UserPRESENTATION tackmobile.com
  39. 39. Why? What can we do to make it better?PRESENTATION tackmobile.com
  40. 40. DON NORMAN’S DESIGN VOCABULARY• Visibility• Affordances• Feedback• Mapping• Constraint• ConsistencyPRESENTATION tackmobile.com
  41. 41. NATURAL DESIGN Use what people know from their environment.PRESENTATION tackmobile.com
  42. 42. NATURAL DESIGNPRESENTATION tackmobile.com
  43. 43. NATURAL DESIGN http://www.subtraction.com/2011/03/28/an-illustration-for-stack-americaPRESENTATION tackmobile.com
  44. 44. NATURAL DESIGNPRESENTATION tackmobile.com
  45. 45. Natural Design ≠ SkeumorphismPRESENTATION tackmobile.com
  46. 46. It doesn’t have to have to look like something that already exists.PRESENTATION tackmobile.com
  47. 47. UNIVERSAL PRINCIPLES• Physics• Gravity• Friction• Constraints• SpacePRESENTATION tackmobile.com
  48. 48. CONCEPTUAL MODEL The “model” a user of a system builds to reason about a systemPRESENTATION tackmobile.com
  49. 49. CONCEPTUAL MODEL• The user sees the interface, and that leads them to reason about the system behind it.• The interface can simplify the actual systemPRESENTATION tackmobile.com
  50. 50. CONCEPTUAL MODEL • Hm, that looks like a brush stroke • I can change the brush size • I can change the texture of the brush • Wow, this preview updates. Snap! Gosh I love technologyPRESENTATION tackmobile.com
  51. 51. VISIBILITY Cues between the design of an object and its operationPRESENTATION tackmobile.com
  52. 52. VISIBILITYPRESENTATION tackmobile.com
  53. 53. VISIBILITYPRESENTATION tackmobile.com
  54. 54. VISIBILITYPRESENTATION tackmobile.com
  55. 55. AFFORDANCE Perception that something can be interacted withPRESENTATION tackmobile.com
  56. 56. AFFORDANCEPRESENTATION tackmobile.com
  57. 57. AFFORDANCEPRESENTATION tackmobile.com
  58. 58. AFFORDANCEPRESENTATION tackmobile.com
  59. 59. FEEDBACK The effect of user actions should be obviousPRESENTATION tackmobile.com
  60. 60. FEEDBACKPRESENTATION tackmobile.com
  61. 61. FEEDBACKPRESENTATION tackmobile.com
  62. 62. MAPPING A relation between intentions and possible actions and between actions and their effect on a system or devicePRESENTATION tackmobile.com
  63. 63. MAPPINGPRESENTATION tackmobile.com
  64. 64. MAPPING • I can find my friends • Oh look, pictures I can slide • I wonder if I have notificationsPRESENTATION tackmobile.com
  65. 65. CONSTRAINTS Preventing errors before they can occurPRESENTATION tackmobile.com
  66. 66. CONSTRAINTSPRESENTATION tackmobile.com
  67. 67. CONSISTENCY The way visual objects are usedPRESENTATION tackmobile.com
  68. 68. CONSISTENCYPRESENTATION tackmobile.com
  69. 69. How does this apply to mobile?PRESENTATION tackmobile.com
  70. 70. KNOW THE DEVICE• dimensions• orientation• sensors• inputs• etc.PRESENTATION tackmobile.com
  71. 71. KNOW THE PLATFORM• this is not iOS• this is not WP7• this is not WebOS• etc.PRESENTATION tackmobile.com
  72. 72. STAY TRUE TO ANDROID concept by Guenther BeyerPRESENTATION tackmobile.com
  73. 73. MAKE IT FAST• performance• the illusion of fast• optimizePRESENTATION tackmobile.com
  74. 74. UPLOADING A PICTURE Instagram dudes https://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-designPRESENTATION tackmobile.com
  75. 75. EMBRACE TOUCH• people are using fingers, not cursors• content as interface• multi-touch and gestures• physical metaphorsPRESENTATION tackmobile.com
  76. 76. A RULE OF THUMB• 44pt for touch• 30pt minimum• Small items should still have decent hit areasPRESENTATION tackmobile.com
  77. 77. GIVE EACH SCREEN A PURPOSE• what’s most important?• learn to eliminate• content vs. controls• smaller doesn’t mean it should do lessPRESENTATION tackmobile.com
  78. 78. ANIMATION & TRANSITIONS• the illusion of faster• just-in-time content• progressive disclosure• depth and space• guidancePRESENTATION tackmobile.com
  79. 79. A lot of work has already been done.PRESENTATION tackmobile.com
  80. 80. ESTABLISHED PATTERNSPRESENTATION tackmobile.com
  81. 81. ANDROID GUIDELINES http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.htmlPRESENTATION tackmobile.com
  82. 82. ANDROID DESIGN http://developer.android.com/design/PRESENTATION tackmobile.com
  83. 83. maisdcharlottes.blogspot.comCONTEXT• what’s the environment?• what’s the weather?• what time is it?• what’s the device environment?• what are the usage patterns?PRESENTATION tackmobile.com
  84. 84. WORKING WITH CONTENT• use real content• try avoiding lorem ipsum• know what you really have to work withPRESENTATION tackmobile.com
  85. 85. DON’T FORGET TO PLAY• interface origami• video games• real world examples• bend the rules• swing by Best Buy• this is just the beginningPRESENTATION tackmobile.com
  86. 86. Details, details, details.PRESENTATION tackmobile.com
  87. 87. IT’S IN THE DETAILSPRESENTATION tackmobile.com
  88. 88. Android can be beautiful.PRESENTATION tackmobile.com
  89. 89. EXERCISE 4 Design an app for AnDevCon.PRESENTATION tackmobile.com
  90. 90. DESCRIBE A FLOW• focus on a task• what are the screens?• what’s the flow?• where can the user go?PRESENTATION tackmobile.com
  91. 91. MAP IT OUTPRESENTATION tackmobile.com
  92. 92. SKETCH OUT YOUR IDEAS• pick one screen and sketch it out• or, do multiple and describe how a user accomplishes a taskPRESENTATION tackmobile.com
  93. 93. THE FEATURES REVISITED• a presenter’s assistant app• control the presentation• people can ask questions• people can raise their hand• vibrates when there’s a questions• control information being pushed to the webPRESENTATION tackmobile.com
  94. 94. HERE’S OURS• slides on top• view notes• view questions• share information• time checkPRESENTATION tackmobile.com
  95. 95. Now what?PRESENTATION tackmobile.com
  96. 96. WIREFRAMES• content• structure• interactions• flowPRESENTATION tackmobile.com
  97. 97. VISUAL DESIGN• branding • layout• color • hierarchy• typography • spacing• animation • affordancePRESENTATION tackmobile.com
  98. 98. MORE RESEARCH• get feedback through iterations• test assumptions• doesn’t have to be for the entire app• test specific things• early and oftenPRESENTATION tackmobile.com
  99. 99. HOW MANY PEOPLE TO ASK?PRESENTATION tackmobile.com
  100. 100. WHO TO INTERVIEW? images © Jason TravisPRESENTATION tackmobile.com
  101. 101. IT’S EASIER THAN YOU THINKPRESENTATION tackmobile.com
  102. 102. YOU DON’T NEED A FINISHED APPimage via A List Apart article by Shawn Medero PRESENTATION tackmobile.com
  103. 103. ANALYZE YOUR RESULTS• content• structure• interactions• flowPRESENTATION tackmobile.com
  104. 104. EXERCISE 5 Get feedback on your sketches.PRESENTATION tackmobile.com
  105. 105. WHAT WE HEARD• how can I see all the slides?• how do I switch slides?• the icons don’t make sense• how do I know what slide I’m on?• I think this would be useful• I think this would be distractingPRESENTATION tackmobile.com
  106. 106. Who wants to share?PRESENTATION tackmobile.com
  107. 107. DevelopmentPRESENTATION ANDEVCON • MAY 14, 2012
  108. 108. You know what to build, but how?PRESENTATION tackmobile.com
  109. 109. OUR DESIGNPRESENTATION tackmobile.com
  110. 110. TRANSLATING PIXELS• what’s the source? Photoshop?• what is vector, what is bitmap?• can you use out-of-the-box components?PRESENTATION tackmobile.com
  111. 111. 9 PATCH VS. XMLPRESENTATION tackmobile.com
  112. 112. DRAWING BUTTONPRESENTATION tackmobile.com
  113. 113. CODE<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <stroke android:color="@color/color_primary_light_stripe" android:width="1px" /> <solid android:color="@android:color/transparent" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item>...PRESENTATION tackmobile.com
  114. 114. CODE ... <item android:top="2px"> <shape android:shape="rectangle"> <stroke android:color="@color/color_primary_dark_stripe"android:width="1px" /> <solid android:color="@android:color/transparent" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item>... PRESENTATION tackmobile.com
  115. 115. CODE ... <item android:top="1px" android:bottom="1px"> <shape android:shape="rectangle"> <gradient android:angle="270" android:startColor="@color/button_color_top" android:centerColor="@color/button_color_middle" android:endColor="@color/button_color_bottom" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item></layer-list> PRESENTATION tackmobile.com
  116. 116. It’s a multi-screen world.PRESENTATION tackmobile.com
  117. 117. WHAT TO TARGET http://developer.android.com/resources/dashboard/platform-versions.htmlPRESENTATION tackmobile.com
  118. 118. Unified code base for all devices.PRESENTATION tackmobile.com
  119. 119. COMPATIBILITY LIBRARY + EXTENSIONSPRESENTATION tackmobile.com
  120. 120. PHONE LAYOUT <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/ android"     android:layout_width="match_parent"     android:layout_height="match_parent">     <fragment class="com.example.android.TitlesFragment"               android:id="@+id/list_frag"               android:layout_width="match_parent"               android:layout_height="match_parent"/> </FrameLayout>PRESENTATION tackmobile.com
  121. 121. TABLET LAYOUT <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/ res/android"   android:orientation="horizontal"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:id="@+id/frags">   <fragment class="com.example.android.TitlesFragment"             android:id="@+id/list_frag"             android:layout_width="@dimen/titles_size"             android:layout_height="match_parent"/>   <fragment class="com.example.android.DetailsFragment"             android:id="@+id/details_frag"             android:layout_width="match_parent"             android:layout_height="match_parent" /> </LinearLayout>PRESENTATION tackmobile.com
  122. 122. CODE /** This is a callback that the list fragment (Fragment A) calls     when a list item is selected */ public void onItemSelected(int position) {   DisplayFragment fragB = (DisplayFragment) getFragmentManager()                               .findFragmentById(R.id.display_frag);   if (fragB == null) {       // DisplayFragment (Fragment B) is not in the layout,       // start DisplayActivity (Activity B)       // and pass it the info about the selected item       Intent intent = new Intent(this, DisplayActivity.class);       intent.putExtra("position", position);       startActivity(intent);   } else {       // DisplayFragment (Fragment B) is in the layout, tell it to update       fragB.updateContent(position);   } }PRESENTATION tackmobile.com
  123. 123. RESOURCES res/layout/main_activity.xml # For phones res/layout-sw600dp/main_activity.xml # 7” tablets res/layout-sw720dp/main_activity.xml # 10” tablets http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.htmlPRESENTATION tackmobile.com
  124. 124. SEE HOW GOOGLE DOES IT• RTFS• source.android.com• androiddrawableexplorer.appspot.comPRESENTATION tackmobile.com
  125. 125. DRAWABLE EXPLORER androiddrawableexplorer.appspot.comPRESENTATION tackmobile.com
  126. 126. GO SEE JOSHUAAdvanced Design Implementation• Tuesday• 4:00 pm - 5:15 pm• Joshua JamisonPRESENTATION tackmobile.com
  127. 127. It’s a lot, we know.PRESENTATION ANDEVCON • MAY 14, 2012
  128. 128. Questions?PRESENTATION tackmobile.com
  129. 129. Thanks!@juansanchez@thillerson@tackmobiletackmobile.com

×