When it is time to craft an intuitive and usable user interface for a website, one of the fundamental things to do is to make sure you have the interface designed well before you start building. The most general and the trustworthiest way to plan an interface are to create Wireframes. Wireframes are line drawings, comparable to blueprints, which demonstrates the general navigation and the building blocks e.g. content, functionality etc. that will go into making of the website. The main rationale behind creating Wireframes is to sustain the flow of your particular logical and business functions by classifying all the entrance and exit points for every single page of your website.
Wireframes can be created manually on a paper. It is the easiest and fastest way of creating Wireframes. When time is short just put your layout ideas on a paper with a focus on what elements should go where.
Some people prefer Visio, Adobe Illustrator, Photoshop, Freehand, Fireworks, and of course even PowerPoint, Dreamweaver, Adobe Indesign etc. But let us see some of the other tools, which the world may be using but you may be not. So before taking a trip to know all those other Wireframing tools, let us take a glimpse into some of their acknowledged benefits:
1. Wireframes are crucial component of the initial development stage as they generate user expectations and help to boost the understanding and flow of a website by increasing acquaintance with the site.
2. During the creation of the project, Wireframes function as a firm and established base on which to consider changes and new requirements. Common page structure and content needs for individual web pages are easily conveyed using Wireframes.
3. Wireframes mostly lead to a better output in terms of superior product because they are also immensely helpful in getting valuable and accurate input.
4. Wireframes/Prototyping makes it easy to compare and evaluate different ideas and rival designs, which further makes it easier to incorporate changes.
5. Development cost and time are ultimately cut down by sizeable amount by getting a signoff on a detailed Wireframes because programmers making never-ending changes to their code have become a passe.
Website Wireframes Tools (Web)
This is a web based tool for building website Wireframes. A Wireframe is simply a visual arrangement of the site content, which allows developer and the client to plan a web site’s content layout without much investment of time. This particular tool allows the Wireframes to be built in minutes, and if desired, a link to view the Wireframes can be sent through email, instant message, or even the phone. With both the parties able to view the Wireframes even from different locations, the Wireframes can then easily be updated based on feedback, discussion, ideas, suggestions, and so on. Two useful features according to me are – firstly the creation of a new version of wireframe each time you save, which of course helps in comparison and you can even rollback to any one of the older versions if the need arises. Secondly as discussed before that the results can be sent to the other party even at different location.
Simply create a free account by providing your email and its done, you can start using the tool!
Oversite (Mac, Win, Linux)
OverSite provides a menu of widgets with which to create wireframes, or mockups, for your web site or software prototype. OverSite has a number of components and shapes with which you can build your wireframes.Its drag and drop feature is like a slicing on the cake. One other feature which I personally like is that you can attach detailed notes to your components of the wireframes which are obviously helpful in the long run, which also helps in better understanding of the scenario.It has number of functions all designed around creating prototypes. Once you create a site structure with it, OverSite will automatically generate a sitemap illustrating the structure. You can export your website structure and wireframes into HTML (in addition to other formats such as PDF, although that would not provide you with click- through/link functionality the way an HTML export would). Its price starts at $35. It is for Mac, Win, Linux.
You can download it here.
A website wireframe is a great way to clarify your vision for an entire web development team. Gliffy, a free wireframe software makes it easy to create website wireframes and to share web mockups with anyone. Creating a website wireframe is easy with Gliffy’s free wireframe tool. Just drag and drop boxes, buttons, and lines from the web wireframe tool shape library anywhere onto the page. Then add text to your website wireframe to create a clear, website mockup.
Gliffy is an online application that makes it easy for you to create, share, and collaborate with diagrams. It looks and feels like a desktop application, but it works through your web browser, so there is nothing to install or maintain.
Collaboration feature is the one which works best in the Gliffy, it makes it easy for multiple users to work on a diagram in turns. But on the downside I don’t feel Gliffy as good in terms of usability and look and feel as others. But still it is free, a solid plus for you to consider Gliffy.
Gliffy has two types of accounts Basic and Premium. Obviously Premium has more advantages than the Basic like it is ad free etc. It has a monthly subscription which starts from $5.
You can compare its Basic and Premium accounts here.
It’s how you quickly build and refine clickable, working website prototypes, with real-time collaboration. It’s how you get your clients actively involved at an early stage. It’s how you make website development easier, simpler, and shorter. It’s how you save time and money while delivering a better website to happier clients. No paper or software required.
Much more than just wireframing software, ProtoShare is a collaborative website development tool. With ProtoShare there is no wireframe software to install, it’s all browser based within a SaaS (Software as a Service) environment. That means your team can collaborate from anywhere in the world where there is an Internet connection, allowing them to stay up to speed, and in the know, with only a browser.This real-time collaboration feature works like a charm and is one of my favourite and support for all my favourite browsers Firefox, IE and Safari is there!
ProtoShare supports both PC and Mac.
There is a thirty-day free trial and the cost starts from $26 a month. You can compare plans and prices here.
Axure RP (Win)
Axure RP is a rapid wireframing and prototyping tool used by professionals responsible for defining requirements and specifications for an application and designing the user interface and functionality. Axure RP enables application designers to create wireframes, prototypes, and specifications for applications and web sites faster and easier than creating static mockups with their current tools. One of the good thing with Axure is that it has ready-made widgets including buttons, form fields, shapes and dynamic elements etc.
It has a very easy to use interface and features such as masters and search & replace allow for quick global changes. You can generate interactive HTML prototypes from wireframes without coding. You can also generate instant specifications in Microsoft word format. Collaboration and integrated version control are also great. On the downside Axure is, what I feel, somewhat expensive and I also don’t like the untidy HTML code it generates.
It is for Windows only.
The cost of single user license is $589 but there are other discounts also.
You can download a trial version here.
Jumpchart has different types of accounts like Free, Simple, Super and Delux. You can compare these here. Free account certainly has its limitations as comapred to others.
Jumpchart’s Textile Markup Language is very easy to use and learn. Simpicity is what I liked most in Jumpchart. Snippet is another feature which is good if reusability is needed.
Jumpchart is hosted on the web and is intended for quick mapping and prototyping. A Jumpchart is shareable, exportable as clean CSS, and automatically generates its own sitemap. You can’t use Jumpchart to do advanced page layout or rich navigation design, but for sketching out the layout of a site, it’s a really easy-to-use tool.
Denim (Win, Mac, Unix)
Denim allows you to create a mock website, with linking pages, just from your rough sketches.
You create and modify your design on the canvas.To help you stay oriented, an optional extra floating window can provide a Radar View of an area of the canvas somewhat larger than what is visible in the main window. Some people find this helpful when they get lost inside their design, or when they wish to drag an arrow to a page which is not quite visible in the main window.
Designers can create representations of sites at multiple levels of detail and also the websites are iteratively refined at all levels of details.
Denim is for Windows, Unix, and Mac OS X. You can download it here.
Dia (Win, Mac, Linux)
Dia is a vector-based drawing tool similar to Win32 OS Visio. It is suitable for graphical languages such as dataflow diagrams, entity-relationship diagrams, organisation flowcharts, universal modelling language (UML) diagrams, electronic circuit diagrams and much more. It is ideal when the diagram has shapes that recur and are connected by lines. Dia is easy enough to learn without much hassle and flexible enough to make the power users feel right at home with their commercial tools.
Some people say that its export capabilities are somewhat buggy, but in my small usage time I could not find anything of that sort. UI is also not as good in relation to other similar softwares.
It can load and save diagrams to a custom XML format (gzipped by default, to save space), can export diagrams to a number of formats, including EPS, SVG, XFIG, WMF and PNG, and can print diagrams (including ones that span multiple pages). It is free of cost.
You can download it here.
MockupScreens helps you to sketch screen mockups of your application and organize them in scenarios. With MockupScreens you can experiment interactively with your clients, and quickly visualize scenarios of your application, even before the coding has started.
Due to its intuitive and straight-forward interface, MockupScreens is easy to use and allows fast screen drawings as it has element pallete to quickly add elements to screen. You can organize your screens in scenarios while creating storyboards and scenarios. Annotations to the individual screens, in the form of notes and preset collection of colorful icons can be added, seems pretty useful to me. I also like the built in slideshow mode which comes in handy if you want to explain something to the other person.
It is for Windows. The cost of single user license starts from $79.
You can download a trial version here.
Balsamiq Mockups (Win, Mac, Linux)
Balsamiq Mockups create and collaborate software mockups for you.
Balsamiq Mockups is faster as most of the other tools are and Balsamiq Mockups comes with a vast library of pre-built controls, so that you don’t have to spend time building them.
For super-fast selection, use the quick add features: just type a couple of characters from the control or icon name and bam! select from the list of suggestions, and your control will be added in no time. Other most useful feature is that Balsamiq Mockups has a powerful unlimited undo and redo, with clear action names to help you. Lack of export features to some extent is what I feel pinches more. But it is obviously easy to use and fast comparatively.
Mockups is tightly integrated with Atlassian Confluence, Atlassian JIRA and XWiki. With more than 60 pre-built controls to choose from, you can design anything from a super-simple dialog box to a full-fledged application, from a simple website to a Rich Internet Application.
It is for Mac, Windows, and Linux.
Its cost of desktop version starts at $70.
You can download the trial here.
Lucid Spec (Win)
Lucid Spec is a Windows application that helps you prototype and describe software user interfaces. With Lucid Spec you can rapidly create screens, show users, and iterate, this way you can finish by adding more details for developers. It can reduce software development costs, improve user satisfaction, accelerate project communication and clarify requirements. You can even create a functional specification. Lucid Spec allows you to see a simulation of the application running. This helps you and your users find missing or inaccurate requirements. What I like about Lucid Spec is that it supports 17 types of widgets for screen design including Menus, Grids, Trees, and Calendars. The widgets can easily be configured through properties.
In Lucid Spec, you iterate among 3 activities – 1) Design screens and their contents, by positioning widgets on the screen, and adjusting screen and widget properties. 2) Simulate applications, particularly the flow from screen to screen. 3) Describe behavior that isn’t clear from the layout. Descriptions can be tied to specific widgets or screens, or can be in sections.
The cost of single user license starts at $499.
You can download the trial here.
iRise is more than just a wireframing tool.
iRise Application Simulator helps users to define (and refine) requirements for and prototypes of Web applications. This amazing tool has many excellent features and can surely help improve software quality and reduce costs.iRise Studio 3.0, allows business analysts to create prototypes of Web applications within an integrated development environment (IDE). iRise Server, installs a mini application server. This module can be used to publish mock-ups of applications for dozens of users to try. It also tracks requirements, defects, test cases, and other project information, all of which are accessible via a Web browser. After creating a mock-up project, you can publish it to the server at any time and run it in simulation mode. This mode shows your prototype to other users via the Web.
I think its high cost is a great negative.
You can download the trial version here.
Intuitect has Intuitect Basic and Intuitect Professional editions. Intuitect Basic is completely free of cost and helps creating Sitemaps, Wireframes and Flowmaps. Intuitect Professional’s price starts at $145. Intuitect Professional is an easy-to-use design, modeling and documentation software tool for the UX design process. It enables the rapid creation of high quality specifications and prototypes for website and web-based application projects. It helps you creating patterns in wireframes for re-use and sharing, also helps in creating templates which helps you save all project elements for reuse, helps creating HTML prototype in one click along with all the features of the Intuitect Basic. You can see your design work as a page level wireframe, or as a sitemap or blueprint or through interaction flow which is most useful and enticing. Documentation is not as what anyone can expect from a product of this caliber.
Pencil (Win, Linux, FireFox Addon)
Pencil, a free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application. Its feature list include Built-in stencils for diagraming and prototyping, Multi-page document with background page, On-screen text editing with rich-text supports, PNG rasterizing, Cross-platforms etc. Pencil Project does not require any special expertise to use and it is fast also. Pencil will always be free and can run on virtually all platforms that Firefox 3 supports. Pencil Project seems to be very useful and since it is also free, try taking advantages out of it.
You can download it as a FireFox addon or as a standalone application from here.
OmniGraffle provides you with a set of tools to quickly and easily make diagrams, charts, website mockups, page-layouts, network diagrams , mind maps (huh!) and other things visual. OmniGraffle 5.0 uses new “Graphviz layout engine” which makes it more powerful, faster and easier to use. OmniGraffle opens and converts an array of file types, Microsoft Visio being one of them. There’s plenty of power under the hood to make all your diagramming and design fast and easy, with the ability to customize and tweak every aspect of your work.
Creating hotlinks on diagrams themselves is what I like. I like its prowess as well as its simple to use interface. Its Bezier curves are useful, but I find that these are somewhat difficult to use as far as my personal opinion is concerned.
It has two versions Standard and Pro, with Pro obviously being more feature rich than standard. You can compare them here. It is for Mac OS X.
The cost of standard version starts at $99.95
You can download the trials from here.
EasyPrototype (Win, Mac)
EasyPrototype works with your existing techniques such as paper sketches, Photoshop mockups, or whiteboard sessions so you can produce a dynamic prototype in just minutes. It allows you to rapidly prototype application user interfaces without coding, making the process ever simpler. Its feature list includes turning static photoshop images into dynamic prototypes, generating automatic tag rollovers with popup descriptions, linking pages together with one click using tag destinations etc. You can also create ZIP archives for sending your prototypes by email. I found the basic workflow of EasyPrototype very simple and comfortable to use, including the easy to use point and click interface.
It is for both Mac and Windows.
The cost is $69 with a 30 day money back option.
You can dowload a 30 day trial here.
SmartDraw draws for you. It can help you create Flowcharts, Organization Charts, Mind Maps, Project (Gantt) Charts, Timelines, Cause and Effect Diagrams, Landscapes and Floor Plans, Software Diagrams (UML, Booch OOD, Entity Relationship Diagrams etc.), Decision Trees, Family Trees, Network Diagrams, Genograms, Presentation Storyboards, do you need some water to drink! In most cases SmartDraw’s templates are sufficient. You can create charts and graphs without having to make a spreadsheet first. Simply pick a chart and type your data directly into the bars.
It also provides Web Page Annotation, just click to capture any web page then draw and annotate on top of it. It is great and helps in website review and development. SmartDraw works seamlessly with Microsoft Word, PowerPoint, and other Windows programs. smartdraw’s templates are a great strength. Limited maps may be its drawback which I feel.
SmartDraw’s built-in photo-software functionality allows you to import images directly from your digital camera or other source, crop and scale, adjust color and brightness, and drop them into org charts or any other illustration.
It is for Windows.
You can download the trial here.
For MxGraph no plug-ins or third party software is required, it just allows you to create and draw diagrams right in your browser. MxGraph can be used to trace workflow, for networks, databases, and more.
The exact price of MxGraph varies, depending on usage. The price range of mxGraph starts at 3,600 Euros for a limited distribution single development license with 12 months of technical support and software updates. The browser list it supports includes Firefox, IE, Safari, Opera, Camino, Iceape, Epiphany, Galeon, Google Chrome, I think they forgot to mention flock.
WireframeSketcher (Eclipse plugin)
WireframeSketcher is a tool that helps you quickly create screen mockups and UI prototypes right from within Eclipse IDE . It provides lots of widgets and screen parts. WireframeSketcher provides a canvas on which designers can design mocups with widgets such as labels, text fields, trees and tables. WireframeSketcher has all the usual editor functionality such as copy&paste and an infinite undo-redo. Multiple screens can be edited at the same time and the content can be copied between them.
Screen mockups are saved in XML format and can be easily stored under version control, compared and merged. Mockups can be exported to clipboard or to a PNG file. In order to get a free license key follow the instructions here.
Draw (Part of OpenOffice)
Draw is a powerful graphics package that lets you create graphics and diagrams. I love the Park feature that allows you to access drawing tools on a single click. I also liked the feature to group, ungroup and regroup the objects. Its other general features are manipulation and rotation of objects in two or three dimensions, importing graphics from common formats like BMP, JPEG, PNG, TIFF etc, saving your graphics in OpenDocument format etc. One more enticing feature is Draws ability to create Flash versions of your work.
|Feature Comparison Table|
|Website Wireframes Tools||Web Based||Free|
|MxGraph||Web Based||3600 Euros|
|Draw||Part of OpenOffice||Free|