Design and development: Best practices by example

With a poor feedback loop between design and development, it's easy to fall into the trap of low quality code with a lack of cohesion in the UI.

droidcon London 2016
https://skillsmatter.com/skillscasts/8777-design-and-development-best-practices-by-example

Transcript

1. Design and development Best practices by example Matt Dolan info@mattdolan.com
2. Android Technical Architect The world’s No.1 spread betting and CFD provider
4. Developing for Android since 2009 Android 1.6 Donut
5. 6 years of the IG Trading app for Android
9. 100 unique colours
10. Code conventions Pattern library Collaboration
11. Code conventions Pattern library Collaboration
12. Code conventions
13. Code conventions The what and the why Conventions about colours Conventions about styles
14. Code conventions The what and the why
15. – Sun Microsystems, Inc “Hardly any software is maintained for its whole life by the original author.”
16. Code Conventions for the Java Programming Language www.oracle.com/technetwork/java/index-135089.html
17. Code Style for Contributors https://source.android.com/source/code-style.html
18. –https://developer.android.com/guide/components/ fundamentals.html#Resources “An Android app is composed of more than just code—it requires resources that are separate from the source code”
19. Best practices in Android development https://github.com/futurice/android-best-practices
20. Code conventions Conventions about colours
21. An example colors.xml <?xml version="1.0" encoding="utf-8"?>
 <resources> 
 <color name=”grey_separator”>@color/cool_grey</color> <color name=”gray_list_divider”>#e3e3e0</color> <color name=”market_list_intermediate_gray”>@color/gray_list_divider</color> <color name=”button_grey_pressed”>#80555555</color> <color name=”background_grey”>#f5f5f5</color> <color name=”pale_grey”>#e2e4e1</color> <color name=”dark_grey”>#555555</color> <color name=”darker_grey”>#4f4f4f</color> <color name=”darker_than_light_grey”>#777777</color> <color name=”light_grey”>#b2b4b2</color> <color name=”light_dark_grey”>#ff666666</color> <color name=”pearl_grey”>#d9d8d9</color> <color name=”soft_grey”>#dfdfdf</color> <color name=”cool_grey”>#999999</color> <color name=”transparent_grey”>#cc000000</color> <color name=”transparent_black”>#c0000000</color> ...
22. grey_separator, gray_list_divider
23. Rule #1 Keep names consistent
24. button_grey, button_grey_pressed
25. Rule #2 Avoid naming by colour
26. market_list_intermediate_grey
27. Rule #3 Function over context
28. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <TextView
 android:id=“@+id/list_row_text”
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="18dp"
 android:textColor=“#555555” />
 
 </LinearLayout>
29. Rule #4 Don’t inline colours
30. The beginning of some rules… 1. Keep names consistent 2. Avoid naming by colour 3. Function over context 4. Don’t inline colours
31. signup_button or button_signup
32. signup_button email_signup_button or button_signup button_signup_email
33. Rule #5 Generic to specific
34. The beginning of some rules… 1. Keep names consistent 2. Avoid naming by colour 3. Function over context 4. Don’t inline colours 5. Generic to specific
35. A semantic colors.xml <?xml version="1.0" encoding="utf-8"?>
 <resources> 
 <color name=”text_primary”>#262629</color> <color name=”text_secondary”>#6C6C7A</color> <color name=”text_positive”>#3987CC</color> <color name=”text_negative”>#CC1818</color> <color name=”text_neutral”>#3BA43B</color> <color name=”marketStatus_open”>#3BA43B</color> <color name=”marketStatus_closed”>#CC1818</color> <color name=”marketStatus_onCall”>#F5AD1C</color> <color name=”marketStatus_editOnly”>#3987CC</color> <color name=”button_submit__background”>#3BA43B</color> <color name=”button_submit__foreground”>#FFF</color> <color name=”divider”>#E0E0E0</color> ...
