What website wireframing tools are available online, or self-hosted?

Question

I'm looking for an easy to use wireframing tool. I've heard of gliffy, are there any others?

Specifically, I'd like something that is

• Easy to use
• Supports collaboration
• export to html and css
• lets me show the wireframes to the client. Allowing annotations would be a nice feature.
• low cost, or free

Answer 1

Creately

Creately isn't really free, but you can pay them whatever price you think it's right (even $1). Some features (from official website):

Business Diagrams

* Process Flow (BPMN)
* Online Flowcharts
* Concept Maps
* Mind Maps
* SWOT Diagrams
* Organizational Chart

User Interface Design

* Wireframe for Website
* UI Mockup Wireframe
* Web Flow Charts
* Online Sitemaps
* Mockup Screens
* Desktop Software Mockup

Software & Systems Diagrams

* System Diagram and Design
* ER Diagrams (Entity)
* Data Flow Diagram (DFD)
* UML Diagrams
* Class Diagram
* UML State Charts

Network Diagrams & more

* Home Network Diagram
* Office Network Diagram
* Data Center Design Layout
* Capacity Planning models
* Digital Circuits

Mockingbird

Another option is Mockingbird. Their "motto" is:

1. Mock it up fast. Drag and drop UI elements to the page, then rearrange and resize. Go from idea to mockup in minutes.

2. Make links. Link multiple mockups together and preview them interactively to get a feel for the flow of your application.

3. Share with a click. Sharing mockups with colleagues or clients is as simple as sending a link. No more emailing folders of jumbled images.

Mockingbird is made using Cappuccino framework.

Answer 2

You could just wireframe in HTML.

Seriously, don't ignore the advantages of what straight HTML wireframing can offer to the process or what tools there are to make it easier and effective. Things like jquery and polypage make HTML a very powerful and capable wireframing and prototyping tool.

I wrote a blog post a while ago that explains some of the advantages and tools of straight HTML wireframing (sorry for the gratuitious self promotion).

Answer 3

ProtoShare is web-based so it works with all platforms and your clients don't have to download the software to be able to view and make comments. It's not free, but plans start at $19/month with a 30-day free trial.

In addition to clients having the ability to comment, designers can annotate the wireframes as well. Right now, you cannot export to HTML or CSS, but you can use CSS in the app to get the right message and styling across. HTML export is coming though.

Good luck in your search!

Answer 4

Balsamiq , not complete free but you can work with it.

Balsamiq

Answer 5

Another great website wireframe/mockup tool is Mockingbird ... it's collaborative and does decent export.

Answer 6

http://mockflow.com

Mockflow is the best I've worked with so far and I've tried quite a few. Web based and free for one project. Very friendly to UI-minded non-designers

Answer 7

Microsoft Expression Blend. It's not free, but the Sketchflow feature in version 3 not only lets you create wireframes, but lets you publish them to the web, where users can comment and annotate them, and it collects the comments and returns them to the design team.

There is a 60-day trial version that is free, and Sketchflow tutorials on the site.

Answer 8

Firefox pencil plugin

Answer 9

With LucidChart you can create interactive wireframes. They have a free version with a limited subset of the wireframing capabilities, but their subscription prices are very reasonable.