Designing Beyond Photoshop

This slide deck is from a talk I gave at InfoCamp 2013 in Seattle. The focus of my talk was on prototyping tools for interaction design. These are the tools mentioned in my presentation: Bootstrap, Foundation, Ratchet, jQuery, Google Web Designer, Framer, Adobe After Effects, and Quartz Composer.

Transcript

1. Designing Beyond Photoshop By Phannipha Arunyaangkul (Eng)
2. I <3 Photoshop
3. http://youtu.be/Lep_DSmSRwE?t=45s
4. How would you communicate your Facebook chat bubble design (Photoshop mock) to engineers?
6. Facebook Home is completely beyond the abilities of Photoshop as a design tool. How can we talk about physics- based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks? (Hint: we can’t.) Julie Zhou Product Design Director at Facebook
7. Move beyond static mocks
8. 1) Traditional prototyping apps 2) HTML + CSS + JavaScript 3) Bonus (tools I want to learn)
9. Traditional Prototyping Apps
11. – Quick and easy – Limited functionality
12. HTML + CSS + JS
13. – Relatively quick and easy – Abundant resources
14. 1) Learning resources 2) Front-end frameworks
15. Learning resources
19. Front-end Framework
24. Bootstrap
30. Ratchet http://maker.github.io/ratchet/
31. Bonus
32. Google Web Designer helps you create engaging, interactive HTML5-based designs and motion graphics that can run on any device. https://www.google.com/webdesigner/
33. Framer is a prototyping tool for animation and interaction on desktop and mobile. http://www.framerjs.com http://www.easings.net
34. Adobe After Effects is a digital motion graphics and visual effects software. http://dribbble.com/shots/1187158-iOS-7-animation-ae-giveaway? list=searches&tag=after_effects
35. Facebook Home is completely beyond the abilities of Photoshop as a design tool. How can we talk about physics- based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks? (Hint: we can’t.) Julie Zhou Product Design Director at Facebook
36. Quartz Composer is a node-based visual programming language for processing and rendering graphical data.
37. In human language: A visual prototyping tool that lets you create hi-fidelity demos that look and feel like exactly what you want the end product to be. – Julie Zhou http://dribbble.com/shots/1161298-Hours-Animation-Quartz- Composer?list=searches&tag=quartz_composer
38. Physical Products – Arduino – Raspberry PI – 3D Printing
39. Why do we want to move beyond static mocks?
40. – tell a story – get better feedback
41. Don’t let your design platform limit your creativity
42. What are your favorite interaction design tools?
43. Thank You Let’s chat hello@phannipha.com
44. Resources shared by the audience
45. Tools: – proty – processing.js – tumult hype – Web Browsers: view source code / inspect element – IE: download webpage complete – Github – Coffeescript – Angular.js – 960 grids – Keynote (Keynotopia) – World Wide Web Consortium (W3C – not related) – Webplatform.org – Mozilla Developer Network – Webmonkey
46. Hosting: – GitHub – NearlyFreeSpeech – BlueHost – HostGator