Phannipha Arunyaangkul, UX Designer in Seattle talked at InfoCamp 2013 about how Photoshop is a pretty rudimentary tool when it comes to app prototyping.
UX tools include Photoshop and wireframing. But, interactions aren’t static. Facebook Home features a chat bubble unlike anything previous.
“…something like 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.)”
via Kevin Finlayson – Animation in UI Design.
Apps like Axure and ProtoShare are quick and easy but have limited functionality. Apple officially uses Quartz Composer, but it has a steep learning curve.
After Effects. Um no? After Effects is not really made for prototyping, or it would have some sweet presets. There’s probably a library of those floating around the internet somewhere. I wouldn’t recommend After Effects unless you’re really comfortable with a timeline scrubber. I always feel like the timing is too fast or too slow, but there’s no rhyme to it. It takes some getting used to. My prototypes look all janky and don’t align well. And states are too much trouble in comparison to the few lines of code it takes for a link to have multiple states, or what have you. But, on other merits, I would say it’s not helpful. With a coded prototype, you can pass it off to your developer and they will thank you for having websafe colors, and animation timing with code like this “webkit-transition: all 1s ease-in-out.”
Stay curious. If you want to see what a website’s doing, check under the hood using your browser’s view source. If you’re really ambitious, use Save As and download the complete web page. Sometimes, what you save is a frozen version of the website, so check the states. And with code, sometimes it’s not that easy to decipher. Other resources include GitHub, CoffeeScript, Tumult Hype (doesn’t import styles), Webmonkey from WIRED, and Apple’s Keynote has a free limited library of protyping stuff at Keynotopia.
[…] to InfoCamp 2013 where Phannipha Arunyaangkul, UX Designer in Seattle talked about different ways to prototype. That’s when I found out about Ratchet, a tool specifically for html app […]