working better together designers & developers

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:

https://www.facebook.com/groups/android.academy.ils/



http://www.meetup.com/TLV-Android-Academy/

http://www.meetup.com/TLV-Android-Academy/

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

https://goo.gl/forms/STkeqW9fHGI1JAb52

Shahar AvigezerAvigezerit.com

Hello Heart

Android Academy

She Codes;

http://avigezerit.com/

http://avigezerit.com/

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

© Chris O’Sullivan


Segmented controls



Button styles



TypographyRoboto 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



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

#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

#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


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

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

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

https://www.sketchapp.com

https://zeplin.io/

http://www.adobe.com/products/photoshop.html

http://www.adobe.com/products/illustrator.html

https://avocode.com/

https://support.invisionapp.com/hc/en-us/articles/207950906-Introduction-to-Inspect

https://frontify.com/

http://principleformac.com/

https://www.invisionapp.com/

https://www.flinto.com/

https://framer.com/

https://github.com/

https://developer.android.com/studio/index.html

https://framer.com/

https://material.io/

https://www.materialpalette.com/

https://material.io/

http://littlebigdetails.com/

https://dribbble.com/

http://littlebigdetails.com/

https://webdesign.tutsplus.com/articles/a-tale-of-two-platforms-designing-for-both-android-and-ios--cms-23616

http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/#naming-conventions-for-drawables

https://webdesign.tutsplus.com/articles/a-tale-of-two-platforms-designing-for-both-android-and-ios--cms-23616

Designer & Developers,Working Better Together

Shahar Avigezer

#4