Prototyping For The Web February 11, 2010

Prototyping is an enjoyable and useful aspect of web design. It’s interesting. Having created a standardized workflow for interaction design at my previous place of work, I’ve gotten myself some insight into how to do it and what software to use. I love picking out software and trying new alternatives. It’s what keeps our minds educated and minty fresh, don’t you think?

Just now I’m watching a video podcast from Web Design TV (from the people of .net magazine). It’s episode 38 where Axure is introduced and demonstrated as a prototyping tool. Now, at the beginning of the podcast it’s mentioned that a big agency was wondering if the podcaster knew of a good prototyping tool, since they were currently using Adobe Illustrator. The podcaster goes on to bitch and moan about using Illustrator as a prototyping tool.

What I’m wondering is; why would you use Illustrator as a prototyping tool and who on earth would do that? It’s a design and illustration software’an excellent such’and just by looking at the website one can conclude that prototyping is far from any of its purposes. ???????Adobe???? Illustrator???? CS4 software is a comprehensive vector graphics environment???????.

Adobe offers another tool’Fireworks’which as you probably know has to sole purpose of allowing you to ???????rapidly prototype and design for the web???????. Now, if there’s a piece of software by a manufacturer that is truly meant for prototyping, why use another one that is meant for something completely different? Of course, designers are comfortable with Illustrator but that doesn’t mean it’s the right tool for every job. Anyway, you all know this. I’m just confused as to why ???????the makers of .net magazine??????? would mention Illustrator as an alternative (however bad) for prototyping and leave out Fireworks.

Axure, however, seems like a pretty neat alternative. While Fireworks does prototyping with PNG files, Axure does it with HTML which a lot of people seem to think is a great idea. Since I’m not a fan of software generated markup, this is not a selling point for me. I just see no use for it since I’ll write my own markup anyway.

What does matter for me is Mac compatibility and Axure is lacking it. It’s game over immediately’it’s no longer a valid alternative. So what tools do we Mac people have to satisfy our prototyping needs?

  • Adobe Fireworks ’ $299 ’ link
    As mentioned, this is a rather nice alternative. I personally enjoy using Adobe’s software and don’t mind putting my design eggs in the same basket. Adobe software is very commonly used so why not learn how to use it all? Sounds like a good idea to me.???????

  • OmniGraffle ’ $99.95 ’ link
    The Omni Group is one of my absolute favorite software companies. I use their OmniFocus GTD application extensively and have been using OmniGraffle for mockups and sitemaps a bunch of times. Very fast and easy to use, and not nearly as expensive as Adobe software. Very much recommended!

  • Mockingbird ’ Free ’ link
    You’ve got to live this piece of software. Mockingbird is a wire framing and prototyping web application. It’s snappy, smooth and runs entirely in your web browser without using Flash. Oh, I almost forgot; it’s free. From the look of it, it seems to be based on the very interesting Cappuccino Framework in which you can build fantastic web apps in Objective-J. Try it and love it.???????

  • HTML
    I’ve read interesting articles on the subject and while it doesn’t suit every project, I like the idea of rapid prototyping using markup and some simple CSS. When you’ve settled for a final design, if you do it properly, you’ll have a foundation to start building upon immediately. It may sound like it takes a lot of time but if you get used to it, I believe it’ll save you time in the long run. That is, if you’re proficient enough in HTML.

That’s just a few alternatives and there’s a lot more out there on the internets. If you’re interested, I suggest you do some Googling and see where that takes you. As I mentioned in the first paragraph, trying out alternatives is what keeps our minds fresh and young. If you really don’t like searching for new stuff to play with, then at least you have four excellent alternatives here to choose from.

But really, learn to love trying out new stuff. It’s good for you!

Mockingbird Prototyping Tool