Designer & Developers,
Working Better Together
Shahar Avigezer
19.02.17CampusGuest //
#4
Question
Who’s here for the first time?
Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:
Jonathan
Yarkoni
Android Leader
Ironsource
Android Academy Staff
Yonatan Levin
Android
Google Developer
Expert
Britt Barak
Android Lead
Figure8
Yossi Segev
Android Developer
Colu
Shahar
Avigezer
Android Developer
Hello Heart
Community Mentors
What Do We Do?
Android Fundamentals
Android Best Practice
Android UI / UX - NOW
Android Performance
Community Hackathon - 9/3
9.3 - 10.3
Register :goo.gl/forms/STkeqW9fHGI1JAb52
Shahar Avigezer
Avigezerit.com
Hello Heart
Android Academy
She Codes;
Designer --> Developer
Who have I worked with?
And more...
Sitting next to developers be like...
Timeout!
Let’s learn some code...
Where did I study code?
Android & Scala
backend Developer
Nice to meet you!
How many designers?
How many developers?
What’s in it for me?
Tools To Use
Practical Tips
Glimpse To Design
Practical Tips
Designers Developers
Today we will cover
● Identifying Problem <-> Solution
● Using Native Design in Android
● UX/UI Design Tools & Tips
● Hand Off Tools & Tips
● Conclusion
Don’t worry...
Introduction
Question
Identifying Problem
Did you ever had difficulties
with the other side?
Identifying Problem
Identifying Problem
Here’s a bit from my experience
and of others dev and des
Identifying Problem
Identifying Problem
Designers defines
the user experience
Finding Solution
Developers creates
the user experience
Finding Solution
It’s all about
communication
Finding Solution
Tools will
be tools
Finding Solution
Not just HOW to use Zeplin
But WHY use a tool like Zeplin
Finding Solution
Demonstrating a good workflow
Finding Solution
Workflow
● Kick Off
● UX/UI Design
● Handoff to Dev
● Development
● Check Up
Workflow
● Kick Off
● UX/UI Design
● Handoff to Dev
● Development
● Check up
#0 - Kick Off Meeting
Invite the
Devlopers
#0 - Kick Off Meeting / Designers
Describe our
Target Audience
#0 - Kick Off Meeting / Designers
Describe your
visual vision
#0 - Kick Off Meeting / Designers
Set Technical
Boundaries
#0 - Kick Off Meeting / Developers
Explain how things
work in Android
#0 - Kick Off Meeting / Developers
Own the
Android platform
#0 - Kick Off Meeting / Developers
Be aligned with demands & possibilities
Comprehensive perspective on our product
Inspire a sense of belonging in the team
What did we achieve?
#0 - Kick Off Meeting
Workflow
✓ Kick Off
● UX/UI Design
● Handoff to Dev
● Development
● Check up
Question for developers
#1 - UX/UI Design
How many times did you get
this next design to develop?
#1 - UX/UI Design
#1 - UX/UI Design / Android vs. iOS
#1 - UX/UI Design / Android vs. iOS
It takes the user 90 sec
to understand your design
#1 - UX/UI Design / Android vs. iOS
#1 - UX/UI Design / Android vs. iOS
Be consistent
with your users
#1 - UX/UI Design / Android vs. iOS
Talk Native to me
#1 - UX/UI Design / Using Native
Couple of differences
#1 - UX/UI Design / Android vs. iOS
Back button
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
Segmented controls
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
Button styles
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
Typography
Roboto San Francisco
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
Icons
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
Pickers
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
Question for designers
#1 - UX/UI Design / Using Native
How many of you have Android
as your personal device?
#1 - UX/UI Design / Using Native
To design for Android
be an Android user
#1 - UX/UI Design / Using Native
Grab an Android,
or do some research!
#1 - UX/UI Design / Using Native
Material.io
#1 - UX/UI Design / Using Native / Material.io
Discover Material design
#1 - UX/UI Design / Using Native / Material.io
#1 - UX/UI Design / Using Native / Material.io
#1 - UX/UI Design / Using Native / Material.io
#1 - UX/UI Design / Using Native / Material.io
#1 - UX/UI Design / Using Native / Material.io
#1 - UX/UI Design / Using Native
Easy for designers, and?
Developer's point of view
#1 - UX/UI Design / Using Native
Android Studio
#1 - UX/UI Design / Using Native
#1 - UX/UI Design / Using Native / Android Studio
#1 - UX/UI Design / Using Native / Android Studio
#1 - UX/UI Design / Using Native / Android Studio
Days > Hours
#1 - UX/UI Design / Using Native
Have a good reason
NOT to use Native
#1 - UX/UI Design / Using Native
Be consistent with your users
Save development time
Be a professional when it comes to Android
What did we achieve?
#1 - UX/UI Design / Using Native
Any Questions?
Question for designers
#1 - UX/UI Design
How many of you are also
UX in your daily job?
#1 - UX/UI Design
What is ux?
#1 - UX/UI Design
What is ux?
Structure, Skeleton, Blueprints
#1 - UX/UI Design
#1 - UX/UI Design
Today’s Lecture
UX + UI Design
#1 - UX/UI Design
UX/UI Design tools
Photoshop Sketch Illustrator
#1 - UX/UI Design
Mac
Licensed
Mac + Windows,
Licensed
Sketch
#1 - UX/UI Design /Sketch
Using Material Design
template in Sketch
#1 - UX/UI Design / Sketch / Material Design Templates
#1 - UX/UI Design / Sketch / Material Design Templates / Welcome
#1 - UX/UI Design / Sketch / Material Design Templates
#1 - UX/UI Design / Sketch / Material Design Templates
#1 - UX/UI Design / Sketch / Material Design Templates
#1 - UX/UI Design / Sketch / Material Design Templates
Take it from here...
#1 - UX/UI Design / Sketch / Material Design Templates
Why use native components?
Design a basic app in Sketch
#1 - UX/UI Design / Sketch / Basic App
#1 - UX/UI Design / Sketch / Basic App / Welcome
#1 - UX/UI Design / Sketch / Basic App / Artboard
Picking Material Design colors
#1 - UX/UI Design / Picking Colors
Material Palette
#1 - UX/UI Design / Picking Colors Demo Website
#1 - UX/UI Design / Picking Colors Demo Website
Developer's point of view
#1 - UX/UI Design / Using Colors
#1 - UX/UI Design / Using Colors
Saving Product Time
#1 - UX/UI Design / Using Colors
Picking Material Design Icons
#1 - UX/UI Design / Picking Icons
Material.io/icons/
#1 - UX/UI Design / Picking Icons Website
#1 - UX/UI Design / Sketch / Basic App / colors
A gallon of coffee later...
#1 - UX/UI Design / Sketch / Basic App / UX
#1 - UX/UI Design / Sketch / Basic App / UI
Easy Access to OS library
Multiple Pages and Artboards
Vector based design for scaling
What did we achieve?
#1 - UX/UI Design / Sketch
Any Questions?
Question
#1 - UX/UI Design / Design Beyond
What happens when you
turn the screen?
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond
Not User Friendly!
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond
Adding Product Time
#1 - UX/UI Design / Using Colors
#1 - UX/UI Design / Design Beyond
During Development
#1 - UX/UI Design / Design Beyond
Pushing deadlines
Our Product’s release delay
Changes in code
How does it look like when
there are no images yet?
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond
Guess there’s nothing interesting here...
#1 - UX/UI Design / Design Beyond
First Impression is everything
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond / Material.io
Responsive design
#1 - UX/UI Design / Design Beyond
Android Devices
#1 - UX/UI Design / Design Beyond
Use MDPI (360 x 640)
aka Baseline Screen
#1 - UX/UI Design / Design Beyond
How does it look
like on a tablet?
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond
#1 - UX/UI Design / Design Beyond
One App to rule them all
#1 - UX/UI Design / Design Beyond
Same experience for all users
Refine the product as a whole
Leverage the edge cases
What did we achieve?
#1 - UX/UI Design / Design Beyond
Any Questions?
Workflow
✓ Kick Off
✓ UX/UI Design
● Handoff to Dev
● Development
● Check up
Guidelines vs Style Guide
#2 - Handoff
Guidelines
aka
Spec
aka
Redlines
#2 - Handoff / Guidelines
#2 - Handoff / Guidelines
New kid on the block
#2 - Handoff / Guidelines
On demand Guidelines
#2 - Handoff / Guidelines
Guidelines tools
Avocode Zeplin Inspect
#2 - Handoff / Guidelines
Zeplin
#2 - Handoff / Guidelines / Zeplin
Install Sketch->Zeplin plugin
#2 - Handoff / Guidelines / install Sketch->Zeplin plugin
#2 - Handoff / Guidelines / Download plugin
#2 - Handoff / Guidelines / Activate plugin
Export our basic app to Zeplin
#2 - Handoff / Guidelines / Export to Zeplin
#2 - Handoff / Guidelines / New Project in Zeplin
#2 - Handoff / Guidelines / Export from Sketch to Zeplin
Why prefer to design for MDPI?
#2 - Handoff / Guidelines / Upload screens to Zeplin
#2 - Handoff / Guidelines / Guidelines on demand
Export Assets into Folders
#2 - Handoff / Guidelines / Export Assets into Folders
Sketch
#2 - Handoff / Export Assets
Make All Icons
Exportable
#2 - Handoff / Export Assets
#2 - Handoff / Guidelines / Sketch / Make icons exportable
#2 - Handoff / Guidelines / Export all icons
Download assets from Zeplin
#2 - Handoff / Guidelines / Export to Zeplin
Zeplin
#2 - Handoff / Guidelines / Zeplin
#2 - Handoff / Guidelines / Download icons into Folders
#2 - Handoff / Guidelines / Download icons into Folders
#2 - Handoff / Guidelines / / Sketch /Export icons into Folders
Style Guide
aka
Visual Style Guide
aka
Brand Book
#2 - Handoff / Style guide
Story Time!
#2 - Handoff / Style guide
Saving styles from Zeplin
#2 - Handoff / Style guide / Style in Zeplin
#2 - Handoff / Style guide / Set colors and Fonts
#2 - Handoff / Style guide / Ready made code
Style Guide tools
Frontify IndesignSketch
#2 - Handoff / Style guide / tools
Frontify
#2 - Handoff / Style guide / Frontify
#2 - Handoff / Style guide / Frontify
#2 - Handoff / Style guide / Frontify
Independence Developers
Readable Guidelines
Style Guide As a Shield of Our Product
What did we achieve?
#2 - Handoff / Guidelines & Style Guide
Any Questions?
Now let’s add some...
#2 - Handoff / Animations
Animations tools
Framer Principle Flinto
#2 - Handoff / Animations / Tools
Principle
#2 - Handoff / Animations / Principle
Creating Simple Animation
#2 - Handoff / Animations
#2 - Handoff / Animations / Import Sketch, duplicate for an end point
#2 - Handoff / Animations / Define end point, Connect
#2 - Handoff / Animations / Connect back
#2 - Handoff / Animations / Play in demo window
#2 - Handoff / Animations
It’s that easy!
Think Outside The Box
#2 - Handoff / Animations / Extra Tip
GitHub
#2 - Handoff / Animations / Github
Github
Website for developers to upload code
Version control when working together
World’s biggest Open Source code
#2 - Handoff / Animations / Github
Open Source Libraries
Templates of code for a specific purpose
#2 - Handoff / Animations / Github
#2 - Handoff / Animations
Send examples from websites
Little Big DetailsMaterial.io
Why use Style Guide (Des & Dev)?
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
● Development
● Check up
Developer's point of view
#3 - Development
Download assets from Zeplin
#3 - Development / Android Studio / Add drawables
Android Studio
#3 - Development / Android Studio
#2 - Handoff / Guidelines / Export all icons
#3 - Development / Android Studio / Add drawables
Error: Invalid file name: must contain
only lowercase letters and digits
([a-z0-9_.])
#3 - Development / Android Studio / Add drawables Error
#3 - Development / Android Studio / Add drawables Error
Always Remember Gandalf...
Mandatory:
a - z
0 - 9
x_y
x.y
#3 - Development / Android Studio / Naming drawables
Android Cheatsheet
For Graphic Designers
#1 - UX/UI Design / Picking Colors Demo Website
Naming conventions
#3 - Development / Android Studio / Naming conventions
Button btn_
Dialog dialog_
Tabs tab_
Icon ic_
Launcher Icon ic_launcher
Tab Icon ic_tab
Drawable & Icon sets
#3 - Development / Android Studio / Naming conventions
Normal _normal
Pressed _pressed
Focused _focused
Disabled _disabled
Selected _selected
Selector states
#3 - Development / Android Studio / Naming conventions
Organizing Folders
#3 - Development / Android Studio / Folders
#3 - Development / Android Studio / Naming conventions
One drawable must have the
same file name
for all screen densities
Naming a disable ”like” Icon?
#3 - Development / Android Studio / Naming conventions
ico_like_disable
Use Style from Zeplin
#3 - Development / Android Studio / Add drawables
Zeplin
#2 - Handoff / Guidelines / Zeplin
-->
Android Studio
#3 - Development/ Style guide / Ready made code
Any Questions?
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
● Check up
Just pick up the phone
#4 - Check Up / Phone Call
Did you get all the
assets?
#4 - Check Up / Designers
Everything is clear
about the flow?
#4 - Check Up / Designers
Any more
edge cases in mind?
#4 - Check Up / Designers
Go over it and
Understand
#4 - Check Up / Developers
Share your
Deadlines
#4 - Check Up / Developers
Offer faster
Replacements
#4 - Check Up / Developers
#4 - Check Up / Now and then
Now and then...
#5 - Changes & New Features
Cha Cha Cha Changes...
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
● Changes & New Features
Use the Style Guide
#5 - Changes & New Features
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
✓ Check up
Done!
How it feels...
Wait! what about...
Workflow MVP
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
✓ Check up
Where can we test the workflow?
9.3 - 10.3
Register :goo.gl/forms/STkeqW9fHGI1JAb52
Remember these next tips
Own it, be proud
Best Tips
Refer to us as an Eco-System
Best Tips
No Ego in the house
Best Tips
Ask - debate - talk
Best Tips
Your Time is precious
Best Tips
Smile coming in, Smile going out
Best Tips
Learn some UX  Code
Best Tips
Thank You!
Best Tips
Finished with Design Course!
Sketch Zeplin Photoshop Illustrator Avocode
Inspect Frontify Princple Invision flinto
framer Github Android Studio
Material.io Material Palette
Little Big Details Dribbble
A Tale of two platforms Android cheatsheet
Softwares / apps
Websites
Designer & Developers,
Working Better Together
Shahar Avigezer
#4

Working better together designers &amp; developers