

How designers can create interactive prototypes with Illustrator - tomger
http://tomgermeau.com/2014/02/how-designers-can-create-interactive-prototypes-with-illustrator/

======
oulipo
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...](http://snips.net/blog/posts/2014/01-10-fast-
interactive_prototyping_with_d3_js.html)

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

~~~
oulipo
Thanks!

------
jarrett
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?

~~~
oulipo
Check Quartz Composer and Origami -- also check
[http://snips.net/blog/posts/2014/01-10-fast-
interactive_prot...](http://snips.net/blog/posts/2014/01-10-fast-
interactive_prototyping_with_d3_js.html) for a list of various options

------
bane
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.

------
hiphopyo
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.

~~~
dudus
Adobe Flash is only suited as fuel to burn in hell

~~~
MPetitt
He's a flash developer trying to stay relevant

------
fidotron
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.

~~~
nsfmc
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.

------
jbeja
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.

~~~
camus2
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...

~~~
hiphopyo
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.

