Rapid HTML Wireframing without Dreamweaver

16 Apr 2008 - 2:38am
6 years ago
10 replies
3162 reads
Oleg Krupnov
2008

While I feel quite confident with HTML and CSS, it seems to take a bit of
pain to use Dreamweaver for wireframing, perhaps because it tends to force
you into detail too early, when you are still on the "vision" stage of the
process, and feel like a WYSIWYG tool would be more appropriate.

On the other hand, wireframing in the WYSIWYG way entirely without HTML also
feels wrong, because first, the target medium is Web so it's closer to the
reality to think in HTML, and second, HTML is a powerful and expressive
language, and quite a mature one. In fact, all those WYSIWYG tools in their
development tend to invent (unnecessarily) their own pseudo-languages to
imitate a subset of HTML.

This opposition causes a lot of debates on HTML vs. WYSIWYG wireframing and
prototyping in the designer community.

I am now trying to hit the balance between these two approaches. I have
created a prototype of a wireframing tool, where you can move and resize
widget boxes freely on the page in a WYSIWYG manner (based on the wireframe
editor prototype I presented you earlier) and then insert tidy pieces of
HTML into those boxes. All styling is guided by an external CSS file you can
provide.

Download the prototype and tell me what you think:

http://authorjet.com/news.php?item.4.1

Oleg.

--
View this message in context: http://www.nabble.com/Rapid-HTML-Wireframing-without-Dreamweaver-tp16718954p16718954.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

Comments

16 Apr 2008 - 7:41am
Todd Warfel
2003

On Apr 16, 2008, at 4:38 AM, Oleg Krupnov wrote:

> Download the prototype and tell me what you think:
> http://authorjet.com/news.php?item.4.1

From the site:
"Note: You need to have Microsoft .NET Framework 2.0 (22.4 MB)
installed in order to run the program."

Grrrrrr. While I applaud you for creating what looks like a decent
HTML-based prototyping tool, in today's world there's very little
reason to have platform dependent or something .Net dependent tools
for prototyping HTML/HTML prototyping tools.

And please don't try the "you can run windows on your Intel-based Mac,
which makes it Mac compatible" argument. I've already had that
discussion w/iRise and Axure RP and they know it's rather weak.

Let me know when you come out w/one that works natively on the Mac and
I'd love to evaluate it.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

16 Apr 2008 - 9:26am
Todd Warfel
2003

On Apr 16, 2008, at 4:38 AM, Oleg Krupnov wrote:

> While I feel quite confident with HTML and CSS, it seems to take a
> bit of pain to use Dreamweaver for wireframing, perhaps because it
> tends to force you into detail too early, when you are still on the
> "vision" stage of the process, and feel like a WYSIWYG tool would be
> more appropriate.

Do you still get this feeling if/when you use the split screen mode in
DW? When we use DW to prototype, we use this mode and work only in the
HTML window, but keep the preview going just to see what's going on
while we code—kind of keeps a bit of balance going.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

16 Apr 2008 - 9:34am
Todd Warfel
2003

On Apr 16, 2008, at 4:38 AM, Oleg Krupnov wrote:

> I am now trying to hit the balance between these two approaches. I
> have created a prototype of a wireframing tool, where you can move
> and resize widget boxes freely on the page in a WYSIWYG manner
> (based on the wireframe editor prototype I presented you earlier)
> and then insert tidy pieces of HTML into those boxes. All styling is
> guided by an external CSS file you can provide.

Just a few additional comments. Again, Oleg, I applaud that you're
taking the time to create a prototyping tool—I think the community can
agree that we still don't have GREAT tools. We're kind of working in a
modern world here with stone age tools when it comes to rapid
prototyping. That being said, at the risk of sounding brash, my
concern is that this is just "another tool." We don't need just
another tool—we need a GREAT prototyping tool. And so, I think you
have some real opportunity here, but not without some significant
challenges.

