Working with designs: make love not war ☮

Slide 1

Slide 1 text

Working with designs: make not ⚔ @vixentael

Slide 2

Slide 2 text

#itsat @vixentael TDD BDD DDD ADD FDD http://scottberkun.com/2007/ asshole-driven-development/ Quiz

Slide 3

Slide 3 text

Test Behavior Assert Feature Quiz DDD #itsat @vixentael

Slide 4

Slide 4 text

Design Driven Development #itsat @vixentael

Slide 5

Slide 5 text

Design defines: app architecture data models network flow backend logic #itsat @vixentael

Slide 6

Slide 6 text

Static Picture vs Dynamic Design #itsat @vixentael

Slide 7

Slide 7 text

Static Picture vs Dynamic Design looks nice shows the flow of the app scales for real data #itsat @vixentael

Slide 8

Slide 8 text

Rendering #itsat @vixentael

Slide 9

Slide 9 text

Rendering http://www.paintcodeapp.com/news/iphone-6-screens- demystified #itsat @vixentael

Slide 10

Slide 10 text

1 pixel separators var onePixelLine = 1.0 one point line one point line #itsat @vixentael

Slide 11

Slide 11 text

1 pixel separators let 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

Slide 12

Slide 12 text

1 pixel separators let 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

Slide 13

Slide 13 text

Data-driven does design scale to fit real data? #itsat @vixentael

Slide 14

Slide 14 text

Data-driven german l10n? #itsat @vixentael http://nshipster.com/launch- arguments-and-environment-variables/ http://www.thedotpost.com/2016/01/ roy-marmelstein-localization-is-hard

Slide 15

Slide 15 text

Links for designers #itsat @vixentael ̣ Designing at 1x. The Ideal Product Designer’s Workflow https://medium.com/sketch-app-sources/designing-at-1x-33240842180c#. 5ymv8uvkq ̣ Designing a Localization-Friendly User Interface https://www.transifex.com/blog/2015/localization-friendly-ui-design- part-1/

Slide 16

Slide 16 text

Flow of the app

Slide 17

Slide 17 text

One screen #itsat @vixentael

Slide 18

Slide 18 text

One screen just one screen so easy much wow very simple such success just list #itsat @vixentael

Slide 19

Slide 19 text

Empty #itsat @vixentael

Slide 20

Slide 20 text

Empty http://emptystat.es #itsat @vixentael

Slide 21

Slide 21 text

FullScreen Loading #itsat @vixentael

Slide 22

Slide 22 text

FullScreen Failed #itsat @vixentael

Slide 23

Slide 23 text

Getting new data #itsat @vixentael updating.. updating.. error error

Slide 24

Slide 24 text

Load more data #itsat @vixentael error error fetching prev data fetching prev data

Slide 25

Slide 25 text

One screen, 8 states #itsat @vixentael

Slide 26

Slide 26 text

Links for designers #itsat @vixentael ̣ UX Designer’s Notes: Designing For the Empty States https://stanfy.com/blog/ux-designers-notes-designing-for-the-empty-states/ ̣ Why empty states deserve more design time https://medium.com/@InVisionApp/why-empty-states-deserve-more-design- time-44b5adc7eb52#.izpqmr1d7 ̣ UX Tip: Consider the Empty States http://webdesign.tutsplus.com/articles/ux-tip-consider-the-empty-states-- cms-23692

Slide 27

Slide 27 text

Tools #itsat @vixentael

Slide 28

Slide 28 text

#itsat @vixentael

Slide 29

Slide 29 text

Sketch #itsat @vixentael

Slide 30

Slide 30 text

Making icon #itsat @vixentael

Slide 31

Slide 31 text

Live drawing #itsat @vixentael

Slide 32

Slide 32 text

Sketch for Devs #itsat @vixentael super easy quick export vector http://www.raywenderlich.com/ 117609/sketch-indie-developers tutorial

Slide 33

Slide 33 text

#itsat @vixentael

Slide 34

Slide 34 text

Zeplin #itsat @vixentael

Slide 35

Slide 35 text

Export #itsat @vixentael

Slide 36

Slide 36 text

Zeplin for Devs #itsat @vixentael even more easy exports ‘exportable’ web-version for everyone color board

Slide 37

Slide 37 text

#itsat @vixentael

Slide 38

Slide 38 text

Invision #itsat @vixentael

Slide 39

Slide 39 text

Invision for Devs #itsat @vixentael working prototypes! discussing sharing assets

Slide 40

Slide 40 text

Use them! #itsat @vixentael + + =

Slide 41

Slide 41 text

Links for designers #itsat @vixentael ̣ How do you ensure that the dev team understands the design? https://medium.com/swlh/how-do-you-ensure-that-the-dev- team-understands-the-design-b7043ea01cd8#.vwon69bmq ̣ 7 Tips for Sketch Users https://medium.com/@nnwoodman/7-tips-for-sketch-users- e09c27c7ce08#.nvphxansw ̣ 7 Reasons Why I Use InVision for Rapid Prototyping https://medium.com/@mrjeremywells/7-reasons-why-i-use-invision-for-rapid- prototyping-ed1c33d5b86#.ia7j0oj5q

Slide 42

Slide 42 text

Ways #itsat @vixentael

Slide 43

Slide 43 text

PNG vs PDF #itsat @vixentael

Slide 44

Slide 44 text

PNG vs PDF #itsat @vixentael 3 assets 1 asset http://martiancraft.com/ blog/2014/09/vector- images-xcode6/ https://bjango.com/ articles/idontusepdfs/ xcode rendering pixel perfect okay for evrthg okay for glyphs tricky export params easy export

Slide 45

Slide 45 text

#itsat @vixentael

Slide 46

Slide 46 text

PaintCode #itsat @vixentael

Slide 47

Slide 47 text

PaintCode #itsat @vixentael

Slide 48

Slide 48 text

PaintCode #itsat @vixentael no images! all in code! complex animations* …but code is

Slide 49

Slide 49 text

#itsat @vixentael

Slide 50

Slide 50 text

Preview Xcode #itsat @vixentael see every screen at once

Slide 51

Slide 51 text

Xcode plugins #itsat @vixentael https://github.com/rickytan/RTImageAssets https://github.com/kaphacius/IconMaker RTImageAssets generate @2x, @1x image from @3x image for you, upscale to @3x from @2x IconMaker generates app icons of all sizes from large one https://github.com/ksuther/KSImageNamed-Xcode KSImageNamed-Xcode autocomplete the imageNamed: calls

Slide 52

Slide 52 text

Wind of change #itsat @vixentael or if designs are worse than you expected

Slide 53

Slide 53 text

What’s wrong? #itsat @vixentael

Slide 54

Slide 54 text

Fix #itsat @vixentael use one of colors!

Slide 55

Slide 55 text

#itsat @vixentael What’s wrong?

Slide 56

Slide 56 text

What’s wrong? #itsat @vixentael

Slide 57

Slide 57 text

Fixes #itsat @vixentael

Slide 58

Slide 58 text

Advice for Devs #itsat @vixentael speak with designers share ownership of UI/UX don’t be afraid to fix know guidelines! use placeholders