19 September 2012

Inkscape for UX design

I know that suggesting an open source tool like Inkscape for a design where Illustrator is thoroughly embedded comes across somewhat like recommending a typewriter to a blogger for writing but having used it lately, I'm quite impressed.

This is a part of a series about UX design with open source tools but just a quick overview rather than a detailed review. There are many reviews out there so I'm just going to concentrate upon the things I found that might be of interest to other users.

Inkscape's interface is very different from Illustrator, and for many this is a failure. Despite us often suggesting new ways to do things, we UX designers can sometimes be stuck-in-the-mud when it comes to changing our own tools or workflows. Given that my first experience with vector graphics drawing programs was DrawPerfect (on DOS no less!), I can some experience with different interfaces so I'm not so phased by Inkscape.

What I did find useful was being able to export to SVG which could be made (with a little JQuery coding) quite interactive. I found that I was able to design a graphic, export it to SVG (Inkscape's native format) and show it directly in a web page. I could also add interactivity with hyperlinks, mouse overs and the like which made it not just a good tool for designing mockups, but also a good way to develop both interactive prototypes and even finished pages. One I did required maybe 20 lines of html code and a series of if... else if... statements to show something when a link was clicked.

Well, maybe not so much finished pages - layouts were distinctly un-fluid and un-responsive-designish; but they certainly worked well enough to display in the wild.

There are a few rough edges but it's still a surprisingly powerful little program. I'm sure that Illustrator priests will miss various features but I really like the idea of an open source alternative that uses an open web standard graphics format that can be shown directly in a browser and made as interactive as possible with little code.
Post a Comment