

What's the best website prototyping/wireframe/greyscreening product(s) you have used? - babul

I am curious to know what processes/practices/products/tools people here are using for creating wireframes and greyscreening their websites and web applications?<p>What have you found that works particularly well for you and is there anything you think deserves mentioning?
======
babul
Currently, I mostly follow a process outlined nicely in the link below (expect
for greyscreening interactively, my grey screening is done with everyone
sitting and editing a Dreamweaver template based solution together)...

[http://www.newfangled.com/web_development_prototyping_proces...](http://www.newfangled.com/web_development_prototyping_process)
(If you don’t want to watch the video above it is summarised in 4 nice
pictures at <http://onwired.com/portfolio/>)

I am thinking about using Drupal (or even Joomla to a lesser extent) as the
CMS just for interactive greyscreening just so it can be done asynchronously
and on a distributed basis.

------
melvinram
Paper & pencil works best. Pen works as well.

If you're looking for more technical whiz bang option, I like Freehand which
used to be made by Macromedia.

Photoshop works too.

Visio has always seemed like a poor tool for the task. Might be my lack of
knowledge on how to use it.

Dreamweaver is nice too. I like to just pick a standard template to start with
and try to add as much content as I think the final site will have. Design can
come later.

Now that I'm thinking about it, WordPress could be used to hash out content as
well.

~~~
babul
Pen and paper is best for very early concept design but quickly becomes a
chore for complex sites.

To resolve this, I have tried LucidSpec (<http://www.elegancetech.com>) and
AxureRP-Pro (<http://www.axure.com>) which are better in many ways than using
Visio and even Freehand to a lesser extent. I like my early prototypes to
focus less on graphical elements and more on functionality, user flow and
interaction, and the latter tools make the mock look “too real” hence people
focus on elements that are not so important at the early stages e.g. colours.

Dreamweaver remains the best for balancing creativity and productivity
(concepts can be realised quickly as they are already partially built).
Photoshop seems to be best for pure creativity (provided you have sufficient
skill to cut up your designs and implement them).

What I am really interested in is the grey screening part. Thoughts? Thanks.

~~~
melvinram
I just checked out the videos of the two websites. They look fantastic,
especially Axure. If I building a complex app, I'd probably use it.

As for grey screening, I've never heard the term. I searched on Google and it
didn't turn up anything.

What is grey screening?

~~~
babul
Watch the video in the link...

[http://www.newfangled.com/web_development_prototyping_proces...](http://www.newfangled.com/web_development_prototyping_proces..).
(If you don’t want to watch the video above it is summarised in 4 nice
pictures at <http://onwired.com/portfolio/>)

I..it is baciscally creating an interactive wireframe without the graphics and
focused on structure and interaction.

I am a developer, not really a designer, and working with others i have found
we have some many different interpretations of meanings it is just easier to
create things on the fly together. Unless you sit together in a room, this can
be hard. Hence I am thinking of using Drupal as a base system for doing this.

------
bigtoga
I downloaded Smart Draw (<http://www.smartdraw.com/>) last week and it seemed
promising for tedious tasks like layouts and site maps, not so much for the
graphic design side. Seems like a nice tool but they have a ridiculously anti-
user trial period of "7 Application Launches before time out". I didn't feel
that I was able to try it out enough before it timed out on me so I didn't buy
it.