36. Palette colours
37. darkestGrey, darkerGrey, darkGrey, … darkGrey3, darkGrey2, darkGrey1, …
38. Rule #6 Name palette by colour
39. Name palette by colour Compare to a list – and look for similarity: • Named Web Colors — http://en.wikipedia.org/wiki/ Web_colors • Crayola — http://en.wikipedia.org/wiki/ List_of_Crayola_crayon_colors • Ingrid’s Color Thesaurus — http:// ingridsnotes.wordpress.com/2014/02/04/the- color-thesaurus/
40. Name palette by colour Use a tool – these provide names based on hex values: • Name That Color — http://chir.ag/projects/name- that-color • Color Name & Hue — http://www.color- blindness.com/color-name-hue/
42. Name palette by colour Make it up • Make it meaningful – can you figure out where it is on a colour wheel?
43. A final colors.xml <?xml version="1.0" encoding="utf-8"?>
 <resources> 
 <color name=”text_primary”>@color/palette_charcoal</color> <color name=”text_secondary”>@color/palette_slate</color> <color name=”text_positive”>@color/palette_blue</color> <color name=”text_negative”>@color/palette_red</color> <color name=”text_neutral”>@color/palette_green</color> <color name=”marketStatus_open”>@color/palette_green</color> <color name=”marketStatus_closed”>@color/palette_red</color> <color name=”marketStatus_onCall”>@color/palette_yellow</color> <color name=”marketStatus_editOnly”>@color/palette_blue</color> <color name=”button_submit__background”>@color/palette_green</color> <color name=”button_submit__foreground”>@color/palette_white</color> <color name=”divider”>@color/palette_smoke</color> ...
44. Rule #7 Prefix the palette
45. Palette colours 1. Name by colour 2. Prefix the palette Rules for colours Semantic colours 1. Keep names consistent 2. Avoid naming by colour 3. Function over context 4. Don’t inline colours 5. Generic to specific
46. Code conventions Conventions about styles
47. Styles
48. Themes https://medium.com/google-developers/theming-with- appcompat-1a292b754b35
49. Rule #1 Avoid custom components (Use AppCompat)
50. Styling with AppCompat activity_layout.xml ... <Button
 android:id="@+id/submit"
 android:text="Place deal” />
51. Styling with AppCompat activity_layout.xml ... <Button
 android:id="@+id/submit"
 android:text="Place deal"
 android:theme="@style/ButtonSecondary"/> styles.xml <style name=“ButtonSecondary" parent="ThemeOverlay.AppCompat.Light">
 <item name=“colorAccent">@color/button_secondary</item>
 </style>
52. Rule #2 Prefix theme styles
53. An example style <style name=”StopView”> 
 <item name=”android:layout_width”>0dp</color> <item name=”android:layout_weight”>1</color> <item name=”android:layout_height”>wrap_content</color> <item name=”android:textSize”>@dimen/stopview_text_size</color> <item name=”android:textColor”>@color/secondary_text</color> </style>
54. Rule #3 Avoid layout_* attributes
55. 1. Avoid Custom Components (Use AppCompat) 2. Prefix theme styles 3. Avoid layout_* attributes Rules for styles
56. 1. Avoid Custom Components (Use AppCompat) 2. Prefix theme styles 3. Avoid layout_* attributes 4. Keep names consistent 5. Function over context 6. Generic to specific Rules for styles
57. Code conventions Pattern library Collaboration
58. Pattern library
59. Pattern library The what and the why Creating a pattern library Our pattern library
60. Pattern library The what and the why
62. – ui-patterns.com “patterns are recurring solutions that solve common design problems”
63. Consistency in user experience Reusability Maintainability
64. Pattern library Creating a pattern library
65. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
66. Material Design Guidelines https://material.google.com
67. Pattern library Our pattern library
68. Colour Palette CTA #9696A3 #E0E0E0 #EBEBEB #F5F5F5 #3987CC #CC1818 #3BA43B #2574B8 #6C6C7A #262629 #F5870A #64367A Chrome Core Text Misc. Primary Text Muted Text Action Colour TBC BUY Ac6on Colour Scndry CTA SELL IG Brand Dealing Primary CTA Lines/ Dividers/ Icons/ Chrome/ Tertiary CTAs
69. Colour Palette #9696A3 Grey #E0E0E0 Smoke #EBEBEB Cloud #F5F5F5 Bone #3987CC IG Blue #CC1818 IG Red #3BA43B IG Green #6C6C7A Slate #262629 Charcoal #64367A IG Purple #F5AD1C IG Yellow #FFFFFF White #333987CC Blue_20pct #33CC1818 Red_20pct
70. Typography Typography Font Colours H1 Header Regular 24sp Primary Charcoal Title Medium 20sp Secondary Slate Subheader Regular 16sp Interactive Blue Body 2 / Menu Medium 14sp Body 1 Regular 14sp Caption Regular 12sp BUTTON Medium 14sp
73. Collaboration
74. UX UI Dev
75. UX UI Dev
76. Common language
77. Code
78. Live Code
79. The Design Sprint http://www.gv.com/sprint/
81. –Matthew Dolan “We may not be perfect but we’re constantly trying to improve.”
82. #buildbetterapps