[Sigia-l] How do you make HTML wireframes

[Tito Sierra]

I use OmniGraffle (Mac OS X) for building wireframes, and I'm very  
happy with it.  It is similar in nature to Visio (drag and drop  
objects), but a bit more polished in my opinion.  OmniGraffle 3 now  
comes standard on newer versions of OS X.

I started off with this basic stencil:
http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette/

Then I ended up creating my own library of wireframe stencils for  
commonly used objects.  So I have stencils for standard HTML form  
elements, headings/fonts, icons, navigation and annotation widgets.   
The use of standard objects saves time and provides consistency  
across projects.

Here is an example of a wireframe I recently produced in case you are  
curious:
http://www.lib.ncsu.edu/staff/tsierra/dbadvisor-wireframe.pdf

As for building "interactive" wireframes I do believe OmniGraffle  
supports this on some level.  You can associate an "action" that is  
triggered when you click on an object on a wireframe.   When you run  
the wireframe in presentation mode, clicking on the object will open  
an external URL, open a file, or link to another wireframe in your  
presentation.  In this way you can mimic basic navigation between  
wireframes.

Incidentally, there is a beta version of OmniGraffle 4 out now:
http://www.omnigroup.com/applications/omnigraffle/4/

Tito


------------------------------------------

Date: Wed, 7 Sep 2005 15:17:40 +0100
From: "David Natas" <natasdavid at btinternet.com>
Subject: Re: [Sigia-l] How do you make HTML wireframes
To: <Sigia-l at asis.org>
Message-ID: <004401c5b3b6$e87e2c90$0200a8c0 at DNatasLaptop>
Content-Type: text/plain; format=flowed; charset="iso-8859-1";
     reply-type=response

I have been looking at Axure since it was recommended a few posts  
back. It
strikes me that it is extremely useful in that it allows the creation of
interactive prototypes very quickly, and has the invaluable addition of
easy
to add annotations to pages and items within your document.

But i was less than impressed with the actual wireframe creation  
facilities
and process - it is simply a bit clunky - it has most of the  
functions that
i normally use in visio, but just seems a lot more crude, and doesnt  
run as
smoothly. It also has annoying little quirks like the fact that you  
cannot
immediately type into an object after selecting it - you have to double
click it.

But having seen the possibilities, i was wondering if anyone knows of  
any
other tools out there like this? If only the wireframe creation was a  
bit
smoother i would be more than keen to spend the cash on this.

thanks

dn