How designers can create interactive prototypes with Illustrator | Hacker News Reader

How designers can create interactive prototypes with Illustrator

tomgermeau.com

22 pointstomger17 comments

Open articleView on HN

Nice tutorial! You can also check the one I wrote about creating interactive prototypes using Sketch and d3.js here:

http://snips.net/blog/posts/2014/01-10-fast-interactive_prot...

Thanks for this, very comprehensive and clear!

This is a fantastic blog post. You should be proud of yourself, and write some more!

Thanks!

I've been wondering lately: What is the optimal workflow for creating wireframes in a video format? Not interactive wireframes, but a video that looks like a screen recording of a real use case. I find this format can be very helpful for clients for the following reasons:

- Clients don't always know what to do with an interactive wireframe. They don't understand the use cases they're supposed to simulate. So they just click around randomly.

- Interactive wireframes are necessarily unable to mimic many of the most important kinds of interaction. For example, entering text, clicking submit, and having the text appear in the middle of a sorted list is infeasible in a wireframe.

- Videos show a use case in a very concrete, intuitive way. Very little is left to the imagination.

- A video should be able to represent even very difficult-to-program functionality. For example, an advanced conversation bot is exceedingly hard to program, yet trivial to mock up in a video. (Just write a script for the dialogue.)

Does anyone recommend any tools or workflows for creating these sorts of videos?

Check Quartz Composer and Origami -- also check http://snips.net/blog/posts/2014/01-10-fast-interactive_prot... for a list of various options

You can always just do a screencast where you narrate the use case. That way you can give a nice introduction, explain things along the way, and provide a wrap-up.

As you said, having a quick 3-5 minute video along with a boring PDF can go a long way to getting people to actually look, understand and care about what you're working on. Videos can easily be sent around and re-watched, plus even executed have time for them (unlike long PDFs).

There are a ton of options for this. Honestly, you can keep it very simple and use something like keynote to animate assets and still get great results (considering time invested). For more complex needs you can use photoshop+after effects to animate.

Not quite as fancy, but you can get really far with a prototype with Powerpoint which many people already have.

Click events, hotlinks to different parts of the slide deck, etc. You can even have elements move around or fade in fade out on click. Most of the simpler drawing tools have analogues in HTML or CSS. You can even set the slide size to something nonstandard to simulate phones or tablets.

Adobe Flash is way more suited for this sorta stuff.

- Its UI is simpler and more intuitive

- You have frames in addition to layers so you can organize your designs even better

- You can animate stuff (real nice for mobile app mockups)

- It's got ActionScript incase you want to do something mindblowing

As they say, Flash for web and graphic design, Photoshop for photography, and Illustrator for fine art.

Adobe Flash is only suited as fuel to burn in hell

He's a flash developer trying to stay relevant

This is the road to hell, because as everyone with an ounce of experience knows at some point someone sees the prototype and launches it, at which point you have to maintain it.

It's best to build prototypes out of the actual things you intend to use, even badly and in a hurry, rather than through some completely alternative means for that reason.

i'm pretty sure you'd be reacting differently if the article was titled: easy html5 animated svgs using illustrator and jquery.

which is basically what this is proposing. i think you can be down on this as much as you want, but from my perspective, it's actually providing designers a much needed 'in' to the world of using jQuery in a productive manner. and, it requires shockingly few dependencies; you don't need to understand or spend time massaging some templating language, or less/sass, or anything other than learning jQuery events and animations.

and honestly, the more people we have that feel comfortable proposing ui changes that actually know what libraries like jQuery are capable, the better. hell, even if a novice designer only became comfortable with easing functions and timings as a result of this, it would be fine by me.

your concern that this will get hastily productized i think misses the reality that most people can't (yet) abandon ie8 which still doesn't support svg and for browsers that do, my experience is that there are still gaps between some of the svg illustrator makes and the effects that browsers support. still, for prototypes, i'd take this over a powerpoint or aftereffects movie any day.

Thank you for this post, i been telling everyone to stop using PhotoShop for their designs and move for something more portable format like Ai or Inkscape.

You could go a lot further with Fireworks in terms of prototyping an app or a website. Neither AI nor Photoshop are good prototyping tools. But hey,Adobe never liked that product, too usefull and way cheaper than AI or Photoshop...

Forgive me for saying this, but Fireworks is nothing more than a modified version of Flash with a bunch of useless functions and a huge library of ugly stock graphics.

Reply on news.ycombinator.com