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

Essential tools and tips for an effective desig...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Gabriele Marangon Gabriele Marangon
May 03, 2016
Design
650
1

Essential tools and tips for an effective design workflow

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

Avatar for Gabriele Marangon

Gabriele Marangon

May 03, 2016

Other Decks in Design

See All in Design
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
440
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
11
5.2k
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
1
1.7k
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
520
富山デザイン勉強会_プレゼンテーション.pdf
Avatar for keita keita_yoshikawa
0
140
A Corrida Maluca - Comedy Storyboard
Avatar for Giovana Nicóli gioli
0
110
Design dependencies
Avatar for Teba_eleven teba_eleven
0
160
Kouseki | CREATIVE CLASS成果物
Avatar for Yurika Ishida yuri9911
0
170
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
190
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.5k
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
210
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
640

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
430
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
520

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

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

  44. Enjoy your day at Droidcon Italy!