Essential tools and tips for an effective design workflow

Transcript

1. ESSENTIAL TOOLS AND TIPS for an effective design workflow

2. You talkin’ to me?

3. Being a Team is cool!

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

5. My way

6. The workflow: 1/4

7. The workflow: 2/4

8. The workflow: 3/4

9. The workflow: 4/4

10. 2 years ago…

11. Start with pencil and paper

12. Wireframing with illustrator

13. Info Servizi Listino

14. Final UI with Photoshop

15. Photoshop was not meant to design UI

16. God bless this guy

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

18. 190dp 72dp icn-favourite icn-favourite-active 1px #cccccc Font Awesome 22sp #ffd200

    Lato Bold 18sp #353535 Lato Regular16sp #717171 16dp 16dp

19. Tell me it’s over!!

20. None

21. ALWAYS start with pencil and paper + use Marvel

22. A free, simple and useful prototyping tool

23. An awesome design tool!

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)

25. Sketch (exposed)

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)

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

28. Looks like a big breakthrough

29. Android Studio Plugin

30. What if I can’t use Sketch • Avocode (avocode.com) •

    Photoshop CC15 (‘Design Space’ mode + CC sharing)
31. None

32. Tips & Tricks

33. Draw/Design in MDPI

34. Always test on real screens

35. Abcdefghihijklmnopqrstuvwxyz Abcdefghihijklmnopqrstuvwxyz Hint text Hint text Use resources and stencils

    from the web

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

37. Stay up to date

38. Follow the guidelines

39. Questions?

40. Thanks for watching!

41. None

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

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

44. Enjoy your day at Droidcon Italy!