Essential tools and tips for an effective design workflow

Talk I've hold with my collegue Andrea Lucibello @Droidcon Italy 2016

Transcript

1. ESSENTIAL TOOLS AND TIPS
   for an effective design workflow
   

   View Slide

2. You talkin’ to me?
   

   View Slide

3. Being a Team is cool!
   

   View Slide

4. Where do I start? Where do I begin?
   

   View Slide

5. My way
   

   View Slide

6. The workflow: 1/4
   

   View Slide

7. The workflow: 2/4
   

   View Slide

8. The workflow: 3/4
   

   View Slide

9. The workflow: 4/4
   

   View Slide

10. 2 years ago…
    

    View Slide

11. Start with pencil and paper
    

    View Slide

12. Wireframing with illustrator
    

    View Slide

13. Info Servizi Listino
    

    View Slide

14. Final UI with Photoshop
    

    View Slide

15. Photoshop was not meant to design UI
    

    View Slide

16. God bless this guy
    

    View Slide

17. Myriad Pro 30sp #2083A5
    60dp
    60dp
    Blueprint with illustrator
    

    View Slide

18. 190dp
    72dp
    icn-favourite
    icn-favourite-active
    1px #cccccc
    Font Awesome 22sp #ffd200
    Lato Bold 18sp #353535
    Lato Regular16sp #717171
    16dp 16dp
    

    View Slide

19. Tell me it’s over!!
    

    View Slide

20. View Slide

21. ALWAYS start with pencil and paper + use Marvel
    

    View Slide

22. A free, simple and useful prototyping tool
    

    View Slide

23. An awesome design tool!
    

    View Slide

24. Sketch (exposed)
    • Intuitive
    (you can learn it in a day or even less)
    • Design Organization
    (with pages and flexibles multi-artboards)
    • Eyedrop
    (the most powerful you’ve ever used)
    • Performances
    (few crashes, constant updates and bug solving)
    • Symbols & Styles
    (and many others productive features)
    • Plenty of useful shorcuts
    (eg. copy-paste object style/properties)
    

    View Slide

25. Sketch (exposed)
    

    View Slide

26. Sketch (plugins)
    • Sketch App Rocks
    (sketchapp.rocks)
    • Sketch Toolbox (plugin of plugins)
    (sketchtoolbox.com/)
    • Sketch Android Assets
    (github.com/zmalltalker/sketch-android-assets)
    • Sketch plugin scripts
    (github.com/makzan/Sketch-Plugin-Scripts)
    • Relabel Button
    (github.com/kenmoore/sketch-relabel-button)
    • Craft
    (invisionapp.com/craft)
    

    View Slide

27. Sketch (integrations)
    • Invisionapp
    (invisionapp.com)
    • Zeplin (a good buddy so far)
    (zeplin.io)
    • Symply (what you were waiting for dude!)
    (sympli.io)
    • Slack (Nerd-proof communication)
    (slack.com)
    • Marvelapp
    (marvelapp.com)
    • Prott
    (prottapp.com)
    + more & more
    

    View Slide

28. Looks like a big breakthrough
    

    View Slide

29. Android Studio Plugin
    

    View Slide

30. What if I can’t use Sketch
    • Avocode
    (avocode.com)
    • Photoshop CC15
    (‘Design Space’ mode + CC sharing)
    

    View Slide

31. View Slide

32. Tips & Tricks
    

    View Slide

33. Draw/Design in MDPI
    

    View Slide

34. Always test on real screens
    

    View Slide

35. Abcdefghihijklmnopqrstuvwxyz
    Abcdefghihijklmnopqrstuvwxyz
    Hint text
    Hint text
    Use resources and stencils from the web
    

    View Slide

36. Follow good designers on G+ (or other socials)
    

    View Slide

37. Stay up to date
    

    View Slide

38. Follow the guidelines
    

    View Slide

39. Questions?
    

    View Slide

40. Thanks
    for watching!
    

    View Slide

41. View Slide

42. Gabriele Marangon
    UI / Interaction Designer@synesthesia
    +GabrieleMarangon gabriele.marangon@synesthesia.it
    

    View Slide

43. Andrea Lucibello
    Android developer@synesthesia
    +AndreaLucibello andrea.lucibello@synesthesia.it
    

    View Slide

44. Enjoy your day at Droidcon Italy!
    

    View Slide