Here's some challenges you're going to need to consider:
1. The market is already flooded with a number of okay prototyping
tools, but none that are truly GREAT. There's a real opportunity for A
or THE GREAT tool. Yes, that means that someone like Oleg, or a
company like Adobe, Apple, Microsoft, Axure, iRise or somebody else
has a real opportunity here.
2. The market already has okay/decent cross platform tools (e.g
Dreamweaver, Flash, Fireworks, Powerpoint/Keynote).
3. The market already has decent Windows only tools (e.g. Visio w/
Intuitec, Axure RP, iRise).
4. In the IxD space, the % of Macs is much higher than that 10% of the
rest of the world. If there's any question, just look around at any
web/interaction/ia design related conference—Windows machines are few
and far between. I don't think we can take that to mean that Macs make
up 90% of the IxD and related market space, but we can derive from
that that Macs are a much more significant percentage compared to
computing world at large. You'd be short-sited to ignore that when
building a prototyping tool unless you're specifically targeting
corporate environments exclusively. (btw, my discussions w/iRise and
Axure have confirmed this and they are watching it closely).

Keeping that in mind, Oleg's got quite a challenge if he's going to
produce another Windows only tool. Why should anyone use his tool
instead of Dreamweaver, Visio, Axure, or iRise? Other than cost,
there's very little reason to choose it vs. Axure or iRise. You have
to show some real value here that makes it a no-brainer. Just another
tool won't cut it.

So, Oleg, what's your goal? What's your vision?

The beauty of the Web is that some portion will use just another tool.
And if that's all you're after, then what you have will suffice. But
what this industry needs is a GREAT CROSS PLATFORM prototyping tool
that has the ability to create rapid rich prototypes visually (and
possibly with reusable code). If you're up to this challenge, I think
you've got an opportunity to steal the show.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

16 Apr 2008 - 10:12am
Ari
2006

there is actually prototyping program called oversite that is cross platform
(Mac and PC):

http://taubler.com/oversite/

it's a Java app and it just doesn't feel native when run on OS X, which is a
common issue with such ports. nevertheless, is relatively inexpensive and i
would encourage everyone who has a Mac or a PC to give it a try.

btw, developers use .NET because it has a rich set of components and it
makes creating GUI-based applications very easy. there really isn't an
equivalent on OS X yet unless you want to delve into the guts of the OS X
SDKs - there is Mono, an open source clone of .NET but it is far from
complete or fully compatible.

On Wed, Apr 16, 2008 at 11:34 AM, Todd Zaki Warfel <lists at toddwarfel.com>
wrote:

>
> On Apr 16, 2008, at 4:38 AM, Oleg Krupnov wrote:
>
> > I am now trying to hit the balance between these two approaches. I
> > have created a prototype of a wireframing tool, where you can move
> > and resize widget boxes freely on the page in a WYSIWYG manner
> > (based on the wireframe editor prototype I presented you earlier)
> > and then insert tidy pieces of HTML into those boxes. All styling is
> > guided by an external CSS file you can provide.
>
> Just a few additional comments. Again, Oleg, I applaud that you're
> taking the time to create a prototyping tool—I think the community can
> agree that we still don't have GREAT tools. We're kind of working in a
> modern world here with stone age tools when it comes to rapid
> prototyping. That being said, at the risk of sounding brash, my
> concern is that this is just "another tool." We don't need just
> another tool—we need a GREAT prototyping tool. And so, I think you
> have some real opportunity here, but not without some significant
> challenges.
>
> Here's some challenges you're going to need to consider:
> 1. The market is already flooded with a number of okay prototyping
> tools, but none that are truly GREAT. There's a real opportunity for A
> or THE GREAT tool. Yes, that means that someone like Oleg, or a
> company like Adobe, Apple, Microsoft, Axure, iRise or somebody else
> has a real opportunity here.
> 2. The market already has okay/decent cross platform tools (e.g
> Dreamweaver, Flash, Fireworks, Powerpoint/Keynote).
> 3. The market already has decent Windows only tools (e.g. Visio w/
> Intuitec, Axure RP, iRise).
> 4. In the IxD space, the % of Macs is much higher than that 10% of the
> rest of the world. If there's any question, just look around at any
> web/interaction/ia design related conference—Windows machines are few
> and far between. I don't think we can take that to mean that Macs make
> up 90% of the IxD and related market space, but we can derive from
> that that Macs are a much more significant percentage compared to
> computing world at large. You'd be short-sited to ignore that when
> building a prototyping tool unless you're specifically targeting
> corporate environments exclusively. (btw, my discussions w/iRise and
> Axure have confirmed this and they are watching it closely).
>
> Keeping that in mind, Oleg's got quite a challenge if he's going to
> produce another Windows only tool. Why should anyone use his tool
> instead of Dreamweaver, Visio, Axure, or iRise? Other than cost,
> there's very little reason to choose it vs. Axure or iRise. You have
> to show some real value here that makes it a no-brainer. Just another
> tool won't cut it.
>
> So, Oleg, what's your goal? What's your vision?
>
> The beauty of the Web is that some portion will use just another tool.
> And if that's all you're after, then what you have will suffice. But
> what this industry needs is a GREAT CROSS PLATFORM prototyping tool
> that has the ability to create rapid rich prototypes visually (and
> possibly with reusable code). If you're up to this challenge, I think
> you've got an opportunity to steal the show.
>
>
> Cheers!
>
> Todd Zaki Warfel
> President, Design Researcher
> Messagefirst | Designing Information. Beautifully.
> ----------------------------------
> Contact Info
> Voice: (215) 825-7423
> Email: todd at messagefirst.com
> AIM: twarfel at mac.com
> Blog: http://toddwarfel.com
> Twitter: zakiwarfel
> ----------------------------------
> In theory, theory and practice are the same.
> In practice, they are not.
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
--------------------------------------------------
www.flyingyogi.com
--------------------------------------------------

