This document discusses strategies for improving collaboration between designers and developers when building Android apps. It recommends that developers and designers do their homework by learning Android design guidelines and quality checklists. Developers should mock up the UI and flows before coding to adjust expectations. The document also suggests connecting designers to the code repository and training them on layouts and resources. Developers should write code to make it easier for designers to make changes, like using feature toggles and meaningful resource names. The goal is to shorten feedback loops and allow everyone to contribute their strengths for a better product.

1. Bi-design
.(by Royi Benyossef (+royiby
devs & designers getting along

2. Who?
Shameless plug by Royi Benyossef (+royiby).
Royi benyossef.
● Android developer since 2008.
● GDG Herzeliya co-founder.
● Android speaker and lecturer.
● Android Mentor at CampusTLV.
● Android GDE 2013, 2014.
● Android group leader at Vidmind.

3. My Motivation
Bi-design by Royi Benyossef

4. What do i want?
Bi-design by Royi Benyossef
● “My designer doesn’t know
mobile/Android”.

5. What do i want?
Bi-design by Royi Benyossef
● “We’re trying to copy the iOS app on
Android”.

6. What do i want?
Bi-design by Royi Benyossef
● “Rebranding caused us to refactor a lot of
the code”.

7. What do i want?
Bi-design by Royi Benyossef
● “My designer doesn’t know
mobile/Android”.
● “We’re trying to copy the iOS app on
Android”.
● “Rebranding caused us to refactor a lot of
the code”.
Never again!

8. Motivation
Bi-design by Royi Benyossef

9. Motivation
Bi-design by Royi Benyossef
Less misunderstandings.

10. Motivation
Bi-design by Royi Benyossef
Less clashes and stress.

11. Motivation
Bi-design by Royi Benyossef
Less information gaps.

12. Motivation
Bi-design by Royi Benyossef
Less duplicate work.

13. Motivation
Bi-design by Royi Benyossef
More time for fun!

14. Motivation
Bi-design by Royi Benyossef
A successful app.

15. Actions
Bi-design by Royi Benyossef

16. Do your homework
Bi-design by Royi Benyossef

17. quality checklists.
Bi-design by Royi Benyossef
● Design & interaction.
● Func.
● Performance.
● Stability.
● Google Play.

18. * app quality checklist.
Bi-design by Royi Benyossef
https://developer.android.com/distribute/essentials/quality/core.html
https://developer.android.com/distribute/essentials/quality/tablets.html
https://developer.android.com/distribute/essentials/quality/wear.html
https://developer.android.com/distribute/essentials/quality/tv.html
https://developer.android.com/distribute/essentials/quality/auto.html

19. Design Guidelines.
Bi-design by Royi Benyossef
● vision.
● Style lang.
● Patterns.
● Navigation.
● Material design.
*https://developer.android.com/design/index.html

20. Design vision.
Bi-design by Royi Benyossef
● Enchant.
● Simplify.
● Amaze.

21. Design language.
Bi-design by Royi Benyossef
● Iconography.
● Typography.
● Color.
● branding.
● themes.

22. Asset studio.
Bi-design by Royi Benyossef
● generators:
○ Icons.
○ 9-patch.
○ Device art.
○ Action bar style.
○ Holo colors.
*http://romannurik.github.io/AndroidAssetStudio/index.html

23. Motivation - do your HW.
Bi-design by Royi Benyossef
What’s in it
for me?

24. Motivation - do your HW.
Bi-design by Royi Benyossef
Learn about tools, patterns and user
expectations together.

25. Motivation - do your HW.
Bi-design by Royi Benyossef
Eligibility to feature in Google Play!

26. Mock it up!
Bi-design by Royi Benyossef

27. MOCK UI & Flow
Bi-design by Royi Benyossef
● Android studio.
● Balsamiq.
● Fluid UI.

28. Mock nav. and animation
Bi-design by Royi Benyossef
● Framer js.
● Pixate.

29. Motivation to Mock it up!
Bi-design by Royi Benyossef
What’s in it
for me?

30. Motivation to Mock it up!
Bi-design by Royi Benyossef
● Adjust expectations.
● Plan before impl.
● try out multiple solutions.

31. Design collaboration.
Bi-design by Royi Benyossef

32. Step 1
Bi-design by Royi Benyossef
Connect designers to code.

33. Connect designers to code.
Bi-design by Royi Benyossef
1. Repo access and training.

34. Connect designers to code.
Bi-design by Royi Benyossef
2. layout and resources training.

35. Step 2
Bi-design by Royi Benyossef
Design code for designers.

36. Design code for designers.
Bi-design by Royi Benyossef
1. Feature toggles.

37. Design code for designers.
Bi-design by Royi Benyossef
2. .XML resources:
a. Meaningful names.
b. Logical places.

38. Design code for designers.
Bi-design by Royi Benyossef
● Old:
○ Layouts.
○ Strings.
○ Styles.
○ Themes.
○ Animations.

39. Design code for designers.
Bi-design by Royi Benyossef
● New:
○ Vector drawables.
○ Transition animations.
○ Curved motion.
○ View state changes

40. Step 3
Bi-design by Royi Benyossef
Use designers only when you need
them (Designers JIT).

41. Designers JIT.
Bi-design by Royi Benyossef
3. Use Tinted drawable resources.
?android:attr/colorPrimary

42. Designers JIT.
Bi-design by Royi Benyossef
4. Find dominant color dynamically
with Palette.
Palette.generateAsync(bitmap, new
Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {
// Do something with colors...
}
});

43. Designers JIT.
Bi-design by Royi Benyossef

44. Designers JIT.
Bi-design by Royi Benyossef
4. Use elevations:
View.setElevation()
View.setTranslationZ()
ViewPropertyAnimator.z()
ViewPropertyAnimator.translationZ()

45. Designers JIT.
Bi-design by Royi Benyossef
4. Customize Shadows:
To define a custom outline for a view in your code:
1. Extend the ViewOutlineProvider class.
2. Override the getOutline() method.
3. Assign the new outline provider to your view with the View.setOutlineProvider() method.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>

46. Step 4 - Alter workflow
Bi-design by Royi Benyossef
● Initial layout.
● Final touchups.
● Image replacements.
● Rebranding experiments.

47. Step 3 - Alter workflow
Bi-design by Royi Benyossef
● Initial layout.
● Final touchups.
● Image replacements.
● Rebranding experiments.

48. Design collaboration.
Bi-design by Royi Benyossef
What’s in
it for me?

49. Motiv. - Design collab.
Bi-design by Royi Benyossef
● Allows for everyone to do what
they do best.

50. Motiv. - Design collab.
Bi-design by Royi Benyossef
● Shortens feedback loops.

51. Motiv. - Design collab.
Bi-design by Royi Benyossef
● Easy changes and
experimentation.

52. Motiv. - Design collab.
Bi-design by Royi Benyossef
● Induces Comradery and
accountability.

53. Motiv. - Design collab.
Bi-design by Royi Benyossef
● Saves time.
● Saves Money.
● Happier work env.
● Better product.

54. ● Do your homework.
● Mock UP whatever you
can before coding.
● Inject designers into the
dev. process.
Key points
Hybrid apps - what, when and why?

55. “We Should Be Building Great Things.
Things That Don’t yet Exist”

56. I hope you liked it.
by Royi Benyossef
Thank you for listening