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?
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!
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/wear.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 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
Learn about tools, patterns and user
expectations together.
Motivation to Mock it up!
Bi-design by Royi Benyossef
● Adjust expectations.
● Plan before impl.
● try out multiple solutions.
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
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
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.
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?
Top Related