What to use for rapidly generating HTML prototypes from concept model diagrams to test interactive search.

11 Nov 2008 - 10:44pm
2 years ago
4 replies
2543 reads
Mike Long

Anyone know of a tool that can generate static, linked html pages from
a concept model diagram? The tool needs to be a concept model diagram
creation tool that generates individual html pages that are linked
together. The goal being that if you were to reorganize the concept
model diagram, the tool can regenerate html pages with the new links.
This is needed for rapidly creating HTML prototypes in order to test
interactive search.


- Michael


12 Nov 2008 - 7:47pm
Mike Long

I wound up using Inspiration 8 of all things. I am able to organize
content in a concept diagram or outline format using drag and drop
interactions, and then export to html files that link together. It
has been very useful so far to play with taxonomies, content
hierarchies, and preliminary navigation paradigms. The HTML it
generates is very basic and will be used to move forward with
navigation prototypes.


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org

12 Nov 2008 - 8:21pm
brandon applefield

axure would do the trick, 30 days free trial, www.axure.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org

12 Nov 2008 - 8:50pm
Bonnie E. John

I believe CogTool can do what you want.

Although CogTool started life as a tool for making predictions of
skilled behavior on interfaces, it has evolved into a rapid prototyping
tool that generates HTML and, oh, BTW, gives you predictions of skilled
execution time at a touch of a button.

To make your conceptual models, you would have two options.

1. Make a storyboard directly in CogTool, using our widget palette
(including some really easy tools for making hierarchical menus,
context menus, radio button sets, etc.) and connecting the pages
simply by drawing transitions from widgets to other pages. This
storyboarding technique was inspired by Landay's DENIM.
2. Sketch your conceptual pages by hand on paper or whiteboard and
scan them in or take digital pictures of them and import them into
CogTool. Then stick widgets on and draw the transitions in the

Either way, you just Export Design to HTML and your get the static pages
you want, all connected together.
Change the design, choose the Export to HTML menu item again, and
everything gets regenerated.

CogTool is free, open source, works on Mac and Windows (XP and Vista),
and can be downloaded from

And, oh, BTW, if you pay attention to choosing the widgets that actually
represent the content of your system, you will get predictions of
skilled execution time in case that might be an important metric in
addition to your user tests.

I have to admit that we have tested the storyboarding and cognitive
modeling portions of CogTool more than we have tested the HTML
generation, but if you find bugs and send reports to us, we have
programmers who can fix them pretty quickly.

If you like it, please let me know,
HCI Institute
Carnegie Mellon University

11 Nov 2013 - 8:50am

Hey Mike, Inspiration has showed up to be very useful when prototyping linked html pages. I've also used Bonnie's suggestion, CogTool and it is an amazing tool. Both works great, thanks for the tips!

-Dionisio Tolomei

Syndicate content Get the feed