I do not know whether you know it, but there are more than one real good wireframe tool in the software orbit - and there aren't a best for every one.
As freelancer I have to gear myself and my work up for my individual clients, their business and their development procedures.
And I am forced to work with different tools. And I have owned several licenses for various wireframe tools to support my client as good as I can. But currently I just work with four tools.
Wireframing is a crucial step in web design and development. It builds a groundwork which is easy and quick to understand – it builds the base for discussions, consideration and review and testing. It allows rapid prototyping either as paper prototyping or by the tool itself as clickable deliverable. And these sketches or designed drawings help to determine and discuss potential problems early in the process.
It can be invaluable and vital to have a visual representation of content, functions and hierarchy. If you have a small microsite or an other tiny web presentation it might or looks like negligible – but it will be helpful also in this cases.
Wireframes make it easier to communicate ideas, reduce scope problems and misinterpretations, cut down on project costs (due to fewer concept modifications and design revisions during later project steps), and enable greater upfront utility analysis, usability reviews and functionality survey.
Wireframes can be created in many ways with several tools depending upon one’s communication needs and budget. Most simply, pen and paper are key tools for creating web wireframes. No matter whether you use to draw fast-scribbled sketches on notebook paper, detailed ink drawing with stencils on graph paper, lineart or greybox drawings or on a napkin during the lunch break.
In addition some designers and developers are using Illustrator, Fireworks or PowerPoint to create wireframes. That’s also fine if you like it and it support you and your work – but as I mentioned there are so many different tools and diagram software apps available to support your best or as good as currently possible – I also haven’t still not found the “holy grail” :-)
As freelancer I have to gear myself and my work up for my individual clients, their business and their development procedures.
And I am forced to work with different tools. And I have owned several licenses for various wireframe tools to support my client as good as I can. But currently I just work with four tools.
- Concept-Draw
- Visio
- Axure
- Pencil and Paper (A tool that you should never forget or is not to be underestimated – by the way … “Do you know the stencil kits by UIstencils?” visit: http://www.uistencils.com/ )
- Concept-Draw
- Visio
- Axure
- Omnigraffle
- Balsamiq
- iRise
- Lovely Charts
- ProtoShare
- Pencil Project
- MockFlow
- Gliffy
Wireframing is a crucial step in web design and development. It builds a groundwork which is easy and quick to understand – it builds the base for discussions, consideration and review and testing. It allows rapid prototyping either as paper prototyping or by the tool itself as clickable deliverable. And these sketches or designed drawings help to determine and discuss potential problems early in the process.
It can be invaluable and vital to have a visual representation of content, functions and hierarchy. If you have a small microsite or an other tiny web presentation it might or looks like negligible – but it will be helpful also in this cases.
Wireframes make it easier to communicate ideas, reduce scope problems and misinterpretations, cut down on project costs (due to fewer concept modifications and design revisions during later project steps), and enable greater upfront utility analysis, usability reviews and functionality survey.
Wireframes can be created in many ways with several tools depending upon one’s communication needs and budget. Most simply, pen and paper are key tools for creating web wireframes. No matter whether you use to draw fast-scribbled sketches on notebook paper, detailed ink drawing with stencils on graph paper, lineart or greybox drawings or on a napkin during the lunch break.
In addition some designers and developers are using Illustrator, Fireworks or PowerPoint to create wireframes. That’s also fine if you like it and it support you and your work – but as I mentioned there are so many different tools and diagram software apps available to support your best or as good as currently possible – I also haven’t still not found the “holy grail” :-)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. Concept-Draw (http://www.conceptdraw.com/products.php)
Concept-Draw is a software that runs on Mac and PC. And you can switch without any problem from one platform to the other. Concept-Draw is a diagramming software that lets you develop, communicate, and dynamically present your flowcharts, sitemaps and wireframes.
Don't let your first glance fool you. Concept-Draw is a lot easier to use than it looks. To get started, all you need to know are a few basic steps and terms.
ConceptDraw PRO has an extensive library that are ready to be used, but as so often these libraries are OK but not really that what you need for your daily work, but it’s very easy to create your own library with stencils and or patterns or masters.
You can use Concept-Draw as single software or within the Concept-Draw Office suite. And I’d suggest you to by the suite – Concept-Draw Office suite consists of the diagramming software, a mind mapping tool (ConceptDraw MindMap), and a project management tool (Concept-Draw PROJECT ).
ConceptDraw MindMap has a couple of options. You can start from a blank document or you can choose from one of the pre-loaded templates or you can select ‘Brainstorm’. A feature I really love.
The Brainstorm option is quite cool and would be a good tool to use within a project team meeting. You can determine the time limit by a stopwatch - this is a useful addition and saves someone having to be timekeeper.
Concept-Draw PROJECT offers the full set of features you need to plan, organize and manage a project, including task and resource management, reporting, and change control – this is not only interesting for project managers (to be in time and in budget is a team responsibility).
6. iRise (http://www.irise.com/)
7. Lovely Charts (http://www.lovelycharts.com/)
8. ProtoShare (http://www.protoshare.com/)
9. Pencil Project (http://pencil.evolus.vn/en-US/Home.aspx)
10. MockFlow (http://www.mockflow.com/)
11. Gliffy (http://www.gliffy.com/)
Concept-Draw is a software that runs on Mac and PC. And you can switch without any problem from one platform to the other. Concept-Draw is a diagramming software that lets you develop, communicate, and dynamically present your flowcharts, sitemaps and wireframes.
Don't let your first glance fool you. Concept-Draw is a lot easier to use than it looks. To get started, all you need to know are a few basic steps and terms.
ConceptDraw PRO has an extensive library that are ready to be used, but as so often these libraries are OK but not really that what you need for your daily work, but it’s very easy to create your own library with stencils and or patterns or masters.
You can use Concept-Draw as single software or within the Concept-Draw Office suite. And I’d suggest you to by the suite – Concept-Draw Office suite consists of the diagramming software, a mind mapping tool (ConceptDraw MindMap), and a project management tool (Concept-Draw PROJECT ).
ConceptDraw MindMap has a couple of options. You can start from a blank document or you can choose from one of the pre-loaded templates or you can select ‘Brainstorm’. A feature I really love.
The Brainstorm option is quite cool and would be a good tool to use within a project team meeting. You can determine the time limit by a stopwatch - this is a useful addition and saves someone having to be timekeeper.
Concept-Draw PROJECT offers the full set of features you need to plan, organize and manage a project, including task and resource management, reporting, and change control – this is not only interesting for project managers (to be in time and in budget is a team responsibility).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
2. Visio (http://office.microsoft.com/en-us/visio/) (http://office.microsoft.com/de-de/visio/)
Visio is the only one of the three tools I use which is available just on the Windows platform. It is one of the most popular and comprehensive prototyping tools. Visio is a lot easier to use than it looks, especially when you are already familiar with Microsoft Office. It’s pretty much the same like I’ve already wrote about Concept-Draw - to get started, all you need to know are a few basic steps and terms. I still think Visio is a great tool for quick mockups, much quicker than Axure and as quick as Concept-Draw, but it has limitations as the other too. I can’t count the number of wireframes and sitemaps I have develop with Visio – so I am very familiar with it – but it has its pros and cons.
Fortunately, there's a broad community around Visio with useful shapes.
My experience is it’s the most used diagram tool. It's an advanced software that enables you to create a wide range of diagrams.
There are a lot of compelling features in Visio especially in the latest version Visio 2010 that make it an excellent and versatile diagramming tool.
Compared to previous versions of Visio, the 2010 version just makes it easier to lay out a diagram with simpler drag and drop, automatic alignment and spacing, containers and a more powerful "preview" feature. Visio has been part of the Office suite for quite some time. The simple fact of Visio 2010 is that it works as seamlessly as ever with the other Office tools, and more easily integrates with an enterprise's data, information and tools than ever before. And that's good, because there's more enterprise data and information than ever before -- and visualizing it all can be a key role in the decision-making process. However when Office 2007 was released, Visio didn't get the new Ribbon bar interface. That has now been corrected in the 2010 release, giving Microsoft Office Visio 2010 the familiar Office look.
3. Axure (http://www.axure.com/)
Axure works on PC and Mac. Axure allows you to construct wireframe models, document functional specifications, and generate prototypes. Axure is an excellent tool to create high-fidelity, complex mockups that require a lot of interaction. In a drag and drop environment, annotated wireframes are quickly and easily created. You should be prepared for two things if your site is very big or complex Axure might be confusing. But let us be honest that’s always the case regardless of whether you work with Axure or another diagram software – you should be / you have to work clearly and distinctly. And be prepared for a learning curve though, especially when implementing complex interactions. Fortunately, the program and the accompanying web site have a large number of walkthroughs and other tutorials.
The number of widgets that ships with Axure is surprisingly small or in other words it’s all too often too small. Fortunately, there's a strong community around Axure.
One thing I really like about Axure is that it supports me with the paper work. I am a person who thinks in pictures and structures not in words – so I am very thankful that Axure is on my side to do this work much easier and well structured. During the prototyping process, you can add notes and annotations to almost everything - pages, widgets, masters etc. - and generate a Word document with all the screenshots and specifications included – with just one click. Axure keeps your wireframe and prototype work well attuned to your paper work / documentation. The word document is of course highly configurable - that’s great on the one hand but on the other it’s all too often very tricky to get the result you are looking for.
Additionally, on Axure’s website you can find a number of videos that show how to use Axure. If you need to create high-fidelity, complex and programmable prototypes, Axure RP Pro is definitely worth checking out.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Brief overview of other wireframe tools with short facts and prices (the prices are rounded).
1. Concept-Draw (http://www.conceptdraw.com/products.php)
2. Visio (http://office.microsoft.com/en-us/visio/) (http://office.microsoft.com/de-de/visio/)
3. Axure (http://www.axure.com/)
4. Omnigraffle (http://www.omnigroup.com/products/omnigraffle/)
5. Balsamiq (http://www.balsamiq.com/)
Visio is the only one of the three tools I use which is available just on the Windows platform. It is one of the most popular and comprehensive prototyping tools. Visio is a lot easier to use than it looks, especially when you are already familiar with Microsoft Office. It’s pretty much the same like I’ve already wrote about Concept-Draw - to get started, all you need to know are a few basic steps and terms. I still think Visio is a great tool for quick mockups, much quicker than Axure and as quick as Concept-Draw, but it has limitations as the other too. I can’t count the number of wireframes and sitemaps I have develop with Visio – so I am very familiar with it – but it has its pros and cons.
Fortunately, there's a broad community around Visio with useful shapes.
My experience is it’s the most used diagram tool. It's an advanced software that enables you to create a wide range of diagrams.
There are a lot of compelling features in Visio especially in the latest version Visio 2010 that make it an excellent and versatile diagramming tool.
Compared to previous versions of Visio, the 2010 version just makes it easier to lay out a diagram with simpler drag and drop, automatic alignment and spacing, containers and a more powerful "preview" feature. Visio has been part of the Office suite for quite some time. The simple fact of Visio 2010 is that it works as seamlessly as ever with the other Office tools, and more easily integrates with an enterprise's data, information and tools than ever before. And that's good, because there's more enterprise data and information than ever before -- and visualizing it all can be a key role in the decision-making process. However when Office 2007 was released, Visio didn't get the new Ribbon bar interface. That has now been corrected in the 2010 release, giving Microsoft Office Visio 2010 the familiar Office look.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Axure works on PC and Mac. Axure allows you to construct wireframe models, document functional specifications, and generate prototypes. Axure is an excellent tool to create high-fidelity, complex mockups that require a lot of interaction. In a drag and drop environment, annotated wireframes are quickly and easily created. You should be prepared for two things if your site is very big or complex Axure might be confusing. But let us be honest that’s always the case regardless of whether you work with Axure or another diagram software – you should be / you have to work clearly and distinctly. And be prepared for a learning curve though, especially when implementing complex interactions. Fortunately, the program and the accompanying web site have a large number of walkthroughs and other tutorials.
The number of widgets that ships with Axure is surprisingly small or in other words it’s all too often too small. Fortunately, there's a strong community around Axure.
One thing I really like about Axure is that it supports me with the paper work. I am a person who thinks in pictures and structures not in words – so I am very thankful that Axure is on my side to do this work much easier and well structured. During the prototyping process, you can add notes and annotations to almost everything - pages, widgets, masters etc. - and generate a Word document with all the screenshots and specifications included – with just one click. Axure keeps your wireframe and prototype work well attuned to your paper work / documentation. The word document is of course highly configurable - that’s great on the one hand but on the other it’s all too often very tricky to get the result you are looking for.
Additionally, on Axure’s website you can find a number of videos that show how to use Axure. If you need to create high-fidelity, complex and programmable prototypes, Axure RP Pro is definitely worth checking out.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Brief overview of other wireframe tools with short facts and prices (the prices are rounded).
1. Concept-Draw (http://www.conceptdraw.com/products.php)
- Desktop App
- PC / Mac
- 21 days trial version
- $250 / 235 € (ConceptDraw Office $500 / 450 €)
2. Visio (http://office.microsoft.com/en-us/visio/) (http://office.microsoft.com/de-de/visio/)
- Desktop App
- PC only
- 60 day trial
- Standard $ 250 / 329,00 € - Professional $ 560 / 699,00 € - Premium $ 1000 / 1.299,00 €
- One of the most popular and comprehensive diagram software
3. Axure (http://www.axure.com/)
- Desktop App
- PC / Mac
- 30 days trial version
- Premium version costs $ 590 ( with one year full support) for additional support 150 $ per year per year
4. Omnigraffle (http://www.omnigroup.com/products/omnigraffle/)
- Desktop App
- Mac only and iPad
- 14 days trial version
- Professional $ 200 / 135 € - Standard $ 100 / 70 €
- Mac only and iPad
- Import, export of Visio files is possible (but I’ve been never pleased about the result, it’s nothing for the everyday work but in case you need it it’s potential)
5. Balsamiq (http://www.balsamiq.com/)
- Online App + Desktop App
- Premium desktop version costs $ 80 Licenses are tied to people, not particular computers.
- Real-time collaboration tool
6. iRise (http://www.irise.com/)
- Desktop App
- PC only
- 14 days trial version
- $6,995 per seat
7. Lovely Charts (http://www.lovelycharts.com/)
- Online App
- 100% free
8. ProtoShare (http://www.protoshare.com/)
- Online App
- 30 days free trial
- Standard $ 30 per month - Professional $ 50 per month
- Collaborative online tool
- Web-based prototyping tool
9. Pencil Project (http://pencil.evolus.vn/en-US/Home.aspx)
- Browser App
- PC / Mac
- Completely free tool
- Option to use it as Firefox addon
10. MockFlow (http://www.mockflow.com/)
- Online App + Desktop App
- Free basic pack ( limited options ) - Premium version $ 60 per year
- Collaborate option real-time
11. Gliffy (http://www.gliffy.com/)
- Online App
- Free basic plan with no time limitations!
- premium account $ 5 per month ( 5 user … $ 15 per month and other monthly subscription plans )
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
In connection with this topic I like pointing you to a former article about forms:
Holger,
ReplyDeleteThanks for including ProtoShare in your list of wireframing applications!
ProtoShare does a great job of facilitating discussions between stakeholders during the wireframing stages to help flesh out requirements. You can even export your work to a web page for user testing. And if your team needs to go beyond wireframing, ProtoShare is flexible enough to evolve gray-box wireframes to more advanced prototypes.
Andrea
@ProtoShare
WireframeSketcher is a desktop wireframing tool that can also integrate with your IDE. It works with Aptana, Flash Builder, Zend Studio and the like. It lets you draw simple wireframes, more complex mockups and even have some interactivity. You can show off your work using a built-in viewer or export to high-quality, interactive, vector PDF.
ReplyDeleteHi Andrea - Anytime - My pleasure
ReplyDeleteHi Peter - I haven't heard of WireframeSketcher so far - I will have a look at it as soon as I can.
Very nice summary of different tools. One I´ve tried recently is Just in Mind http://justinmind.com/ which seems to be slightly better then Axure. But the Mac version is using most of the time 90% CPU which is just not acceptable. Otherwise the PC version is certainly worth a try.
ReplyDeletePaper and pencil are always useful. I'm using Browser Sketch Pad (of UIStencils) and I liked it.
ReplyDeletehttp://bit.ly/dMgOWO You should include JustProto to your list. Webbased tool that lets you create fully interactive prototypes (both - lo and hi-fi). Fully collaborative - realtime collaboration and live preview options. You can export and share your projects, plus ssl protection secures your work. Best results you get under firefox and chrome. Free trials available, prices start from $19/30days.
ReplyDeletehttp://justproto.com/en/
LucidChart is another wireframing application. Here are the bullet points:
ReplyDelete* Online App
* Free basic plan with no time limitations!
* Premium accounts starting at $5/month
* Real-time collaboration with unlimited users
* Interactive wireframes and prototyping
App Sketcher (http://www.appsketcher.com) is a new tool for creating interactive HTML prototypes. Unlike most other tools, it uses real web controls (HTML elements, jQuery components, Google Maps etc.) as building blocks (no coding involved). It produces HTML/CSS/JS based prototypes that can run in any browser.
ReplyDeleteHelp! Desperately looking for a prototyping tool which handles ALL these easily:
ReplyDelete1. Accordions (eg Visio Templates, left pane1)
2. Split panes (eg Outlook, left panel )
3. Expand/collapse panel(eg Outlook left panel )
Thanks
Batyah
Check out Fluid UI http://www.fluidui.com for iPhone and Android prototyping. Web app with iPhone and Android widget sets, image upload, fully linked prototypes, touch gestures, animated transitions and on-device testing.
ReplyDeleteCheers,
Ian
Hi Shalin,
ReplyDeleteThx for pointing me and the other readers to this tool.
And you are right it should be on the list - I think after 4 years it's time writing an updated version.
thx - take care,
Holger