working better together designers & developers

Designer & Developers,Working Better Together

Shahar Avigezer

19.02.17CampusGuest //

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 LeadFigure8

Yossi Segev

Android DeveloperColu

Shahar Avigezer

Android DeveloperHello 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 AvigezerAvigezerit.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

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 willbe tools

Finding Solution

Not just HOW to use ZeplinBut 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

Describe your visual vision

Set Technical Boundaries

#0 - Kick Off Meeting / Developers

Explain how things work in Android

Own theAndroid 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

Segmented controls

Button styles

TypographyRoboto San Francisco

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

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

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

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

Today’s LectureUX + UI Design

#1 - UX/UI Design

UX/UI Design tools

Photoshop Sketch Illustrator

#1 - UX/UI Design

Mac LicensedMac + 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...

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

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

#1 - UX/UI Design / Sketch

Any Questions?

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

First Impression is everything

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

Responsive design

Android Devices#1 - UX/UI Design / Design Beyond

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

Any Questions?

Workflow

✓ Kick Off

✓ UX/UI Design

● Handoff to Dev

● Development

● Check up

Guidelines vs Style Guide

#2 - Handoff

Guidelinesaka

Specaka

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

Zeplin

#2 - Handoff / Guidelines / Download icons into Folders

#2 - Handoff / Guidelines / / Sketch /Export icons into Folders

Style Guideaka

Visual Style Guideaka

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

Independence Developers

Readable Guidelines

Style Guide As a Shield of Our Product

#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

It’s that easy!

Think Outside The Box

#2 - Handoff / Animations / Extra Tip

GitHub

#2 - Handoff / Animations / Github

GithubWebsite for developers to upload codeVersion control when working together

World’s biggest Open Source code

Open Source LibrariesTemplates 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

#2 - Handoff / Guidelines / Export all icons

Error: Invalid file name: must contain only lowercase letters and digits ([a-z0-9_.])

#3 - Development / Android Studio / Add drawables Error

Always Remember Gandalf...

Mandatory:a - z0 - 9x_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

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

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?

Any more edge cases in mind?

Go over it and Understand

#4 - Check Up / Developers

Share yourDeadlines

Offer fasterReplacements

#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

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

working better together designers & developers

Software

ios 7 - this changes everything for designers and developers

designers + developers, designers vs. developers

14 firefox extensions for developers & designers!

what developers need designers to know about wordpress

optimized persuasion: a tool for designers and developers

designers & developers sitting in a tree (web09)

top magento designers and developers in california

developers + designers: a mutalistic relationship - from...

bridging the gap between designers and developers at...

seo guide for web designers and developers

developers vs designers - o'reilly media - technology books

web designers & developers - vancouver public...

ink for designers and developers

plant designers developers -...

developers are from mars, designers are from venus - d2wc

what developers and designers don't get about each other

hiring and working with website designers and developers

legal considerations for web designers and developers

designing for mobile: ux for designers and developers

interviewing peripheral display designers and developers