More Related Content Similar to Working better together designers & developers Similar to Working better together designers & developers (20) More from Vitali Pekelis (20) Working better together designers & developers7. What Do We Do?
Android Fundamentals
Android Best Practice
Android UI / UX - NOW
Android Performance
Community Hackathon - 9/3
21. Today we will cover
● Identifying Problem <-> Solution
● Using Native Design in Android
● UX/UI Design Tools & Tips
● Hand Off Tools & Tips
● Conclusion
24. Did you ever had difficulties
with the other side?
Identifying Problem
26. Here’s a bit from my experience
and of others dev and des
Identifying Problem
32. Not just HOW to use Zeplin
But WHY use a tool like Zeplin
Finding Solution
43. 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
46. How many times did you get
this next design to develop?
#1 - UX/UI Design
49. It takes the user 90 sec
to understand your design
#1 - UX/UI Design / Android vs. iOS
61. How many of you have Android
as your personal device?
#1 - UX/UI Design / Using Native
62. To design for Android
be an Android user
#1 - UX/UI Design / Using Native
66. #1 - UX/UI Design / Using Native / Material.io
67. #1 - UX/UI Design / Using Native / Material.io
68. #1 - UX/UI Design / Using Native / Material.io
69. #1 - UX/UI Design / Using Native / Material.io
70. #1 - UX/UI Design / Using Native
Easy for designers, and?
73. #1 - UX/UI Design / Using Native / Android Studio
74. #1 - UX/UI Design / Using Native / Android Studio
75. #1 - UX/UI Design / Using Native / Android Studio
77. Have a good reason
NOT to use Native
#1 - UX/UI Design / Using Native
78. 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
81. How many of you are also
UX in your daily job?
#1 - UX/UI Design
89. #1 - UX/UI Design / Sketch / Material Design Templates / Welcome
90. #1 - UX/UI Design / Sketch / Material Design Templates
91. #1 - UX/UI Design / Sketch / Material Design Templates
92. #1 - UX/UI Design / Sketch / Material Design Templates
93. #1 - UX/UI Design / Sketch / Material Design Templates
94. Take it from here...
#1 - UX/UI Design / Sketch / Material Design Templates
96. Design a basic app in Sketch
#1 - UX/UI Design / Sketch / Basic App
97. #1 - UX/UI Design / Sketch / Basic App / Welcome
98. #1 - UX/UI Design / Sketch / Basic App / Artboard
101. #1 - UX/UI Design / Picking Colors Demo Website
107. #1 - UX/UI Design / Sketch / Basic App / colors
111. Easy Access to OS library
Multiple Pages and Artboards
Vector based design for scaling
What did we achieve?
#1 - UX/UI Design / Sketch
119. #1 - UX/UI Design / Design Beyond
During Development
120. #1 - UX/UI Design / Design Beyond
Pushing deadlines
Our Product’s release delay
Changes in code
121. How does it look like when
there are no images yet?
#1 - UX/UI Design / Design Beyond
126. #1 - UX/UI Design / Design Beyond / Material.io
129. Use MDPI (360 x 640)
aka Baseline Screen
#1 - UX/UI Design / Design Beyond
130. How does it look
like on a tablet?
#1 - UX/UI Design / Design Beyond
133. One App to rule them all
#1 - UX/UI Design / Design Beyond
134. 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
140. New kid on the block
#2 - Handoff / Guidelines
147. Export our basic app to Zeplin
#2 - Handoff / Guidelines / Export to Zeplin
149. #2 - Handoff / Guidelines / Export from Sketch to Zeplin
156. #2 - Handoff / Guidelines / Sketch / Make icons exportable
160. #2 - Handoff / Guidelines / Download icons into Folders
161. #2 - Handoff / Guidelines / Download icons into Folders
162. #2 - Handoff / Guidelines / / Sketch /Export icons into Folders
178. #2 - Handoff / Animations / Import Sketch, duplicate for an end point
185. Github
Website for developers to upload code
Version control when working together
World’s biggest Open Source code
#2 - Handoff / Animations / Github
187. #2 - Handoff / Animations
Send examples from websites
Little Big DetailsMaterial.io
195. Error: Invalid file name: must contain
only lowercase letters and digits
([a-z0-9_.])
#3 - Development / Android Studio / Add drawables Error
196. #3 - Development / Android Studio / Add drawables Error
Always Remember Gandalf...
200. 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
203. #3 - Development / Android Studio / Naming conventions
One drawable must have the
same file name
for all screen densities
206. Use Style from Zeplin
#3 - Development / Android Studio / Add drawables
212. Did you get all the
assets?
#4 - Check Up / Designers
215. Go over it and
Understand
#4 - Check Up / Developers
239. 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