16 Design Tools for Prototyping and Wireframing Article

8. Balsamiq Mockups

Balsamiq Mockups (price:$US79, demo available) is an interesting product running on Adobe AIR. Its representation of the interface elements has a refreshing hand-drawn, sketch-like quality to them. This does help promote the degree of changeability of the wireframes, as they look very much like a draft. If you lack the skills to create hand-drawn sketches then Balsamiq is a useful tool, as it allows you to produce quality roughs. Balsamiq also offers a standard collection of interactive screen elements, which is helpful to start off with.

16 Design Tools for Prototyping and Wireframing Article

Balsamiq Mockups also introduces BMML (a flavor of XML), which enables you to export your wireframes.

However rather than a prototyping tool, it’s more targeted at communicating the concepts of a proposed interface via wireframing and the like.

9. Lucid Spec

Lucid Spec (price: from $US499, demo available) from Elegance Technologies is a windows-based .NET application that’s almost a clone of Axure. It has a series of rapid screen drawing tools and a prototyping testing mode they call “instant application simulation,” which can be viewed in full screen mode or within the application. There’s even a stand-alone Lucid Spec Player that allows you to conduct prototype testing without the need for the full application.

The one aspect that Lucid Spec lacks is allowance for those between state, Ajax-like interactions. The interactions presented are very much based on the traditional, page-by-page screen flow.

10. ConceptDraw Pro

ConceptDraw Pro (price: from $US249, demo available) promotes itself as an alternative to OmniGraffle and Visio, aiming at the business and technical diagramming market.

I’m pleased to say it does live up to these claims with various functions that are comparable to its competitors.

In addition to this it also has its own scripting language, ConceptDraw Basic. It’s possible with this scripting language to generate complex, customized prototypes. If you want to avoid going down the custom scripting route, you can use the standard export to HTML or PDF for prototyping.

ConceptDraw also has a Web Design plugin for us web designers, WebWave Plugin (price: from $US99, demo available). The WebWave Plugin streamlines the design process, allowing easier development of site and content structures to the mocking up of medium resolution wireframes – a bit like coloring in the gray boxes. You can then take the final mockup pages from ConceptDraw and produce the CSS and pages for a prototype.

ConceptDraw Pro is available for both Windows and Mac platforms.

11. iPlotz

iPlotz (price: free to $US99 per year) is a new web application aimed at the design and developmental life cycle market. It bundles project management functionality as well as wireframing, collaborative commenting, and testing prototype generation. Being browser-based this application can be used anywhere there is web access, allowing for true remote collaborative design and implementation.

Visually, iPlotz presents itself as an attractive and professional application. It’s a Flex application, and hence all the features from management to preview are accessed via the Flash interface, and so will require the latest Flash plugin, an easy ask for a designer or developer.

16 Design Tools for Prototyping and Wireframing Article

The rapid generation of wireframes within this application reminds me of the speed and ease of use of Axure, but with the hand-sketched look of Balsamiq Mockups. Another nice thing about iPlotz is that its focus is just on web design, nothing else. This is a pleasant change.

It’s early days for iPlotz, however there are a few items that do need addressing. The commenting interface can be a little distracting; the comments tend to crowd the screen if you have more than a few. There is only one font face available – comic sans. Also, at present the export functionality is limited to JPG, PNG, or a PDF. Still, this application is definitely one to watch.

12. Go Analogue

There is a lot to be said for stepping away from the computer and doing the initial wireframing with pencil and paper. You could extend this to paper prototyping as well. It’s fast (to build), cheap, and easy to use. For groups you can prototype using a large whiteboard, markers, and a few magnetic page elements. Both these methods tend to be highly interactive with the audience and can bring a moderate degree of humor to an otherwise dry process.

There are downsides to these analogue methods as it can be slow to produce and revise the screens, as well as being easily disregarded by management because of the disposable nature of the final product. I have found that they’re useful for the generation process, but the final documentation needs to be presented in a formal tool.

Multifunctional Applications

13. PowerPoint or Keynote

