bi-design: devs & designers getting along - royi benyossef, vidmind
TRANSCRIPT
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.
what do i want?!
My Motivation
Bi-design by Royi Benyossef
What do i want?
Bi-design by Royi Benyossef
● “My designer doesn’t know
mobile/Android”.
What do i want?
Bi-design by Royi Benyossef
● “We’re trying to copy the iOS app on
Android”.
What do i want?
Bi-design by Royi Benyossef
● “Rebranding caused us to refactor a
lot of the code”.
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!
what do we want?!
Motivation
Bi-design by Royi Benyossef
Motivation
Bi-design by Royi Benyossef
Less misunderstandings.
Motivation
Bi-design by Royi Benyossef
Less clashes and stress.
Motivation
Bi-design by Royi Benyossef
Less information gaps.
Motivation
Bi-design by Royi Benyossef
Less duplicate work.
Motivation
Bi-design by Royi Benyossef
More time for fun!
Motivation
Bi-design by Royi Benyossef
A successful app.
HOW?
Actions
Bi-design by Royi Benyossef
Do your homework
Bi-design by Royi Benyossef
quality checklists.
Bi-design by Royi Benyossef
●Design & interaction.
●Func.
●Performance.
●Stability.
●Google Play.
* 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/w
ear.html
https://developer.android.com/distribute/essentials/quality/tv.
html
https://developer.android.com/distribute/essentials/quality/
auto.html
Design Guidelines.
Bi-design by Royi Benyossef
●vision.
●Style lang.
●Patterns.
●Navigation.
●Material design.*https://developer.android.com/design/index.html
Design vision.
Bi-design by Royi Benyossef
●Enchant.
●Simplify.
●Amaze.
Design language.
Bi-design by Royi Benyossef
●Iconography.
●Typography.
●Color.
●branding.
●themes.
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
Motivation - do your HW.
Bi-design by Royi Benyossef
What’s in it for me?
Motivation - do your HW.
Bi-design by Royi Benyossef
Learn about tools, patterns and
user expectations together.
Motivation - do your HW.
Bi-design by Royi Benyossef
Eligibility to feature in Google
Play!
Mock it up!
Bi-design by Royi Benyossef
MOCK UI & Flow
Bi-design by Royi Benyossef
●Android studio.
●Balsamiq.
●Fluid UI.
Mock nav. and animation
Bi-design by Royi Benyossef
●Framer js.
●Pixate.
Motivation to Mock it up!
Bi-design by Royi Benyossef
What’s in it for me?
Motivation to Mock it up!
Bi-design by Royi Benyossef
●Adjust expectations.
●Plan before impl.
●try out multiple solutions.
Design collaboration.
Bi-design by Royi Benyossef
Step 1
Bi-design by Royi Benyossef
Connect designers to code.
Connect designers to code.
Bi-design by Royi Benyossef
1.Repo access and training.
Connect designers to code.
Bi-design by Royi Benyossef
2.layout and resources
training.
Step 2
Bi-design by Royi Benyossef
Design code for designers.
Design code for designers.
Bi-design by Royi Benyossef
1.Feature toggles.
Design code for designers.
Bi-design by Royi Benyossef
2..XML resources:
a.Meaningful names.
b.Logical places.
Design code for designers.
Bi-design by Royi Benyossef
●Old:○Layouts.○Strings.○Styles.○Themes.○Animations.
Design code for designers.
Bi-design by Royi Benyossef
●New:○Vector drawables.○Transition animations.○Curved motion.○View state changes
Step 3
Bi-design by Royi Benyossef
Use designers only when you need them (Designers JIT).
Designers JIT.
Bi-design by Royi Benyossef
3.Use Tinted drawable resources.
?android:attr/colorPrimary
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...
}
});
Designers JIT.
Bi-design by Royi Benyossef
Designers JIT.
Bi-design by Royi Benyossef
4.Use elevations:
View.setElevation()
View.setTranslationZ()
ViewPropertyAnimator.z()
ViewPropertyAnimator.translationZ()
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>
Step 4 - Alter workflow
Bi-design by Royi Benyossef
● Initial layout.
●Final touchups.
●Image replacements.
●Rebranding experiments.
Step 3 - Alter workflow
Bi-design by Royi Benyossef
● Initial layout.
●Final touchups.
●Image replacements.
●Rebranding experiments.Done by
the
designers
Design collaboration.
Bi-design by Royi Benyossef
What’s in it for me?
Motiv. - Design collab.
Bi-design by Royi Benyossef
●Allows for everyone to do
what they do best.
Motiv. - Design collab.
Bi-design by Royi Benyossef
●Shortens feedback loops.
Motiv. - Design collab.
Bi-design by Royi Benyossef
●Easy changes and
experimentation.
Motiv. - Design collab.
Bi-design by Royi Benyossef
●Induces Comradery and
accountability.
Motiv. - Design collab.
Bi-design by Royi Benyossef
●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