Rapid Prototyping Tools
Prototypes, like design tools, are on the rise, and here's why. I firmly believe that prototyping helps us in the process of creating high-quality user interfaces. We work in a world of rich, dynamic user interfaces, both online and on our devices. The interfaces that we create are interactive, respond to user input and have emotions. Prototypes allow to formulate the feelings and functions of the design in a way that simple screen forms cannot. But how to choose the best prototyping tool for the job?
Creating effective prototypes
In order to evaluate the tools or techniques of prototyping, we first need to determine the criteria for an effective prototype. The best are those prototypes that flow into the design process. We want to be able to quickly move from sketches to interactive implementation.
Effective prototypes are fast. We want to use techniques that help make iterations shorter. The prototype stage should not be rigidly fixed at the end of the design process. Incorporating prototyping into your daily designer work contributes to the emergence of ideas and the quick verification of concepts.
Effective prototypes are disposable. Like any other design designed for implementation, we create an artifact designed to convey the idea to someone else (the person concerned, the developer, the user, etc.). After the design idea has been communicated, the prototype implementation can be rejected. We do not have to endure the hard feeling that we are creating a masterpiece that will be realized without fail, and we certainly should not create a prototype working at the code level.
Effective prototypes are focused. We want to choose the interactive elements of our design that really need to be prototyped. Look for parts of your design that are complex. Look for interaction patterns that have long been known in user experience theory. Look for interaction elements that will benefit your product. A prototype that demonstrates these elements will be the best use of your time and energy. [...]
Tool selection
Together with the basic set that the prototyping tool should provide us with in order to create an effective prototype, we consider what will suit our particular organization.
First of all let's take a look at the team. Anyone from the staff can program? Is a design technologist a member of our user experience group? Do we have strong relationships with an engineering department that can help create prototypes? What about full-time developers who can help? Determining our technical capabilities will indicate to us the direction of programming the prototype manually or using drawing-based prototyping software.
How big is our team? We are a team of user experience, consisting of one person, engaged in both research and drawing sketches and prototyping? Or are we members of a small, cohesive team that can carry out the process of creating a finished prototype in less than one day? Or are we part of a large organization, and there is a need to break through the turbid water of corporate policies and different points of view on our prototype? Often, the larger the team, the more details of the prototype (description) will be required.
Where are the people who will evaluate our prototype? Are they in the same office with us, looking over his shoulder? Or are they far away? Are they in the country with the same time zone? A positive answer to this question increases the likelihood of discussion with the help of the prototype, since it describes itself 100%.
Is the user experience team part of a development team, or an involved consulting group? If we are part of a team, are we strongly integrated with the engineering team, or are we a completely separate department? The user experience group that was attracted from the outside often has to defend its design concept a bit more.
What is our budget for the prototyping tool? As with most software, offer boundaries range from free to expensive. The best solutions usually fall in the lower part of the average price range. Super-expensive solutions (both in terms of time and in terms of price) are usually not worth it.
How flexible should our prototyping tool be? Do we focus only on one platform, for example, the web? Or do we design for many platforms, mobile, terminals, television, consumer electronics, the Internet? Many prototyping tools are created for only one direction (most often for websites), so we either have to choose one thing that we like or focus on how to create prototypes using programming.
Prototyping tools
Given these criteria, a list of prototyping tools has been created. [...] I hope that together we can formulate detailed selection criteria and options for aspects of prototyping. This list will be revised based on feedback from the community.
* Released, or added to the table after posting in March 2009
[1] For the year
[2] For the year
[3] Plus $ 135 for Enterprise Architect
grumbler_chester : The table containing the list of prototyping tools is regularly updated in the original post.
Creating effective prototypes
In order to evaluate the tools or techniques of prototyping, we first need to determine the criteria for an effective prototype. The best are those prototypes that flow into the design process. We want to be able to quickly move from sketches to interactive implementation.
Effective prototypes are fast. We want to use techniques that help make iterations shorter. The prototype stage should not be rigidly fixed at the end of the design process. Incorporating prototyping into your daily designer work contributes to the emergence of ideas and the quick verification of concepts.
Effective prototypes are disposable. Like any other design designed for implementation, we create an artifact designed to convey the idea to someone else (the person concerned, the developer, the user, etc.). After the design idea has been communicated, the prototype implementation can be rejected. We do not have to endure the hard feeling that we are creating a masterpiece that will be realized without fail, and we certainly should not create a prototype working at the code level.
Effective prototypes are focused. We want to choose the interactive elements of our design that really need to be prototyped. Look for parts of your design that are complex. Look for interaction patterns that have long been known in user experience theory. Look for interaction elements that will benefit your product. A prototype that demonstrates these elements will be the best use of your time and energy. [...]
Tool selection
Together with the basic set that the prototyping tool should provide us with in order to create an effective prototype, we consider what will suit our particular organization.
First of all let's take a look at the team. Anyone from the staff can program? Is a design technologist a member of our user experience group? Do we have strong relationships with an engineering department that can help create prototypes? What about full-time developers who can help? Determining our technical capabilities will indicate to us the direction of programming the prototype manually or using drawing-based prototyping software.
How big is our team? We are a team of user experience, consisting of one person, engaged in both research and drawing sketches and prototyping? Or are we members of a small, cohesive team that can carry out the process of creating a finished prototype in less than one day? Or are we part of a large organization, and there is a need to break through the turbid water of corporate policies and different points of view on our prototype? Often, the larger the team, the more details of the prototype (description) will be required.
Where are the people who will evaluate our prototype? Are they in the same office with us, looking over his shoulder? Or are they far away? Are they in the country with the same time zone? A positive answer to this question increases the likelihood of discussion with the help of the prototype, since it describes itself 100%.
Is the user experience team part of a development team, or an involved consulting group? If we are part of a team, are we strongly integrated with the engineering team, or are we a completely separate department? The user experience group that was attracted from the outside often has to defend its design concept a bit more.
What is our budget for the prototyping tool? As with most software, offer boundaries range from free to expensive. The best solutions usually fall in the lower part of the average price range. Super-expensive solutions (both in terms of time and in terms of price) are usually not worth it.
How flexible should our prototyping tool be? Do we focus only on one platform, for example, the web? Or do we design for many platforms, mobile, terminals, television, consumer electronics, the Internet? Many prototyping tools are created for only one direction (most often for websites), so we either have to choose one thing that we like or focus on how to create prototypes using programming.
Prototyping tools
Given these criteria, a list of prototyping tools has been created. [...] I hope that together we can formulate detailed selection criteria and options for aspects of prototyping. This list will be revised based on feedback from the community.
| Tool name | Description | Platform / Price / Manufacturer | Link |
|---|---|---|---|
| Axure RP Pro | A tool focused on creating prototypes of websites. Generates clickable HTML and documentation in Word format. Supports complex interaction. | Windows / $ 589 / Axure | www.axure.com/p101_5.aspx |
| Balsamiq mockups | Allows you to very quickly create layouts of your software. The generated content looks like sketches, which will help not to mislead those who might think that the program is ready. | Web / $ 79 / Balsamig | www.balsamiq.com |
| CogTool * | Creates simple user interface layouts and allows you to evaluate their effectiveness. Predicts how much time an experienced user will need to complete a task. | Cross-platform / Free / Bonnie E. John | cogtool.hcii.cs.cmu.edu |
| Coutline * | Web application for creating and viewing interactive prototypes. Includes project management and monitoring team participation. | Web /? / Coutline | www.coutline.com www.usability.by/coutline |
| Dreamweaver | Use the visual part of Dreamweaver to drag and drop design elements using drag-and-drop, add interactivity, and dive into code for more complex prototyping. | Cross-platform / $ 399 / Adobe | www.adobe.com/products/dreamweaver |
| EasyPrototype * | Very similar to the popular Axure, a lightweight tool that allows you to design screen forms and export interactive HTML prototypes and documentation. | Cross-platform / $ 69 / ExtremePlanner Software | www.extremeplanner.com/easyprototype |
| Excel * | Do you think "Excel, are you crazy"? The authors of this book do not think so. | Cross-platform / $ 229 / Microsoft | www.effectiveprototyping.com/ep_excel.shtm excelprototyping.weebly.com |
| Expression Blend | Generates prototypes for Silverlight and WPF applications with rich interactive features, fast speed through Drag-and-Drop. | Windows / $ 499 / Microsoft | www.microsoft.com/expression/products/Overview.aspx?key=blend#page-top |
| Expression Blend + SketchFlow * | Creating task flow maps and interface concepts that look like sketches. Prototypes can be converted to the final product using the Expression Suite. | Windows / $ 599 / Microsoft | www.microsoft.com/expression/products/Sketchflow_Overview.asp |
| Expression design | A powerful drawing tool for prototyping HTML, Silverlight and WPF applications with limited interactivity. | Windows / $ 699 / Microsoft | www.microsoft.com/expression/products/Overview.aspx?key=design |
| Fireworks | You can create complex interactive prototypes. Many tools are similar to some tools from the Adobe suite. It is possible to export to PDF or HTML. | Cross-platform / $ 299 / Adobe | tv.adobe.com/#VI+f1498v1659 |
| FlairBuilder * | Creates interactive screen forms using the desktop Air application. Sends the result to the client for viewing as a standalone application. | Cross-platform / $ 99 / Cristian Pascu | www.flairbuilder.com |
| Flash | Quickly generate animations or simple interactive prototypes. If you have knowledge of ActionScript, you can create complex interactive prototypes. | Cross-platform / $ 699 / Adobe | www.boxesandarrows.com/view/quick-and-easy-flash |
| Flash catalyst | The tool, which is still in the process of development, is designed to help designers create interfaces for flash applications. | Cross platform /? / Adobe | labs.adobe.com/technologies/flashcatalyst |
| Flex | Despite the fact that it is more adapted for developers, WYSIWYG editor and support for importing skins from Ilustrator provide an opportunity to quickly go from the project to the prototype. It is possible to export Flash or Air applications. | Cross-platform / $ 249 / Adobe | www.adobe.com/products/flex |
| ForeUI * | Creates layouts, defines and models the behavior of the application in the browser. | Cross-platform / $ 79 / EaSynth Solution | www.foreui.com |
| FormBuilder for Drupal | It has a web interface with the ability to drag items to the page. Creates working forms, including requirements for input parameters, in minutes. | Web / Free / Lullabot | www.lullabot.com/blog/drupals-form-building-future |
| GUI Design Studio * | Creates interfaces, annotations to them, builds storyboards to define a working prototype. It has a beautiful visual style, similar to sketches. | Windows / $ 499 / Caretta Software | www.carettasoftware.com/guidesignstudio |
| iPlotz * | A web application that creates interactive screen forms. It also includes a basic set for managing a project, like assigning tasks. A desktop version is available (Air). | Web / $ 99 [1] / iPlotz | iplotz.com |
| iRise | A comprehensive tool for business process modeling and application interface design. | Windows / $ 6995 / iRise | www.irise.com |
| Justinmind Prototyper * | Creates screen forms with the ability to determine their behavior through the description using use case-diagrams. | Cross-platform (For Mac is only beta version) / $ 690 / Justinmind | justinmind.com |
| JustProto * | Web-based application to work with a remote team. | Web / $ 99 [1] / DeSmar | www.justproto.com/en |
| Keynote | Looks like a powerpoint. Allows objects to be clickable, open external links, play Quicktime format, move to a new slide atovmatically. | Mac / $ 79 / Apple | www.apple.com/iwork/keynote |
| Liveview | View your desktop on a virtual iPhone, or as an application on a real iPhone. | Mac / Free / IDEO | labs.ideo.com/2009/01/20/liveview-an-iphone-app-for-on-screen-prototyping |
| Lucid Spec * | Design screen forms and simulate business applications using standard controls and an easy-to-use drawing tool. | Windows / $ 499 / Elegance Technologies | www.elegancetech.com/LS/LS.aspx |
| MockApp * | Keynote iPhone Interface Library. There is also an untested version for Powerpoint that does not export correctly. | Cross-platform / Free / Dotan Saguy | mockapp.com |
| MockupScreens * | A simple tool for creating screen forms without interactive possibilities. | Windows / $ 100 / MockupScreens | mockupscreens.com |
| Omnigraffle | A tool for building charts and layouts that can be exported as clickable HTML or PDF. | Mac / $ 200 / OmniGroup | urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle |
| OverSite * | Creates the structure of the application, allows you to design interfaces and simulate applications in the form of a clickable prototype. It is possible to import an existing site for use as a starting point. | Cross-platform / $ 65 / OverSite | taubler.com/oversite |
| Pencil | Firefox add-on, which is more than just a screen builder or a prototyping tool. | Cross-platform / Free / Duong Thanh An | www.evolus.vn/Pencil |
| pidoco * | [...] Web-based tool for prototyping, with the possibility of working together in standard mode and sketch mode. | Web / $ 600 [2] / pidoco | pidoco.com/en |
| Polypage * | jQuery plugin that allows you to show / hide page elements. With it, you can simulate a state change through the toolbar. | Cross-platform / Free / ClearLeft | 24ways.org/2008/easier-page-states-for-wireframes |
| Powerpoint | Powerpoint slides - a prototype? Yes, this is a little-known fact, but Powerpoint supports interactive hot spots, which can be used for transitions between slides. This can be combined with transition animation. | Cross-platform / $ 229 / Microsoft | www.boxesandarrows.com/view/interactive |
| Protonotes | It is not a prototyping toolkit, but allows a disparate team to comment on the project via the Internet. | Web / Free / Webanza | www.protonotes.com |
| Protoscript | A super-simplified scripting language that gives designers the ability to add dynamic elements to existing HTML pages. | Web / Free / Bill Scott | protoscript.com |
| Protoshare | A web application focused on teams that need to be able to collaborate with interactive screen forms. | Web / $ 156 [1] / Site 9 | www.protoshare.com |
| Prototype Composer | It allows prototyping for web and desktop applications. [...] | Windows / Free / Serena | www.serena.com/products/prototype-composer/index.html |
| Screen Architect * | Works in conjunction with the UML modeling tool Enterprise Architect for creating prototypes of the interface in RTF and HTML formats. | Windows / $ 120 [3] / CATCH | www.screenarchitect.com |
| Tinderbox * | A comprehensive recording tool that can be used to export to clickable HTML. | Mac / $ 229 / Eastgate Systems | www.eastgate.com/Tinderbox |
| Visio Professional | Many people call Visio the “gold standard” for screen creation tools. Can create interactive prototypes. | Windows / $ 560 / Microsoft | office.microsoft.com/en-us/visio/FX100487861033.aspx |
| XHTML & CSS | Learn programming skills, get rid of prototyping programs and create prototypes with your hands! | Cross platform / Free / W3C? ;-) | www.boxesandarrows.com/view/prototyping-with |
* Released, or added to the table after posting in March 2009
[1] For the year
[2] For the year
[3] Plus $ 135 for Enterprise Architect
grumbler_chester : The table containing the list of prototyping tools is regularly updated in the original post.
')
Source: https://habr.com/ru/post/70001/
All Articles