Often an organization is unable to afford specialized software for prototyping or wireframing. This is where applications like Microsoft PowerPoint (price: from $US229, demo available) or Apple Keynote (price: from $US79, with iWorks, demo available) can be used. Both these packages are well-suited to producing very rapid, simple prototypes. They’re highly compatible with the wide range of most teams’ skill set, so by using these tools you can usually have any team members immediately contributing to a prototype with ease. The downside is many of the finer interactive elements, such as between states, are missing, and your logic path tends to be of a very linear nature. Still, you can often export the prototype to HTML or Flash as well.

14. Adobe Fireworks

Adobe Fireworks (price: from $US299, demo available) is a tool I’d yet to consider using for prototyping – being a Photoshop devotee from way back. However, all this has changed with the release of Adobe CS4.

Fireworks is now shaping up to be a viable tool for producing both low and high fidelity prototypes, using nested symbols, smart guides, as well as generating all the code behind it. As usual this code suffers a little from the automatic generation process, so it’s going to need to be massaged into a reasonable shape if you want to reuse it for your final production model.

A side note here is that I know of others also using Adobe Photoshop and Illustrator, or Microsoft Expression Studio as wireframe documentation tools. These tend to work well when you have a good library of objects, such as brushes and the like.

15. HTML

If you have the skills, you could just develop your prototypes in HTML. This is especially useful if you are producing the front-end code that’s going to be consistent in standards with the final web site anyway. Doing it this way will save you time and money by reducing the overall production time.

These days – with the use of various jQuery plugins – you can represent nearly all the between states or major interface types that have been proposed with ease.

Functionality is also available via the use of Protonotes; you can have your team collaborate on your prototype by leaving dynamic, virtual Post-it like notes.

Even if your skill set falls short of being technically-oriented, you could use developmental platforms like Adobe Dreamweaver and its improved JavaScript Spry components to produce a reasonable visual representation.

I will admit I have often done this, quickly pulling together a working HTML prototype from within Dreamweaver with little regard to the underlying code. Remember, it’s just a prototype and so only has to be visually representative of the final product. I shudder to say this, but in this case the code is secondary.

16. Adobe Flash

Adobe Flash (price: from $US699, demo available) is a great tool for producing rapid interactive prototypes or screen flows, but is unsuitable for wireframing and specification documentation. However, via the use of the library objects, the timeline, and drawing tools it’s very easy to produce an interactive prototype. The one area Flash is especially suited is in the reproduction of those in-between states that many static presentation tools lack.

This functionality of using Flash as a prototyping tool is now being extended by Adobe with the introduction of an entirely new tool for designers and developers alike: Catalyst. Now I’ve yet to try Catalyst personally – I can only go off the Adobe video and the reports from colleagues that have seen it in operation. But trust me here, this application is going to change the marketplace and make RIA development the next big thing! There, I said it; some of you will disagree, and that’s fine.

Another thing that Catalyst is promising for people like me that use a Mac, is that it will give us the jump on our colleagues using Axure. We shall see on that one.

If you enjoyed reading this post, you’ll love SitePoint Premium; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Photoshop for Web Design.

Image Attribution: Kevan

Go to page: 1 | 2


Category: web Time: 2009-03-29 Views: 0

