44 ms·

How designers can create interactive prototypes with Illustrator

22 points by tomger 13y ago

deleted 13y ago
[deleted]
oulipo 13y ago
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_prototyping_with_d3_js.html http://snips.net/blog/posts/2014/01-10-fast-interactive_prot...
- jrnkntl 13y ago
  Thanks for this, very comprehensive and clear!
- mietek 13y ago
  This is a fantastic blog post. You should be proud of yourself, and write some more!
  - oulipo 13y ago
    Thanks!
- Haywain 13y ago
  This is really cool and super helpful, thanks for linking. I'll look forward to reading more from you... I hope. :) You may be interested to know that I couldn't get it to work in Firefox (although I'm not familiar with d3.js and it's compatability or whatnot).
fidotron 13y ago
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 13y ago
  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 13y ago
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 13y ago
  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 13y ago
    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.
bane 13y ago
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 13y ago
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 13y ago
  Adobe Flash is only suited as fuel to burn in hell
  - MPetitt 13y ago
    He's a flash developer trying to stay relevant
jarrett 13y ago
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 13y ago
  Check Quartz Composer and Origami -- also check http://snips.net/blog/posts/2014/01-10-fast-interactive_prototyping_with_d3_js.html http://snips.net/blog/posts/2014/01-10-fast-interactive_prot... for a list of various options
- GBKS 13y ago
  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).
- jcomis 13y ago
  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.

22 points by tomger 13y ago

deleted 13y ago

[deleted]

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_prototyping_with_d3_js.html http://snips.net/blog/posts/2014/01-10-fast-interactive_prot...

jrnkntl 13y ago
Thanks for this, very comprehensive and clear!
mietek 13y ago
This is a fantastic blog post. You should be proud of yourself, and write some more!
- oulipo 13y ago
  Thanks!
Haywain 13y ago
This is really cool and super helpful, thanks for linking. I'll look forward to reading more from you... I hope. :) You may be interested to know that I couldn't get it to work in Firefox (although I'm not familiar with d3.js and it's compatability or whatnot).

fidotron 13y ago

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 13y ago
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 13y ago

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 13y ago
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 13y ago
  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.

bane 13y ago

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 13y ago

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 13y ago
Adobe Flash is only suited as fuel to burn in hell
- MPetitt 13y ago
  He's a flash developer trying to stay relevant

jarrett 13y ago

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 13y ago
Check Quartz Composer and Origami -- also check http://snips.net/blog/posts/2014/01-10-fast-interactive_prototyping_with_d3_js.html http://snips.net/blog/posts/2014/01-10-fast-interactive_prot... for a list of various options
GBKS 13y ago
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).
jcomis 13y ago
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.