16 Apr 2008 - 11:14am
Fabio Fernandes
2008

Our UX Design team has been using Axure for workflow, wireframe and also to build (low-high fidelity) prototypes.

You output an HTML prototype, as well as a word document with screens and notes as spec document.

The interactivity can be somewhat limited for more sophisticated functionality, but so far we've been able to get a lot done with this tool.

The application is pretty simple to use, so the learning curve is not so bad.
http://www.axure.com/default.aspx

We also use iRise, which is much more robust and obviously a lot more expense too, which has impacted its dissemination internally. Learning curve is much greater than Axure. Some of us went through training with iRise consultants.

The huge downside on iRise, in my opinion, is the fact that you can't output HTML, you have to use their proprietary reader for folks to review the prototype and spec document.

http://www.irise.com/

If you want to try something that gives you more flexibility on the early stages of the project and not have to spend too much time creating your wireframes, I would recommend Axure.

Cheers,
Fabio

Fabio L. Fernandes
User Experience Design Manager, CUA

Cengage Learning, Digital Solutions Group
fabio.fernandes at cengage.com
650.413.7492 (Office)
650.591.1680 (Fax)

17 Apr 2008 - 2:59am
Oleg Krupnov
2008

Thanks everybody for your input!

I'd like however to slightly correct the direction of the thread. I am not
testing the choice of platform for my solution, and I am not testing
managerial and marketing decisions. These topics are of course important and
deserve a separate research and discussion.

What I am testing right now is a technical idea, whatever platform it's
implemented upon. The feedback on the idea itself has been of the least so
far, and it means that either I didn't present it properly and nobody
understood it, or the idea is self-understood or unimportant so it did not
evoke any emotion, or the idea is a total blunder. :)

Let me try to explicate the idea one more time, because it seems quite fresh
and promising to me.

You can have a wysiwyg wireframe editor while you are no longer limited to a
predefined standard set of widgets (like button, check box, text placeholder
etc.). You no longer have to look for ways to overcome limitations that
every such editor always has. You can place arbitrary content inside
widgets, and do it using the best language out there - HTML. Yet you still
have a nifty wysiwyg at your fingertips that speeds up work when you need to
move things around.

The corollaries of this particular idea are the following. For each item,
think whether you can do the same thing with any wireframing or prototyping
tool you know:

1) You can enter arbitrary content into widgets - controls, forms, lists,
pictures, flash, forms - in the native HTML.
2) You can style the content inside widgets using an external CSS file, and
let your content stay purely semantic.
3) You can build (or I can build, or third-parties can build and share)
libraries of reusable widgets, to be re-used within a single project or
across different projects.
4) An XSLT can be applied to populate widgets with content from external XML
sources or database, thereby producing different sample views for the same
wireframe (like the dummy data in Thermo). For example, different goods in
an online shop.
5) You can preview what happens with the content inside widgets when you
resize the widget, or the entire page.
6) You always see the page exactly as it will look after exporting to HTML.
7) You could even add javascript calls to your html content to add
interactivity (it will become active after exporting to HTML). This needs an
additional thought though...

