Working with designs: make love not war ☮

If you can't tap on the link inside slides, please open as pdf (button on the right). Unfortunately, videos are not playing in pdf :))
-------------------
-------------------
My talk on Frameworks Days ITSaturday meetup.

As the developer, I don’t want to be frustrated when I need to convert designs into assets.

We will talk about:
* lots of tools and ways how to save own time
* how to communicate with designer, and
* if it’s okay to change designs on our own

Transcript

1. Working with designs: make not ⚔ @vixentael
2. #itsat @vixentael TDD BDD DDD ADD FDD http://scottberkun.com/2007/ asshole-driven-development/ Quiz
3. Test Behavior Assert Feature Quiz DDD #itsat @vixentael
4. Design Driven Development #itsat @vixentael
5. Design defines: app architecture data models network flow backend logic #itsat @vixentael
6. Static Picture vs Dynamic Design #itsat @vixentael
7. Static Picture vs Dynamic Design looks nice shows the flow of the app scales for real data #itsat @vixentael
8. Rendering #itsat @vixentael
9. Rendering http://www.paintcodeapp.com/news/iphone-6-screens- demystified #itsat @vixentael
10. 1 pixel separators var onePixelLine = 1.0 one point line one point line #itsat @vixentael
11. 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
12. 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
13. Data-driven does design scale to fit real data? #itsat @vixentael
14. 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
15. 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/
16. Flow of the app
17. One screen #itsat @vixentael
18. One screen just one screen so easy much wow very simple such success just list #itsat @vixentael
19. Empty #itsat @vixentael
20. Empty http://emptystat.es #itsat @vixentael
21. FullScreen Loading #itsat @vixentael
22. FullScreen Failed #itsat @vixentael
23. Getting new data #itsat @vixentael updating.. updating.. error error
24. Load more data #itsat @vixentael error error fetching prev data fetching prev data
25. One screen, 8 states #itsat @vixentael
26. 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
27. Tools #itsat @vixentael
28. #itsat @vixentael
29. Sketch #itsat @vixentael
30. Making icon #itsat @vixentael
31. Live drawing #itsat @vixentael
32. Sketch for Devs #itsat @vixentael super easy quick export vector http://www.raywenderlich.com/ 117609/sketch-indie-developers tutorial
33. #itsat @vixentael
34. Zeplin #itsat @vixentael
35. Export #itsat @vixentael
36. Zeplin for Devs #itsat @vixentael even more easy exports ‘exportable’ web-version for everyone color board
37. #itsat @vixentael
38. Invision #itsat @vixentael
39. Invision for Devs #itsat @vixentael working prototypes! discussing sharing assets
40. Use them! #itsat @vixentael + + =
41. 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
42. Ways #itsat @vixentael
43. PNG vs PDF #itsat @vixentael
44. 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
45. #itsat @vixentael
46. PaintCode #itsat @vixentael
47. PaintCode #itsat @vixentael
48. PaintCode #itsat @vixentael no images! all in code! complex animations* …but code is
49. #itsat @vixentael
50. Preview Xcode #itsat @vixentael see every screen at once
51. 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
52. Wind of change #itsat @vixentael or if designs are worse than you expected
53. What’s wrong? #itsat @vixentael
54. Fix #itsat @vixentael use one of colors!
55. #itsat @vixentael What’s wrong?
56. What’s wrong? #itsat @vixentael
57. Fixes #itsat @vixentael
58. Advice for Devs #itsat @vixentael speak with designers share ownership of UI/UX don’t be afraid to fix know guidelines! use placeholders
59. The last slide @vixentael
60. More to Read #itsat @vixentael watch again, find every link and read it!