Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Working with designs: make love not war ☮

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

042b7c0e45c53de46667f07de2fb2614?s=128

vixentael

March 19, 2016
Tweet

More Decks by vixentael

Other Decks in Programming

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!