Working better together designers & developers

Designer & Developers,
Working Better Together
Shahar Avigezer
19.02.17CampusGuest //
#4

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

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;

Who have I worked with?
And more...

Sitting next to developers be like...

Timeout!
Let’s learn some code...

Android & Scala
backend Developer

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

Did you ever had difficulties
with the other side?
Identifying Problem

Here’s a bit from my experience
and of others dev and des
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

Invite the
Devlopers
#0 - Kick Off Meeting / Designers

Describe our
Target Audience

Describe your
visual vision

Set Technical
Boundaries
#0 - Kick Off Meeting / Developers

Explain how things
work in Android

Own the
Android platform

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

It takes the user 90 sec
to understand your design

Be consistent
with your users

Talk Native to me
#1 - UX/UI Design / Using Native

Couple of differences

Back button
© Chris O’Sullivan

Segmented controls

Button styles

Typography
Roboto San Francisco

Icons

Pickers

Question for designers

How many of you have Android
as your personal device?

To design for Android
be an Android user

Grab an Android,
or do some research!

Material.io
#1 - UX/UI Design / Using Native / Material.io

Discover Material design

Easy for designers, and?

Developer's point of view

Android Studio

#1 - UX/UI Design / Using Native / Android Studio

Days > Hours

Have a good reason
NOT to use Native

Be consistent with your users
Save development time
Be a professional when it comes to Android

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?
Structure, Skeleton, Blueprints
#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

Take it from here...

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 / Using Colors

Saving Product Time

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

#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
#1 - UX/UI Design / Sketch

Question
#1 - UX/UI Design / Design Beyond

What happens when you
turn the screen?

Not User Friendly!

Adding Product Time

During Development

Pushing deadlines
Our Product’s release delay
Changes in code

How does it look like when
there are no images yet?

Guess there’s nothing interesting here...

First Impression is everything

#1 - UX/UI Design / Design Beyond / Material.io

Responsive design

Android Devices

Use MDPI (360 x 640)
aka Baseline Screen

How does it look
like on a tablet?

One App to rule them all

Same experience for all users
Refine the product as a whole
Leverage the edge cases

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

New kid on the block

On demand Guidelines

Guidelines tools
Avocode Zeplin Inspect

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

#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

Independence Developers
Readable Guidelines
Style Guide As a Shield of Our Product
#2 - Handoff / Guidelines & Style Guide

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 / 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

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

Open Source Libraries
Templates of code for a specific purpose

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

#3 - Development

Download assets from Zeplin
#3 - Development / Android Studio / Add drawables

Android Studio
#3 - Development / Android Studio

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

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

Normal _normal
Pressed _pressed
Focused _focused
Disabled _disabled
Selected _selected
Selector states

Organizing Folders
#3 - Development / Android Studio / Folders

One drawable must have the
same file name
for all screen densities

Naming a disable ”like” Icon?

ico_like_disable

Use Style from Zeplin

Zeplin
#2 - Handoff / Guidelines / Zeplin
-->
Android Studio

#3 - Development/ Style guide / Ready made code

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?

Any more
edge cases in mind?

Go over it and
Understand
#4 - Check Up / Developers

Share your
Deadlines

Offer faster
Replacements

#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!

Workflow
✓ Kick Off
✓ UX/UI Design
✓ Handoff to Dev
✓ Development
✓ Check up

Where can we test the workflow?

Refer to us as an Eco-System
Best Tips

Your Time is precious
Best Tips

Smile coming in, Smile going out
Best Tips

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

More Related Content

What's hot

Viewers also liked

Similar to Working better together designers &amp; developers

More from Vitali Pekelis

Recently uploaded

Working better together designers &amp; developers

Working better together designers & developers

Similar to Working better together designers & developers

Working better together designers & developers