Image may be NSFW.
Clik here to view.
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.
Prototyping Tools
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.
HTML, CSS and Javascript are relatively quick and easy. To execute this, you need to learn some. Here’s a few good resources: Code School, Codecademy and Tuts+. And better too, front-end frameworks to get you started fast: Bootstrap, Foundation, and my new favorite (favorite because it is specifically for prototyping iPhone apps) Ratchet. Google Web Designer is free. It cannot import styles, but it generates readable code. Framer uses PSD layers. Its top feature (in my opinion) is the animation. I didn’t know this, but apparently you can just tell what kind of rate you want your animation to go and there’s a library with the math and stuff so you don’t need to know the formula. Just the name. Find it at Easing Functions Cheat Sheet.
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
