Web UI prototyping tools

Question

Can anyone recomend me a simple web UI prototyping tool, so I could quicky prototype the look of a my web site.

I have tried to use MS Visio for this, but found it very "user un-friendly".

What I really need is to be able quicky sketch the layout of the page, put some links, images and buttons on in, play a little bit with a colors (CSS), and it would be great it this tool could support navigation between the pages - but it is not essential.

I would rather consider a low-cost or an open-source solution, since I am not a web designer and not going to use that tool on a daily basis.

Answer 1

Though this area seems to be really fragmented and no clear low-cost or open-source solution exists, there are some worthy contenders:

1. Protoshare is really easy and effortless for getting a basic UI mockup up and running. It is free for one project use.
2. Balsamiq is more of a UI mockup tool rather than for prototyping. You can create UI screen mockups very quickly with a wide range of UI elements. Unfortunately, they don't have support for cross-page navigation, clicking, maintaining state, etc. It is free (with a 5 min nag screen) but also incorporates with Eclipse and other IDEs.
3. Axure is one of the best tools for UI prototyping and thus very expensive.

I'd recommend starting out with Protoshare with their free trial. If all you need are UI sketches/mockups, Balsamiq is really the best free option out there.

Answer 2

We just use the same IDEs that we use for the actual development. For instance, if you, like some designers I know, already use Dreamweaver you already know how to set colors, styles and add objects to the page. You can set dummy text and then link pages together. If you are a developer using Eclipse, or VisualStudio or some other IDE it is fairly easy to do the same thing.

My main point is, why try to learn a different tool if your main tool can fill the need.

I have seen presentation software like PowerPoint used for this, but I have not been satisfied with the results.

Answer 3

I use several solutions:

1. Pencil and paper - This is a good place to start usually. If I'm talking to the client over the phone, I will usually jot down notes and do a rough sketch of what the client wants. Likewise, it's a good idea to have a few blank sheets of paper around when getting together with the client for communal brainstorming sessions.
2. A white board - along with different colored dry-erase markers might work even better. To me this is the most natural way to come up with a rough layout of a site interface. A quick drawing is the best way to communicate UI/layout ideas. And a white board facilitates brainstorming and collaboration very nicely.
3. Photoshop/Illustrator - or any other graphics program. Illustrator actually works quite well for creating layout mock-ups. You have access to useful tools like vector shapes, type objects, rulers, smart guides, etc. And after tweaking the layout to your liking in Photoshop, you can just chop it all up and you've got images ready for use on your site.

I've never really found a need for anything beyond this. IMHO, using a specialized "prototyping tool" between paper/white board and creating the actual design in Illustrator/Photoshop is unnecessary. I couldn't justify paying for a commercial service that really adds nothing useful to my design process.

Answer 4

As of 1-Apr-2009, Microsoft Office SharePoint Designer is free. Although it has a lot more capability than just web page layout, it does use the same designer that Visual Studio 2008 uses. This means it can not only be used to design HTML, but also ASP.NET controls.

Answer 5

ive written a white paper which discusses the pros and cons of five different tools (visio, frontpage, etc):

http://pm4web.blogspot.com/2008/10/wireframes-and-mockups-part-1.html

for business-presence websites i tend to use photoshop since it presents a polished design. but i only create one page to establish the look and feel.

if its a custom app for a client, i using visio at the moment. mainly because i like to put in tech notes in a sidebar.

LM

Answer 6

Take a look at Pencil, a Firefox addon. It's a new project but surprisingly useful. However, it tends to get really slow when you start having a full GUI.

Answer 7

I use vector painting tools like Inkscape. Its free and available on Linux and Windows. It uses the standard SVG format so its not a problem to share it with other people using Freehand or other vector design tools. If the mock-up is ready, its easy to export some parts as a image (png or other supported formats) for further processing (cutting the image in smaller parts) with Gimp or Photoshop or use it directly inside the page.

Answer 8

I found iPlotz online as well, seems to be an interesting alternative to Protoshare. I played with the demo for a while and it reminded me a lot of Balsamiq in that the mockups are more static and hand-drawn. It's free for 1 project with 5 pages, and then it's $15/month or $99/year, which seems a lot less than Protoshare's entry-level plan of $29/month for a personal plan.

If you had a team of 5, I think Protoshare would be $1,188/year and iPlotz would be $295/year.

Answer 9

This may be lower level than what you're looking for, but if you're looking at Photoshop/Illustrator you may be interested in using the images at http://cameronmoll.com/archives/2006/12/gridding_the_960/ as your background layer.

This can give you a baseline for splitting header/column elements and assist in lining up the elements of your mock-up.

Furthermore if you're using a WYSIWYG HTML editor solution you can make this a background image of your webpage in the CSS.

Answer 10

Take a look at WireframeSketcher. It's an Eclipse plugin for creating screen mockups and interface prototypes.

Answer 11

OmniGraffle is a nice Mac-like alternative to Visio, and some people have definitely used it to mock up website designs.

Steve

Answer 12

ForeUI is worth trying out.

Answer 13

We have spent quite some time selecting from this category of tools lately for a large project, so have some current experience with most of them

Balsamiq and iPlotz are getting all the attention lately and they are both very good tools for simple sketchy" look mockups, and while we found the sketchy/hard-drawn look a HUGE benefit (well written about elsewhere) we also wanted more interactive demo features.

We then found FlairBuilder and it does what the others do just as quickly (also an AIR app) except that it goes much further (if you want it to) and creates interactive demos that actually run ie. the controls are all real windows controls.

My main issue was that is doesnt have a "sketchy" look, and after a few pleasant exhanges with the sole developer he has agreed to add this as a theme which I believe is almost done.

Why having a sketchy/pencil theme its so valuable is causing reviewers to not focus on detail (colors/fonts/alignment etc) and more on function & concepts, as well as to stop manager thinking that its "almost done" :-)

See the history comment with the developer here

getsatisfaction.com/.../pencil_sketch_styles_as_used_by_balsamiq_and_iplotz

We own licences for iPlotz, Mockups, Axure and now FlairBuilder, and find we use FlairBuilder the most now.

But each to their own!

Answer 14

Try http://quplo.com. Sign up for a free account, walk through the tutorial and include Google Web Fonts. It allows you to quickly use CSS3 fonts of any choice, or use web-based built in ones. It even has code completion for CSS that shows the actual fonts families.

[Update: Oh and you when you use Firebug to fiddle with the CSS you can save your changes with Quplo too]