Анастасия Войтова | working with designs: make love not war

Working with designs: make 💖 not ⚔

@vixentael

#itsat@vixentael

TDDBDD

DDDADD

FDD

http://scottberkun.com/2007/asshole-driven-development/

Quiz

Test

Behavior Assert

Feature

Quiz

DDD

#itsat@vixentael

Design Driven Development

#itsat@vixentael

Design defines: app architecture

data models

network flow

backend logic

#itsat@vixentael

Static Picture vs

Dynamic Design

#itsat@vixentael

Static Picture vs Dynamic Design

looks nice

shows the flow of the app

scales for real data

#itsat@vixentael

Rendering

#itsat@vixentael

Rendering

http://www.paintcodeapp.com/news/iphone-6-screens-demystified

#itsat@vixentael

1 pixel separators

var onePixelLine = 1.0

one point lineone point line

#itsat@vixentael

1 pixel separatorslet mainScreen = UIScreen.mainScreen() var onePixelLine = 1.0 / mainScreen.scale

https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/

DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html

@1x — 1.0@1x — 1.0@2x — 0.5@2x — 0.5

#itsat@vixentael

1 pixel separatorslet mainScreen = UIScreen.mainScreen() var onePixelLine = 1.0 / mainScreen.scale if mainScreen.respondsToSelector(Selector("nativeScale")) { onePixelLine = 1.0 / mainScreen.nativeScale }

@1x — 1.0@1x — 1.0@2x — 0.5@2x — 0.5@3x — 0.33@3x — 0.33

#itsat@vixentael

https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/

DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html

Data-drivendoes design scale to fit real data?

#itsat@vixentael

Data-drivengerman l10n?

#itsat@vixentael

http://nshipster.com/launch-arguments-and-environment-variables/

http://www.thedotpost.com/2016/01/roy-marmelstein-localization-is-hard

Links for designers

#itsat@vixentael

Designingat1x.TheIdealProductDesigner’sWorkflowhttps://medium.com/sketch-app-sources/designing-at-1x-33240842180c#.5ymv8uvkq

DesigningaLocalization-FriendlyUserInterfacehttps://www.transifex.com/blog/2015/localization-friendly-ui-design-part-1/

Flow of the app

One screen

#itsat@vixentael

One screenjust one screen

so easy

much wow

very simple

such success

just list

#itsat@vixentael

Empty

#itsat@vixentael

Empty

http://emptystat.es

#itsat@vixentael

FullScreen Loading

#itsat@vixentael

FullScreen Failed

#itsat@vixentael

Getting new data

#itsat@vixentael

updating..updating.. errorerror

Load more data

#itsat@vixentael

errorerrorfetching prev datafetching prev data

One screen, 8 states

#itsat@vixentael

Links for designers

#itsat@vixentael

UXDesigner’sNotes:DesigningFortheEmptyStateshttps://stanfy.com/blog/ux-designers-notes-designing-for-the-empty-states/

Whyemptystatesdeservemoredesigntimehttps://medium.com/@InVisionApp/why-empty-states-deserve-more-design-time-44b5adc7eb52#.izpqmr1d7

UXTip:ConsidertheEmptyStateshttp://webdesign.tutsplus.com/articles/ux-tip-consider-the-empty-states--cms-23692

Tools

#itsat@vixentael

#itsat@vixentael

Sketch

#itsat@vixentael

Making icon

#itsat@vixentael

Live drawing

#itsat@vixentael

Sketch for Devs

#itsat@vixentael

super easy

quick export

vector

http://www.raywenderlich.com/117609/sketch-indie-developers

tutorial

#itsat@vixentael

Zeplin

#itsat@vixentael

Export

#itsat@vixentael

Zeplin for Devs

#itsat@vixentael

even more easy

exports ‘exportable’

web-version for everyone

color board

#itsat@vixentael

Invision

#itsat@vixentael

Invision for Devs

#itsat@vixentael

working prototypes!

discussingsharing

assets

Use them!

#itsat@vixentael

+ +

=

💪 💪😼

Links for designers

#itsat@vixentael

Howdoyouensurethatthedevteamunderstandsthedesign?https://medium.com/swlh/how-do-you-ensure-that-the-dev-team-understands-the-design-b7043ea01cd8#.vwon69bmq

7TipsforSketchUsershttps://medium.com/@nnwoodman/7-tips-for-sketch-users-e09c27c7ce08#.nvphxansw

7ReasonsWhyIUseInVisionforRapidPrototypinghttps://medium.com/@mrjeremywells/7-reasons-why-i-use-invision-for-rapid-prototyping-ed1c33d5b86#.ia7j0oj5q

Ways

#itsat@vixentael

PNG vs PDF

#itsat@vixentael

PNG vs PDF

#itsat@vixentael

3 assets 1 asset

http://martiancraft.com/blog/2014/09/vector-

images-xcode6/

https://bjango.com/articles/idontusepdfs/

xcode renderingpixel perfect

okay for evrthg okay for glyphs

tricky export paramseasy export

#itsat@vixentael

PaintCode

#itsat@vixentael

PaintCode

#itsat@vixentael

PaintCode

#itsat@vixentael

no images!

all in code!complex

animations*

…but code is

#itsat@vixentael

Preview Xcode

#itsat@vixentael

see every screen at once

Xcode plugins

#itsat@vixentael

https://github.com/rickytan/RTImageAssets

https://github.com/kaphacius/IconMaker

RTImageAssetsgenerate@2x,@1ximagefrom@3ximageforyou,upscaleto@3xfrom@2x

IconMakergeneratesappiconsofallsizesfromlargeone

https://github.com/ksuther/KSImageNamed-Xcode

KSImageNamed-XcodeautocompletetheimageNamed:calls

Wind of change

#itsat@vixentael

or if designs are worse than you expected

What’s wrong?

#itsat@vixentael

Fix

#itsat@vixentael

use one of colors!

#itsat@vixentael

What’s wrong?

What’s wrong?

#itsat@vixentael

Fixes

#itsat@vixentael

Advice for Devs

#itsat@vixentael

speak with designers

share ownership of UI/UX

don’t be afraid to fix

know guidelines!

use placeholders

The last slide

@vixentael

More to Read

#itsat@vixentael

watch again, find every link and read it!