The closest tool I know that can do some of the above is Dreamweaver, but as
I said, it doesn't seem to be intended to be used for wireframing. It's
primarily an HTML authoring tool, with all its implications. It's easy and
convenient when you edit HTML code, but its wysiwyg *editor* (not the
preview) is rather weak IMHO, in particular when it comes to moving floating
elements around. I know that professionals can do wonders with Dreamweaver,
but I yet need to take my time to learn it that well.

I would be happy to hear any criticism, so feel free.

Oleg.
--
View this message in context: http://www.nabble.com/Rapid-HTML-Wireframing-without-Dreamweaver-tp16718954p16741616.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

17 Apr 2008 - 8:25am
Todd Warfel
2003

One other key difference, as I understand it, is that iRise has
collaboration capabilities, but Axure does not.

On Apr 16, 2008, at 7:14 PM, Fernandes, Fabio (APG) wrote:

> We also use iRise, which is much more robust and obviously a lot
> more expense too, which has impacted its dissemination internally.
> Learning curve is much greater than Axure. Some of us went through
> training with iRise consultants.
>
> The huge downside on iRise, in my opinion, is the fact that you
> can't output HTML, you have to use their proprietary reader for
> folks to review the prototype and spec document.
>
> http://www.irise.com/
>
> If you want to try something that gives you more flexibility on the
> early stages of the project and not have to spend too much time
> creating your wireframes, I would recommend Axure.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Apr 2008 - 8:49am
Ari
2006

i'm not familiar with the degree of iRise's collaboration abilities (given
the pricing, I'm sure they're extensive), however, the most recent release
of Axure (v 5) has a 'Shared Project' capability, which allows for
collaboration on projects.

http://www.axure.com/p401_1.aspx

Ari

On Thu, Apr 17, 2008 at 10:25 AM, Todd Zaki Warfel <lists at toddwarfel.com>
wrote:

> One other key difference, as I understand it, is that iRise has
> collaboration capabilities, but Axure does not.
>
> On Apr 16, 2008, at 7:14 PM, Fernandes, Fabio (APG) wrote:
>
> > We also use iRise, which is much more robust and obviously a lot
> > more expense too, which has impacted its dissemination internally.
> > Learning curve is much greater than Axure. Some of us went through
> > training with iRise consultants.
> >
> > The huge downside on iRise, in my opinion, is the fact that you
> > can't output HTML, you have to use their proprietary reader for
> > folks to review the prototype and spec document.
> >
> > http://www.irise.com/
> >
> > If you want to try something that gives you more flexibility on the
> > early stages of the project and not have to spend too much time
> > creating your wireframes, I would recommend Axure.
>
>
> Cheers!
>
> Todd Zaki Warfel
> President, Design Researcher
> Messagefirst | Designing Information. Beautifully.
> ----------------------------------
> Contact Info
> Voice: (215) 825-7423
> Email: todd at messagefirst.com
> AIM: twarfel at mac.com
> Blog: http://toddwarfel.com
> Twitter: zakiwarfel
> ----------------------------------
> In theory, theory and practice are the same.
> In practice, they are not.
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
--------------------------------------------------
www.flyingyogi.com
--------------------------------------------------

17 Apr 2008 - 8:51am
Fabio Fernandes
2008

"One other key difference, as I understand it, is that iRise has collaboration capabilities, but Axure does not."

Yes, that's absolutely a huge advantage on iRise. We purchased 5 seats and we've worked concurrently from the same project file. We did experience a bit of a delay in handling the file, but not much.

Fabio L. Fernandes
User Experience Design Manager, CUA

Cengage Learning, Digital Solutions Group
fabio.fernandes at cengage.com<mailto:fabio.fernandes at cengage.com>
650.413.7492 (Office)
650.504.4916 (Cell)
650.591.1680 (Fax)

18 Apr 2008 - 6:54am
Ramshetty
2008

i feel this is a wonderful idea.....

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=28109

Syndicate content Get the feed