How designers can create interactive prototypes with Illustrator(tomgermeau.com)

over 6 years ago from Tom Germeau, Product Designer at Chartbeat

  • Ray LuongRay Luong, over 6 years ago

    This is awesome. It's the best thing I've seen for prototyping using AI. My issues with it though:

    To me, it's a bit overkill for what you're doing in the example. - create a logical hierarchy in AI - name each element meaningfully - create js functions in html doc for basic ix like hovering

    Illustrator is a great tool for illustrating artwork and precise visual design, but it doesn't work very well yet for prototyping. There are faster and more efficient (i.e. code reuse, more control over animations and ix) ways for prototyping. Using HTML + CSS, you can easily make this same prototype in ~15 minutes and use the code for production. Quartz Composer has a bit of a learning curve, but once you get the hang of it, it gives you more control over animations. I'm currently using a visual tool called Antetype, which does not have transition ability, but the basic interactions like hovering or clicking are easy to build. It's like an advanced Omnigraffle.

    Also, I miss Fireworks.

    I'm looking forward to the day when we get the perfect tool for prototyping...

    0 points
    • Ryan Hicks, over 6 years ago

      While I agree with most of your reply. I think the article was meant for people who are not that advanced in coding. For instance myself. I most certainly could not prototype that in 15 minutes unfortunately, and it would not be production quality at the slightest. I think it's a great way for designers with very basic knowledge of coding to get some better interactivity in prototyping done with their files.

      0 points
    • Tom GermeauTom Germeau, over 6 years ago

      I agree with Ryan H.

      I think it has a lot to do with which tools you're most comfortable with. I always start wireframing in Illustrator. There might be simpler tools for it, but I like that I can take my wireframes when they're done and actually apply visual styles. Illustrator is powerful enough for that. Now with this process, I can take it one step further and create an impressive demo for clients or colleagues, without having to leave my Illustrator workflow. My point is that it saves me a lot of time because I'm able to iterate on ideas in the same document from wireframe to interactive prototype.

      0 points