Bi design

Bi-design

.(by Royi Benyossef (+royiby

devs & designers getting along

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.

My Motivation

Bi-design by Royi Benyossef

What do i want?


● “My designer doesn’t know

mobile/Android”.

What do i want?


● “We’re trying to copy the iOS app on

Android”.

What do i want?


● “Rebranding caused us to refactor a lot of

the code”.

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”.

Never again!

Motivation


Motivation


Less misunderstandings.

Motivation


Less clashes and stress.

Motivation


Less information gaps.

Motivation


Less duplicate work.

Motivation


More time for fun!

Motivation


A successful app.

Actions


Do your homework


quality checklists.


● Design & interaction.

● Func.

● Performance.

● Stability.

● Google Play.

* 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




https://developer.android.com/distribute/essentials/quality/tv.html

Design Guidelines.


● vision.

● Style lang.

● Patterns.

● Navigation.

● Material design.

*https://developer.android.com/design/index.html

Design vision.


● Enchant.

● Simplify.

● Amaze.

Design language.


● Iconography.

● Typography.

● Color.

● branding.

● themes.

Asset studio.


● generators:

○ Icons.

○ 9-patch.

○ Device art.

○ Action bar style.

○ Holo colors.

*http://romannurik.github.io/AndroidAssetStudio/index.html

Motivation - do your HW.


What’s in it

for me?



Learn about tools, patterns and user

expectations together.



Eligibility to feature in Google Play!

Mock it up!


MOCK UI & Flow


● Android studio.

● Balsamiq.

● Fluid UI.

Mock nav. and animation


● Framer js.

● Pixate.

Motivation to Mock it up!


What’s in it

for me?

Motivation to Mock it up!


● Adjust expectations.

● Plan before impl.

● try out multiple solutions.

Design collaboration.


Step 1


Connect designers to code.



1. Repo access and training.



2. layout and resources training.

Step 2


Design code for designers.



1. Feature toggles.



2. .XML resources:

a. Meaningful names.

b. Logical places.



● Old:

○ Layouts.

○ Strings.

○ Styles.

○ Themes.

○ Animations.



● New:

○ Vector drawables.

○ Transition animations.

○ Curved motion.

○ View state changes

Step 3


Use designers only when you need

them (Designers JIT).

Designers JIT.


3. Use Tinted drawable resources.

?android:attr/colorPrimary

Designers JIT.


4. Find dominant color dynamically

with Palette.

Palette.generateAsync(bitmap, new

Palette.PaletteAsyncListener() {

public void onGenerated(Palette palette) {

// Do something with colors...

}

});

Designers JIT.


Designers JIT.


4. Use elevations:

View.setElevation()

View.setTranslationZ()

ViewPropertyAnimator.z()

ViewPropertyAnimator.translationZ()

http://developer.android.com/reference/android/view/View.htmlsetElevation(float)

http://developer.android.com/reference/android/view/View.htmlsetTranslationZ(float)

http://developer.android.com/reference/android/view/ViewPropertyAnimator.htmlz(float)

http://developer.android.com/reference/android/view/ViewPropertyAnimator.htmltranslationZ(float)

Designers JIT.


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>

https://developer.android.com/reference/android/view/ViewOutlineProvider.html

https://developer.android.com/reference/android/view/ViewOutlineProvider.htmlgetOutline(android.view.View, android.graphics.Outline)

https://developer.android.com/reference/android/view/View.htmlsetOutlineProvider(android.view.ViewOutlineProvider)

Step 4 - Alter workflow


● Initial layout.

● Final touchups.

● Image replacements.

● Rebranding experiments.

Step 3 - Alter workflow


● Initial layout.

● Final touchups.

● Image replacements.

● Rebranding experiments.

Design collaboration.


What’s in

it for me?

Motiv. - Design collab.


● Allows for everyone to do what

they do best.



● Shortens feedback loops.



● Easy changes and

experimentation.



● Induces Comradery and

accountability.



● Saves time.

● Saves Money.

● Happier work env.

● Better product.

● Do your homework.

● Mock UP whatever you

can before coding.

● Inject designers into the

dev. process.

Key points

Hybrid apps - what, when and why?

“We Should Be Building Great Things.

Things That Don’t yet Exist”

I hope you liked it.

by Royi Benyossef

Thank you for listening

Bi design

Software

Transcript of Bi design