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
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!!
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)
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!
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!