Essential tools and tips for an effective design workflow

Essential tools and tips for an effective design workflow

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

9a1e158ba14c74173740025dd3dc673b?s=128

Gabriele Marangon

May 03, 2016
Tweet

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!