Related post

  • 16 Design Tools for Prototyping and Wireframing 2009-03-25

    This article was written in 2009 and remains one of our most popular posts. If you're keen to learn more about wireframing, you may find this recent article on free online wireframing tools of great interest. In recent years the number of tools avail

  • What FLOSS DB design tool for Linux would you recommend? 2010-02-23

    I want to find a relational DB design tool for Linux, that could export DB schema for MySQL, SQLite and PostreSQL at least. And it should be handy, of course. Good-looking GUI is also a plus ;-) I use Gnome, but KDE tools are interesting too. -------

  • What are the most popular DNS amplification attack tools for Windows and Linux? 2015-12-02

    I would like to test my edge-router firewall rules against some DNS amplification attack traffic. I could run some DNS lookup utility in an endless loop, but maybe there are some dedicated utilities which are popular among attackers and would give a

  • Best tools for preparing and styling a table 2011-10-21

    What are the best tools for preparing and styling a table in Wordpress easily? Update: I want to prepare and publish the tables in any page or post. So I think it might be easier if they can be prepared with an easy to use shortcode. --------------So

  • Simple tool for cropping and scaling images 2014-08-04

    I am wondering if there is a simple and quick tool for cropping and scaling images. For example, if when creating a web page for an online store, you might need a set of images for each product. Lets say you need half a dozen images each of a certain

  • What are features of a suitable tool for tracking and reporting security incidents? 2015-01-09

    What are features of a suitable tool for tracking and reporting security incidents? Is it a bad idea to have one central repository for tracking all types of incidents, from helpdesk issues, to security attacks, failures, power outage, and downtime?

  • Forensic tools for disk and image analysis 2015-02-16

    Are there any forensic tools or programs like FTK and EnCase in Windows for Linux? Or any disk and image analysis tools? --------------Solutions------------- take a look to DEFT Distribution Based ON Ubuntu DEFT (acronym for Digital Evidence & Forens

  • What are some good tools for prototyping map layout and design? 2010-08-16

    I'm curious as to what the best method for sketching out and prototyping a map is, and if there are any tools available to facilitate this. Pen and paper is probably a good place to start, but I would like to know if there are any worthwhile tools to

  • Online white-boarding tool for diagrams and software design sessions 2014-11-13

    I used to work with Dabbleboard as a white-boarding tool across teams. It was a great tool, but was taken down for some reason. Is anyone hosting anything like it? I found Dabbleboard really easy to use for diagrams and software design sessions. I wo

  • 2 Tools for Prototyping Mobile Apps 2014-08-13

    "There is an app for that" Is the quote you're likely to hear when asking someone for help these days. There is an app for almost anything. But what about the developers and designers amongst us? Is there an app for that app? That's a different

  • What language to use for prototyping and creating quick scripts? 2011-05-05

    Right now, I use Python for my quick scripts and prototypes (e.g. algorithms, my pseudocode is very Python-like as well). The oher languages that I am familiar with include Java, C, x86 Assembly and Scheme, and Python is pretty much the best for this

  • iPad app where possible draw, save for reuse and drop 'objects' on canvas for prototyping and to make mockup 2012-05-06

    This question already has an answer here: Wireframe iOS design apps for iPad? 6 answers For prototyping / mockup needs, I want an iPad app where it's possible to draw, save and drop 'templates' on a canvas. Something similar to balsamiq mockups, wher

  • Why does Apache have two separate tools for build and dependency management? 2015-07-07

    Apache has two separate tools: Apache Maven Apache Ant + Apache Ivy They seem to both fill the same niche. I have two questions: What are the highlights of the main differences between the two tools? I'm sure a really long article could be written on

  • Is a Processing language a good tool for prototyping? 2016-07-29

    I'm a UX designer who use Axure RP PRO and some bits of JS while I'm making mobile prototypes, but recently I'm thinking about Processing language to use it to make simple mobile prototypes with animations. Does anybody use processing in this way? Is

  • What is the best tool for creating and managing RSS feeds? 2009-12-21

    My boss just asked me to maintain and create an RSS feed of hot news topics in our field for our site. Are there any easy way to use tools for managing an RSS feed, where I can easily go in and add/edit entries? --------------Solutions------------- T

  • Designing tool for C# 2011-03-23

    I have seen few developers use a tool for designing their application where they simply dragged needed elements (classes, variables, objects) and just did magic work. Then there was a button to generate a code where the design was generated into a C#

  • Keyboard shortcut design methodology (for keyboard and touch screen) 2012-06-19

    What sort of methodologies should I employ to choose which letters and shifting keys to assign to different functions? Is underlining the accelerator letter the best practice, or should I spell out the combination? If anyone has experience with choos

  • Tools for modelling and analysis of cryptographic protocols 2012-12-26

    I am designing some cryptographic protocols and I am new to it. Are there any well-known tools that can be used to model and design these protocols? And also verify or analyze their validity? If not a tool, is there any popular approach or formal met

  • Is it necessary to be good at drawing, to develop good 3D digital design skills for modeling and animation? 2014-05-09

    I want to make 3D animation films. Not as hi-fi as Disney and Pixar of course, but as close to them as an indie animator can get. I'm good (not enviable, just plain good) at drawing things on paper but I haven't really delved into digital art much. I

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 1.752 (s). 13 q(s)