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

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

Gabriele Marangon

May 03, 2016
Tweet

Other Decks in Design

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 [email protected]

    View Slide

  43. Andrea Lucibello
    Android developer@synesthesia
    +AndreaLucibello [email protected]

    View Slide

  44. Enjoy your day at Droidcon Italy!

    View Slide