working better together designers & developers
TRANSCRIPT
![Page 1: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/1.jpg)
Designer & Developers,Working Better Together
Shahar Avigezer
19.02.17CampusGuest //
#4
![Page 2: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/2.jpg)
Question
![Page 3: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/3.jpg)
Who’s here for the first time?
![Page 4: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/4.jpg)
Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:
![Page 5: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/5.jpg)
Jonathan Yarkoni
Android Leader Ironsource
Android Academy Staff
Yonatan Levin
Android Google Developer
Expert
Britt Barak
Android LeadFigure8
Yossi Segev
Android DeveloperColu
Shahar Avigezer
Android DeveloperHello Heart
![Page 6: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/6.jpg)
Community Mentors
![Page 7: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/7.jpg)
What Do We Do?
Android Fundamentals
Android Best Practice
Android UI / UX - NOW
Android Performance
Community Hackathon - 9/3
![Page 9: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/9.jpg)
Shahar AvigezerAvigezerit.com
Hello Heart
Android Academy
She Codes;
![Page 10: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/10.jpg)
Designer --> Developer
![Page 11: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/11.jpg)
Who have I worked with?
And more...
![Page 12: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/12.jpg)
Sitting next to developers be like...
![Page 13: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/13.jpg)
Timeout! Let’s learn some code...
![Page 14: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/14.jpg)
Where did I study code?
![Page 15: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/15.jpg)
Android & Scala backend Developer
![Page 16: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/16.jpg)
Nice to meet you!
![Page 17: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/17.jpg)
How many designers?
![Page 18: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/18.jpg)
How many developers?
![Page 19: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/19.jpg)
What’s in it for me?
![Page 20: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/20.jpg)
Tools To Use
Practical Tips
Glimpse To Design
Practical Tips
Designers Developers
![Page 21: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/21.jpg)
Today we will cover
● Identifying Problem <-> Solution
● Using Native Design in Android
● UX/UI Design Tools & Tips
● Hand Off Tools & Tips
● Conclusion
![Page 22: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/22.jpg)
Don’t worry...
Introduction
![Page 23: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/23.jpg)
Question
Identifying Problem
![Page 24: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/24.jpg)
Did you ever had difficulties with the other side?
Identifying Problem
![Page 25: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/25.jpg)
Identifying Problem
![Page 26: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/26.jpg)
Here’s a bit from my experience and of others dev and des
Identifying Problem
![Page 27: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/27.jpg)
Identifying Problem
![Page 28: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/28.jpg)
Designers defines the user experience
Finding Solution
![Page 29: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/29.jpg)
Developers creates the user experience
Finding Solution
![Page 30: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/30.jpg)
It’s all about communication
Finding Solution
![Page 31: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/31.jpg)
Tools willbe tools
Finding Solution
![Page 32: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/32.jpg)
Not just HOW to use ZeplinBut WHY use a tool like Zeplin
Finding Solution
![Page 33: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/33.jpg)
Demonstrating a good workflow
Finding Solution
![Page 34: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/34.jpg)
Workflow
● Kick Off
● UX/UI Design
● Handoff to Dev
● Development
● Check Up
![Page 35: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/35.jpg)
Workflow
● Kick Off
● UX/UI Design
● Handoff to Dev
● Development
● Check up
![Page 36: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/36.jpg)
#0 - Kick Off Meeting
![Page 37: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/37.jpg)
Invite the Devlopers
#0 - Kick Off Meeting / Designers
![Page 38: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/38.jpg)
Describe our Target Audience
#0 - Kick Off Meeting / Designers
![Page 39: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/39.jpg)
Describe your visual vision
#0 - Kick Off Meeting / Designers
![Page 40: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/40.jpg)
Set Technical Boundaries
#0 - Kick Off Meeting / Developers
![Page 41: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/41.jpg)
Explain how things work in Android
#0 - Kick Off Meeting / Developers
![Page 42: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/42.jpg)
Own theAndroid platform
#0 - Kick Off Meeting / Developers
![Page 43: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/43.jpg)
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
![Page 44: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/44.jpg)
Workflow
✓ Kick Off
● UX/UI Design
● Handoff to Dev
● Development
● Check up
![Page 45: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/45.jpg)
Question for developers
#1 - UX/UI Design
![Page 46: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/46.jpg)
How many times did you get this next design to develop?
#1 - UX/UI Design
![Page 47: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/47.jpg)
#1 - UX/UI Design / Android vs. iOS
![Page 48: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/48.jpg)
#1 - UX/UI Design / Android vs. iOS
![Page 49: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/49.jpg)
It takes the user 90 sec to understand your design
#1 - UX/UI Design / Android vs. iOS
![Page 50: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/50.jpg)
#1 - UX/UI Design / Android vs. iOS
![Page 51: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/51.jpg)
Be consistent with your users
#1 - UX/UI Design / Android vs. iOS
![Page 52: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/52.jpg)
Talk Native to me
#1 - UX/UI Design / Using Native
![Page 53: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/53.jpg)
Couple of differences
#1 - UX/UI Design / Android vs. iOS
![Page 54: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/54.jpg)
Back button
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
![Page 55: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/55.jpg)
Segmented controls
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
![Page 56: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/56.jpg)
Button styles
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
![Page 57: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/57.jpg)
TypographyRoboto San Francisco
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
![Page 58: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/58.jpg)
Icons
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
![Page 59: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/59.jpg)
Pickers
© Chris O’Sullivan
#1 - UX/UI Design / Android vs. iOS
![Page 60: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/60.jpg)
Question for designers
#1 - UX/UI Design / Using Native
![Page 61: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/61.jpg)
How many of you have Android as your personal device?
#1 - UX/UI Design / Using Native
![Page 62: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/62.jpg)
To design for Android be an Android user
#1 - UX/UI Design / Using Native
![Page 63: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/63.jpg)
Grab an Android,or do some research!
#1 - UX/UI Design / Using Native
![Page 64: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/64.jpg)
Material.io
#1 - UX/UI Design / Using Native / Material.io
![Page 65: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/65.jpg)
Discover Material design
#1 - UX/UI Design / Using Native / Material.io
![Page 66: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/66.jpg)
#1 - UX/UI Design / Using Native / Material.io
![Page 67: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/67.jpg)
#1 - UX/UI Design / Using Native / Material.io
![Page 68: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/68.jpg)
#1 - UX/UI Design / Using Native / Material.io
![Page 69: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/69.jpg)
#1 - UX/UI Design / Using Native / Material.io
![Page 70: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/70.jpg)
#1 - UX/UI Design / Using Native
Easy for designers, and?
![Page 71: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/71.jpg)
Developer's point of view
#1 - UX/UI Design / Using Native
![Page 72: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/72.jpg)
Android Studio
#1 - UX/UI Design / Using Native
![Page 73: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/73.jpg)
#1 - UX/UI Design / Using Native / Android Studio
![Page 74: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/74.jpg)
#1 - UX/UI Design / Using Native / Android Studio
![Page 75: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/75.jpg)
#1 - UX/UI Design / Using Native / Android Studio
![Page 76: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/76.jpg)
Days > Hours
#1 - UX/UI Design / Using Native
![Page 77: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/77.jpg)
Have a good reason NOT to use Native
#1 - UX/UI Design / Using Native
![Page 78: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/78.jpg)
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
![Page 79: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/79.jpg)
Any Questions?
![Page 80: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/80.jpg)
Question for designers
#1 - UX/UI Design
![Page 81: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/81.jpg)
How many of you are also UX in your daily job?
#1 - UX/UI Design
![Page 82: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/82.jpg)
What is ux?
#1 - UX/UI Design
![Page 83: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/83.jpg)
What is ux?
Structure, Skeleton, Blueprints
#1 - UX/UI Design
![Page 84: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/84.jpg)
#1 - UX/UI Design
![Page 85: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/85.jpg)
Today’s LectureUX + UI Design
#1 - UX/UI Design
![Page 86: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/86.jpg)
UX/UI Design tools
Photoshop Sketch Illustrator
#1 - UX/UI Design
Mac LicensedMac + Windows,
Licensed
![Page 87: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/87.jpg)
Sketch
#1 - UX/UI Design /Sketch
![Page 88: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/88.jpg)
Using Material Design template in Sketch
#1 - UX/UI Design / Sketch / Material Design Templates
![Page 89: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/89.jpg)
#1 - UX/UI Design / Sketch / Material Design Templates / Welcome
![Page 90: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/90.jpg)
#1 - UX/UI Design / Sketch / Material Design Templates
![Page 91: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/91.jpg)
#1 - UX/UI Design / Sketch / Material Design Templates
![Page 92: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/92.jpg)
#1 - UX/UI Design / Sketch / Material Design Templates
![Page 93: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/93.jpg)
#1 - UX/UI Design / Sketch / Material Design Templates
![Page 94: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/94.jpg)
Take it from here...
#1 - UX/UI Design / Sketch / Material Design Templates
![Page 95: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/95.jpg)
Why use native components?
![Page 96: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/96.jpg)
Design a basic app in Sketch
#1 - UX/UI Design / Sketch / Basic App
![Page 97: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/97.jpg)
#1 - UX/UI Design / Sketch / Basic App / Welcome
![Page 98: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/98.jpg)
#1 - UX/UI Design / Sketch / Basic App / Artboard
![Page 99: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/99.jpg)
Picking Material Design colors
#1 - UX/UI Design / Picking Colors
![Page 100: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/100.jpg)
Material Palette
#1 - UX/UI Design / Picking Colors Demo Website
![Page 101: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/101.jpg)
#1 - UX/UI Design / Picking Colors Demo Website
![Page 102: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/102.jpg)
Developer's point of view
#1 - UX/UI Design / Using Colors
![Page 103: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/103.jpg)
#1 - UX/UI Design / Using Colors
![Page 104: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/104.jpg)
Saving Product Time
#1 - UX/UI Design / Using Colors
![Page 105: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/105.jpg)
Picking Material Design Icons
#1 - UX/UI Design / Picking Icons
![Page 106: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/106.jpg)
Material.io/icons/
#1 - UX/UI Design / Picking Icons Website
![Page 107: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/107.jpg)
#1 - UX/UI Design / Sketch / Basic App / colors
![Page 108: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/108.jpg)
A gallon of coffee later...
![Page 109: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/109.jpg)
#1 - UX/UI Design / Sketch / Basic App / UX
![Page 110: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/110.jpg)
#1 - UX/UI Design / Sketch / Basic App / UI
![Page 111: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/111.jpg)
Easy Access to OS library
Multiple Pages and Artboards
Vector based design for scaling
What did we achieve?
#1 - UX/UI Design / Sketch
![Page 112: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/112.jpg)
Any Questions?
![Page 113: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/113.jpg)
Question
#1 - UX/UI Design / Design Beyond
![Page 114: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/114.jpg)
What happens when you turn the screen?
#1 - UX/UI Design / Design Beyond
![Page 115: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/115.jpg)
#1 - UX/UI Design / Design Beyond
![Page 116: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/116.jpg)
Not User Friendly!
#1 - UX/UI Design / Design Beyond
![Page 117: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/117.jpg)
#1 - UX/UI Design / Design Beyond
![Page 118: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/118.jpg)
Adding Product Time
#1 - UX/UI Design / Using Colors
![Page 119: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/119.jpg)
#1 - UX/UI Design / Design Beyond
During Development
![Page 120: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/120.jpg)
#1 - UX/UI Design / Design Beyond
Pushing deadlines
Our Product’s release delay
Changes in code
![Page 121: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/121.jpg)
How does it look like when there are no images yet?
#1 - UX/UI Design / Design Beyond
![Page 122: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/122.jpg)
#1 - UX/UI Design / Design Beyond
![Page 123: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/123.jpg)
Guess there’s nothing interesting here...#1 - UX/UI Design / Design Beyond
![Page 124: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/124.jpg)
First Impression is everything
#1 - UX/UI Design / Design Beyond
![Page 125: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/125.jpg)
#1 - UX/UI Design / Design Beyond
![Page 126: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/126.jpg)
#1 - UX/UI Design / Design Beyond / Material.io
![Page 127: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/127.jpg)
Responsive design
#1 - UX/UI Design / Design Beyond
![Page 128: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/128.jpg)
Android Devices#1 - UX/UI Design / Design Beyond
![Page 129: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/129.jpg)
Use MDPI (360 x 640)aka Baseline Screen
#1 - UX/UI Design / Design Beyond
![Page 130: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/130.jpg)
How does it look like on a tablet?
#1 - UX/UI Design / Design Beyond
![Page 131: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/131.jpg)
#1 - UX/UI Design / Design Beyond
![Page 132: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/132.jpg)
#1 - UX/UI Design / Design Beyond
![Page 133: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/133.jpg)
One App to rule them all
#1 - UX/UI Design / Design Beyond
![Page 134: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/134.jpg)
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
![Page 135: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/135.jpg)
Any Questions?
![Page 136: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/136.jpg)
Workflow
✓ Kick Off
✓ UX/UI Design
● Handoff to Dev
● Development
● Check up
![Page 137: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/137.jpg)
Guidelines vs Style Guide
#2 - Handoff
![Page 138: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/138.jpg)
Guidelinesaka
Specaka
Redlines
#2 - Handoff / Guidelines
![Page 139: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/139.jpg)
#2 - Handoff / Guidelines
![Page 140: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/140.jpg)
New kid on the block
#2 - Handoff / Guidelines
![Page 141: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/141.jpg)
On demand Guidelines
#2 - Handoff / Guidelines
![Page 142: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/142.jpg)
Guidelines tools
Avocode Zeplin Inspect
#2 - Handoff / Guidelines
![Page 143: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/143.jpg)
Zeplin
#2 - Handoff / Guidelines / Zeplin
![Page 144: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/144.jpg)
Install Sketch->Zeplin plugin
#2 - Handoff / Guidelines / install Sketch->Zeplin plugin
![Page 145: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/145.jpg)
#2 - Handoff / Guidelines / Download plugin
![Page 146: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/146.jpg)
#2 - Handoff / Guidelines / Activate plugin
![Page 147: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/147.jpg)
Export our basic app to Zeplin
#2 - Handoff / Guidelines / Export to Zeplin
![Page 148: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/148.jpg)
#2 - Handoff / Guidelines / New Project in Zeplin
![Page 149: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/149.jpg)
#2 - Handoff / Guidelines / Export from Sketch to Zeplin
![Page 150: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/150.jpg)
Why prefer to design for MDPI?
![Page 151: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/151.jpg)
#2 - Handoff / Guidelines / Upload screens to Zeplin
![Page 152: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/152.jpg)
#2 - Handoff / Guidelines / Guidelines on demand
![Page 153: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/153.jpg)
Export Assets into Folders
#2 - Handoff / Guidelines / Export Assets into Folders
![Page 154: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/154.jpg)
Sketch
#2 - Handoff / Export Assets
![Page 155: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/155.jpg)
Make All Icons Exportable
#2 - Handoff / Export Assets
![Page 156: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/156.jpg)
#2 - Handoff / Guidelines / Sketch / Make icons exportable
![Page 157: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/157.jpg)
#2 - Handoff / Guidelines / Export all icons
![Page 158: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/158.jpg)
Download assets from Zeplin
#2 - Handoff / Guidelines / Export to Zeplin
![Page 159: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/159.jpg)
Zeplin
#2 - Handoff / Guidelines / Zeplin
![Page 160: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/160.jpg)
#2 - Handoff / Guidelines / Download icons into Folders
![Page 161: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/161.jpg)
#2 - Handoff / Guidelines / Download icons into Folders
![Page 162: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/162.jpg)
#2 - Handoff / Guidelines / / Sketch /Export icons into Folders
![Page 163: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/163.jpg)
Style Guideaka
Visual Style Guideaka
Brand Book
#2 - Handoff / Style guide
![Page 164: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/164.jpg)
Story Time!
#2 - Handoff / Style guide
![Page 165: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/165.jpg)
Saving styles from Zeplin
#2 - Handoff / Style guide / Style in Zeplin
![Page 166: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/166.jpg)
#2 - Handoff / Style guide / Set colors and Fonts
![Page 167: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/167.jpg)
#2 - Handoff / Style guide / Ready made code
![Page 168: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/168.jpg)
Style Guide tools
Frontify IndesignSketch
#2 - Handoff / Style guide / tools
![Page 169: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/169.jpg)
Frontify
#2 - Handoff / Style guide / Frontify
![Page 170: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/170.jpg)
#2 - Handoff / Style guide / Frontify
![Page 171: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/171.jpg)
#2 - Handoff / Style guide / Frontify
![Page 172: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/172.jpg)
Independence Developers
Readable Guidelines
Style Guide As a Shield of Our Product
What did we achieve?
#2 - Handoff / Guidelines & Style Guide
![Page 173: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/173.jpg)
Any Questions?
![Page 174: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/174.jpg)
Now let’s add some...#2 - Handoff / Animations
![Page 175: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/175.jpg)
Animations tools
Framer Principle Flinto
#2 - Handoff / Animations / Tools
![Page 176: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/176.jpg)
Principle
#2 - Handoff / Animations / Principle
![Page 177: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/177.jpg)
Creating Simple Animation
#2 - Handoff / Animations
![Page 178: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/178.jpg)
#2 - Handoff / Animations / Import Sketch, duplicate for an end point
![Page 179: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/179.jpg)
#2 - Handoff / Animations / Define end point, Connect
![Page 180: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/180.jpg)
#2 - Handoff / Animations / Connect back
![Page 181: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/181.jpg)
#2 - Handoff / Animations / Play in demo window
![Page 182: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/182.jpg)
#2 - Handoff / Animations
It’s that easy!
![Page 183: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/183.jpg)
Think Outside The Box
#2 - Handoff / Animations / Extra Tip
![Page 184: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/184.jpg)
GitHub
#2 - Handoff / Animations / Github
![Page 185: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/185.jpg)
GithubWebsite for developers to upload codeVersion control when working together
World’s biggest Open Source code
#2 - Handoff / Animations / Github
![Page 186: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/186.jpg)
Open Source LibrariesTemplates of code for a specific purpose
#2 - Handoff / Animations / Github
![Page 187: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/187.jpg)
#2 - Handoff / Animations
Send examples from websites
Little Big DetailsMaterial.io
![Page 188: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/188.jpg)
Why use Style Guide (Des & Dev)?
![Page 189: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/189.jpg)
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
● Development
● Check up
![Page 190: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/190.jpg)
Developer's point of view
#3 - Development
![Page 191: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/191.jpg)
Download assets from Zeplin
#3 - Development / Android Studio / Add drawables
![Page 192: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/192.jpg)
Android Studio
#3 - Development / Android Studio
![Page 193: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/193.jpg)
#2 - Handoff / Guidelines / Export all icons
![Page 194: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/194.jpg)
#3 - Development / Android Studio / Add drawables
![Page 195: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/195.jpg)
Error: Invalid file name: must contain only lowercase letters and digits ([a-z0-9_.])
#3 - Development / Android Studio / Add drawables Error
![Page 196: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/196.jpg)
#3 - Development / Android Studio / Add drawables Error
Always Remember Gandalf...
![Page 197: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/197.jpg)
Mandatory:a - z0 - 9x_y x.y
#3 - Development / Android Studio / Naming drawables
![Page 198: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/198.jpg)
Android Cheatsheet For Graphic Designers
#1 - UX/UI Design / Picking Colors Demo Website
![Page 199: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/199.jpg)
Naming conventions
#3 - Development / Android Studio / Naming conventions
![Page 200: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/200.jpg)
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
![Page 201: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/201.jpg)
Normal _normal
Pressed _pressed
Focused _focused
Disabled _disabled
Selected _selected
Selector states#3 - Development / Android Studio / Naming conventions
![Page 202: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/202.jpg)
Organizing Folders#3 - Development / Android Studio / Folders
![Page 203: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/203.jpg)
#3 - Development / Android Studio / Naming conventions
One drawable must have the same file name
for all screen densities
![Page 204: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/204.jpg)
Naming a disable ”like” Icon?
![Page 205: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/205.jpg)
#3 - Development / Android Studio / Naming conventions
ico_like_disable
![Page 206: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/206.jpg)
Use Style from Zeplin
#3 - Development / Android Studio / Add drawables
![Page 207: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/207.jpg)
Zeplin
#2 - Handoff / Guidelines / Zeplin
-->
Android Studio
![Page 208: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/208.jpg)
#3 - Development/ Style guide / Ready made code
![Page 209: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/209.jpg)
Any Questions?
![Page 210: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/210.jpg)
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
● Check up
![Page 211: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/211.jpg)
Just pick up the phone#4 - Check Up / Phone Call
![Page 212: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/212.jpg)
Did you get all the assets?
#4 - Check Up / Designers
![Page 213: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/213.jpg)
Everything is clear about the flow?
#4 - Check Up / Designers
![Page 214: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/214.jpg)
Any more edge cases in mind?
#4 - Check Up / Designers
![Page 215: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/215.jpg)
Go over it and Understand
#4 - Check Up / Developers
![Page 216: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/216.jpg)
Share yourDeadlines
#4 - Check Up / Developers
![Page 217: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/217.jpg)
Offer fasterReplacements
#4 - Check Up / Developers
![Page 218: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/218.jpg)
#4 - Check Up / Now and then
Now and then...
![Page 219: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/219.jpg)
#5 - Changes & New Features
Cha Cha Cha Changes...
![Page 220: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/220.jpg)
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
● Changes & New Features
![Page 221: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/221.jpg)
Use the Style Guide
#5 - Changes & New Features
![Page 222: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/222.jpg)
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
✓ Check up
Done!
![Page 223: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/223.jpg)
How it feels...
![Page 224: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/224.jpg)
Wait! what about...
![Page 225: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/225.jpg)
Workflow MVP
![Page 226: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/226.jpg)
Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
✓ Check up
![Page 227: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/227.jpg)
Where can we test the workflow?
![Page 229: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/229.jpg)
Remember these next tips
![Page 230: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/230.jpg)
Own it, be proud
Best Tips
![Page 231: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/231.jpg)
Refer to us as an Eco-System
Best Tips
![Page 232: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/232.jpg)
No Ego in the house
Best Tips
![Page 233: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/233.jpg)
Ask - debate - talk
Best Tips
![Page 234: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/234.jpg)
Your Time is precious
Best Tips
![Page 235: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/235.jpg)
Smile coming in, Smile going out
Best Tips
![Page 236: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/236.jpg)
Learn some UX \ Code
Best Tips
![Page 237: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/237.jpg)
Thank You!Best Tips
![Page 238: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/238.jpg)
Finished with Design Course!
![Page 239: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/239.jpg)
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
![Page 240: Working better together designers & developers](https://reader033.vdocuments.site/reader033/viewer/2022052606/58ed8e521a28aba14d8b469b/html5/thumbnails/240.jpg)
Designer & Developers,Working Better Together
Shahar Avigezer
#4