Save time and frustration with the guide to a happy and productive relationship with your design team on a mobile project.

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

2. Who?
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.
Shameless plug by Royi Benyossef (+royiby).

3. My Motivation
Bi-design by Royi Benyossef

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

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

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

7. What do i want?
● “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”.
Bi-design by Royi Benyossef
Never again!

8. Motivation
Bi-design by Royi Benyossef

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

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

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

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

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

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

15. Actions
Bi-design by Royi Benyossef

16. Do your homework
Bi-design by Royi Benyossef

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

18. * app quality checklist.
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
Bi-design by Royi Benyossef

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

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

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

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

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

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

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

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

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

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

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

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

31. Design collaboration.
Bi-design by Royi Benyossef

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

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

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

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

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

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

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

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

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

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

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

43. Designers JIT.
Bi-design by Royi Benyossef

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

45. Designers JIT.
4. Customize Shadows:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
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.
Bi-design by Royi Benyossef

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

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

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

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

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

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

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

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

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.
Thank you for listening
by Royi Benyossef