- Prototyping Tool For Windows
- Best Prototyping App For Mac
- Prototyping Tool For Mac
- Snipping Tool For Mac
- Wireframe Tool For Mac
- Drawing Tool For Mac
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.
Justinmind (Mac & WIn)| ($228/year). Justinmind is a flexible prototyping tool for web and mobile app prototypes and high-fidelity website wireframes. The rich gestures in Justinmind allow designers to better build gesture interaction mobile apps. Visio has also spawned a number of add-on tools; Swipr (which is free) is the most relevant as it allows for rapid export of wireframes and screen flows into a clickable HTML prototype.
Prototyping Tool For Windows
In recent years the number of tools available to help you document and design your web site has just exploded. It seems that we all need a wireframing or prototyping tool at our fingertips (at least in the design arena). So in order to save you the hard work required to find one, I’ve assembled this list. It can be expanded upon, so if you use an unlisted application, please let me know and I’ll add it to the list.
The tools tend to fall into two categories:
- purpose-built applications
- multifunctional applications
Within these two groups I’ve found that usefulness can vary markedly among tools; some are only suitable for diagramming and wireframing, while others focus only on prototyping. The best are blessed with both capabilities and more.
Purpose-built Applications
1. Visio
Best Prototyping App For Mac
I will state upfront that I’m not a big fan of Visio (price: from $US259, demo available); I’ve used it from time to time on various projects, but I’ve always found it fiddly and time-consuming.
Visio first started as an add-on to MS Word, filling the need for a business and technical diagramming tool and eventually graduating to separate product status. Visio’s power remains in the area of diagrammatical documentation; as a prototyping tool its functionality is limited at best. However Visio, like Omigraffle (below), is particularly suited to content map generation from CSV files. In the recent version, Visio 2007, the addition of the UML plugin has allowed for smoother importing of UML.
Visio has also spawned a number of add-on tools; Swipr (which is free) is the most relevant as it allows for rapid export of wireframes and screen flows into a clickable HTML prototype. This is very handy for creating the entire prototype in one go and not having to link it together after exporting.
Visio is only available on the Windows platform.
2. OmniGraffle Pro
Yes, I’m a little biased here; I do like OmniGraffle (price: $US199, demo available), especially the latest version. OmniGraffle is best suited as a tool for wireframes, screen flows, and content maps. It can also be used as a prototyping tool, with the ability to link canvases (pages). This allows you to produce a complete HTML prototype in one operation from OmniGraffle. You can, via the use of the notes function, easily annotate and complete the specification documentation for your prototype objects as you go.
OmniGraffle provides an extensive series of Visio import and export functions, allowing for cross-platform team compatibility. It also allows you to import your base content structure from a CSV or XML file via a fully customizable rule-based layout function; this can be especially handy for documenting large and ever changing content maps.
Support for OmniGraffle is supplemented by a large online community, as is evidenced by the resources available at Graffletopia. OmniGraffle is only available for the Mac.
3. Axure RP Pro
Axure (price: $US589, demo available) has rapidly become the darling of the user experience and information architecture communities. The application allows you to construct wireframe models, document functional specifications, and generate prototypes, all using a built-in version control system.
Axure is an extremely rapid wireframing and prototype generation system that I’ve personally found pays for itself very quickly – in terms of increased productivity – despite its mid-level price tag.
Axure allows for complete flexibility when designing an interface, from standard widgets, to custom builds, to an open-ended canvas. However, Axure’s true killer functionality is the generation of rich HTML prototypes and Ajax-like interactions between states. It’s a little like Dreamweaver and its JavaScript generation, but good.
A word of caution: if you do go looking under the hood of your HTML prototype, the code it generates is not for the fainthearted and should never be considered for use beyond a testing prototype.
The one downside for me is that it only runs on Windows. If it was available on the Mac, I would be very happy with Axure.
4. iRise Pro
iRise (price: from $US6,995, demo available) was the first product of its type to market, and has advantages and disadvantages. The iRise product suite is very Axure-like in its functionality, and as the price suggests, is clearly geared towards an enterprise-level market.
Price aside, the one thing that I dislike about iRise is the user interface. Now this may be a personal preference, but you would think that if you’re going to be producing a tool for user experience professionals that you would at least make sure the UI is right. iRise suffers from a legacy interface that uses older GUI methods and techniques. I believe it’s in real need of an overhaul.
Still, if you’re looking at working with very large teams and need a comprehensive suite of products to span your entire prototype development life cycle, then iRise is worth a look.
5. Pencil
Pencil (free) is a Firefox plugin that professes to enable you to build wireframes and prototypes. As a prototyping tool it’s quite good, allowing you to quickly put together a reasonably high fidelity mockup. However, be aware you’ll still need to produce the visual design elements for Pencil, as it relies on dragging and dropping pre-made graphical elements.
The output wireframe elements that ship with Pencil do tend to be based on the look and feel of a Windows desktop application. This really is undesirable for a web application, however you could modify this with your own page elements.
Another downside of Pencil is that its export functionality provides only a few image formats. This means that Pencil falls short of being a real interactive prototype development tool.
6. SmartDraw
SmartDraw (price: from $US297, demo available) is marketed at the business diagramming sector, it’s not really a dedicated wireframing and prototyping application, but that doesn’t mean that it should be dismissed completely.
It’s at the lower end of the market so you would expect a reduced functionality set compared to Axure. SmartDraw is aimed at the same market as Visio or OmniGraffle, with a standard template suite and few auto generation features. For prototyping SmartDraw allows you to add simple dynamic elements to a page, with the final output being a PDF file. There is no allowance for the representation of the transition between states on prototypes.
SmartDraw is only available for Windows, offering a degree of MS-Office Suite integration.
7. MockupScreens
MockupScreens (price: from $US79, demo available) is a Windows-only application. It focuses primarily on the building of simple prototypes from a series of wireframes based around common screen elements.
The prototyping functionality is limited, and only available within the MockupScreens application. I do note that you can export the screens as image files or as a very limited HTML rendering. This product is very much at the bottom end of the market in terms of cost and functionality, however this may suit your needs.
Go to page:1 | 2
![User interface prototyping tools User interface prototyping tools](/uploads/1/2/6/5/126548455/530832809.jpeg)
This article lists all operations from the main menu.
Workspace main menu
- Justinmind – settings include references, services and quit. Note that this item is for Mac users only
- File – settings related to the handling of Justinmind prototypes (open, save, close, export, import etc.)
- Edit – settings related to the handling of information within a Justinmind prototype (copy, paste, undo, redo etc.)
- View – settings related to the appearance of the Justinmind workspace
- Simulate – settings related to the simulation of a prototype
- Widgets – settings related to Justinmind’s Widget libraries
- Share – settings that allow you to share your prototype with others via your online account
- Teamwork – settings related to team prototyping (add/remove users, show version history etc.)
- Plug-ins – settings related to Justinmind’s plug-ins (install a plug-in, configuration settings etc.)
- Help – settings related to account and prototyping support (Support, Check for updates, About Justinmind prototype etc.)
Justinmind menu (only for Mac)
- About Justinmind – provides detailed product information (Justinmind version, key and maintenance details can be found here)
- Preferences (this is the “File” main menu option for Windows users) – click the “Preferences” main menu option or enter “⌘” + “,” on your Mac keyboard to be taken to a dialog containing a set of preferences. See the “Preferences” section below for details on this dialog.
- Services – click to change system preferences in relation to the Justinmind editor (keyboard, language, fonts etc.)
- Hide Justinmind – click or enter “⌘” + “H” to minimize Justinmind
- Hide other – click or enter “⌥” + “⌘” + “H” to minimize all windows apart from Justinmind
- Show all – click to make all windows appear again
- Quit Justinmind – click or enter “⌘” + “Q” to close Justinmind
Preferences
From this dialog, you can modify various program-level user preferences. Your changes will remain upon re-opening the Justinmind editor. These are the user preferences you can modify:
General Settings
These are the general preferences that apply to all aspects of the Justinmind editor:
- Show welcome window on startup – tick to have the welcome window appear upon startup
- Show overview on startup – tick to have the overview appear upon startup
- Open prototypes in a new window – tick to have open each prototype in a separate Justinmind editor window
- Submit statistical information to improve the product – tick to allow error reports to be sent to Justinmind. Activating this option helps us perform product updates and solve performance issues and bug fixes submitted by our customers
- Display tips – tick to have tips related to features appear on the Canvas when working with Justinmind. This option is strongly recommended for new users
- UI Mode – select a UI mode (Dark, Light or High Contrast – the default is Dark)
- Default browser – browse your folders and select the default browser with which to simulate your prototypes. Leave blank to use your system’s default settings
Simulate
- Include comments – tick to include the comments when you simulate your prototype
Export to HTML
- Optimized – tick to generate HTML prototypes whose source code has been optimized for improved performance (note that this may affect readability)
- Ask for comments inclusion – tick to confirm whether comments will be included upon exporting your prototype to HTML each time
- Include Comments – tick to always include comments in HTML exports
- Override existing files – tick to override the HTML each time you export to HTML
Automatic Updates
- Check for updates interval(in minutes) – enter the amount of time (in minutes) after which you wish Justinmind to check for updates. The default amount of time is 30 minutes
- URL for updates – the URL where updates are stored. Change the URL to modify the location of the updates (not advised)
- Check for updates automatically – tick to allow the system to check for updates automatically after a pre-determined amount of time
- Check for updateson startup – tick to allow the system to check for updates on startup
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
Backups – these are the preferences related to backup copies of your prototypes. Backups are automatically created in order to prevent data loss:
Autosave
- Enable autosave – tick to enable the Justinmind editor to autosave your work after a pre-determined amount of time
- Autosave interval – enter the amount of time (in minutes) after which you wish Justinmind to autosave your work. The default amount of time is 10 minutes
- Number of backups – enter the maximum number of backups per prototype. The default number is three
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
Functional Scenario – these are the preferences related to the look and feel of functional scenarios. From here you can change the scenario ruler preferences, grid type, etc.:
Ruler options
- Show Rulers – tick to show rulers in the Scenarios module
- Rule units – select a unit from the drop-down (Inches, Centimeters or Pixels – the default is Pixels)
Grid options
- Show Grid – tick to show grid in the Scenarios module
- Snap to Grid – tick to snap elements snap to their closest grid line when moving or positioning them within in the Scenarios module
- Snap to Geometry – tick to snap elements to each other’s boundary lines when dragging them across the Canvas in the Scenarios module
- Grid spacing (in pixels) – enter the amount of grid spacing in pixels. The default is 20 pixels
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
JIRA integration – these are the JIRA integration configuration settings:
- User name – enter your Atlassian JIRA user name
- Password – enter your Atlassian JIRA password
- URL to your JIRA instance – enter the URL of the Atlassian JIRA project you want to associate to Justinmind
- Project key – enter your Atlassian JIRA project key
- Import JQL – enter your JIRA JQL here. Find more info on constructing a JQL here.
Learn more about Justinmind’s Atlassian JIRA integration here.
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
Justinmind account – these are the settings related to your Justinmind account and teamwork features:
Justinmind account
- Email – enter the email address associated with your Justinmind user
- URL – a link to your online account
Teamwork
- Lock elements automatically – tick to lock elements automatically when working on a shared prototype. Learn more about Justinmind’s Teamwork features here.
Reshare
- Synchronize comments before resharing – tick to synchronize comments before resharing
Local data
- Delete all local files under the current user – click the “Clear Data” button to delete locally stored Teamwork prototypes and shared widget libraries. You can open them again by navigating to Teamwork > Open shared prototype and Widgets > Update all shared libraries.
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
Network Configuration – if you’re using a proxy server to connect to the internet, you can configure your network connection here:
- Enable proxy configuration – tick to enable proxy configuration
- Host – enter your proxy’s host
- Port – enter your proxy’s port
- User – enter your proxy user
- Password – enter your proxy’s password
- Protocol – select a protocol from the drop-down (HTTP/HTTPS or SOCKS – the default is HTTP/HTTP)
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
Requirements – these preferences relate to your Requirements fields:
Select the fields you want to display in the Requirements module (Author, Type, Comments etc.)
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
TFS integration – these are the Microsoft TFS (also known as Azure DevOps or Visual Team Studio) integration configuration settings:
Select the fields you want to display in the Requirements module (Author, Type, Comments etc.)
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
TFS integration – these are the Microsoft TFS (also known as Azure DevOps or Visual Team Studio) integration configuration settings:
- User name – enter your Microsoft TFS user name
- Password – enter your Microsoft TFS personal access token
- URL to your TFS instance – enter the URL of your Visual Studio work space
- Project key – enter the abbreviated name of the TFS project
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
User Interface – these preferences relate to the visual aspects of the Justinmind editor. They concern the behavior of all screen UI elements, as well as the Canvas in the Screens, Templates and Masters palettes:
Ruler options
- Show rulers – tick to display rulers at the top and left of the Canvas
- Ruler units – select a unit from the drop-down (Inches, Centimeters or Pixels – the default is Pixels)
Grid options
- Show resolution guides – tick to display the resolution you are currently working within
- Show Grid – tick to show grid
- Snap to Grid – tick to snap elements snap to their closest grid line when moving or positioning them within
- Snap to Geometry – tick to snap elements to each other’s boundary lines when dragging them across the Canvas
- Show Smart Guide – tick to show smart guides
- Grid spacing (in pixels) – enter the amount of grid spacing in pixels. The default is 20 pixels
Default Content Alignment
- Centered – tick to center the content on-screen. This will only take effect in simulation mode, not while editing in the Canvas
Images
- Show include/link image option when adding images – tick to make the “Link to image file” dialog always appear when adding an image
Events
- Create new events with progressive disclosure – tick to show the options in the Events dialog one at a time (ticked by default in Beginner Mode)
Click “Apply” to save your changes or “Restore Defaults” to restore default factory settings.
File menu
From the “File” main menu option, you can perform operations related to the handling of Justinmind files that help the user perform specific tasks.
- New – click to quickly create new prototype components. Hover over this option to open a sub-menu with the following items:
- Prototype – click to create a new prototype and open it on the Canvas
- Shared prototype – click to create a new prototype, open it on the Canvas and share it with other users. Learn more about shared prototypes here
- Screen – click to create a new screen in the current prototype
- Data master – click to create a new Data Master in the current prototype
- Template – click to create a new template
- Scenario – click to create a new scenario and open it in the Scenarios module
- Open – click or enter “⌘” or “Ctrl” + “O” to open an existing prototype. From the Open dialog that appears, select a Justinmind.vp file and then click “Open”
- The current prototype will be closed. If you want to open more than one prototype at a time, you can either launch two prototypes or double-click on each of the .vp files.
- Open shared prototype – click to open a shared prototype. From the Open dialog that appears, select a Justinmind .vp file and then click “Open”
- The current prototype will be closed. If you have no internet connection you will be requested to work offline.
- Recently Opened Prototypes – click to view a list of recently opened prototypes and select one to open in the Canvas
- Close – click or enter “⌘” or “Ctrl” + “W” to close the current prototype
- Save – click or enter “⌘” or “Ctrl” + “S” to save changes to the current prototype
- Save as – click or enter “⌘” or “Ctrl” + “Shift” + “S” to save as (brings up a prompt to save your prototype as a file with a different name, you can also choose where to save your prototype)
- Export to Document – click to automatically generate specification documents from the current prototype. Choose from the two options in the contextual menu:
- Export to DOCX -generate a .DOCX specification document of the current prototype
- Customized Document – open the Customized Document dialog to customize the contents of your specification document
- Export to HTML – click or enter “Shift” + “⌘” + “T” or “F7” to export your prototype to HTML
- Export to native app – click to export your prototype to a native application using PhoneGap
- Save as images – click or enter “Shift” + “⌘” + “I” or “F8” to save a prototype’s screen as an image file (the screen currently displayed on the Canvas)
- Recover prototype – click to recover a backed up prototype
- For Windows only:
- Preferences – see “Preferences” above
- Import – click to import prototype components from other prototypes into the current prototype. Choose from the following options: Prototype, Screen, Template, Master, Widget Library or Data Master from .csv file
- Export – click to export components of the current prototype. Choose from the following options: Prototype, Screen, Template, Master or Comments
- Requirements configuration – click to configure Requirements Fields
- Import .sketch file – click to learn how to import a Sketch artboard into Justinmind
- Import .psd file – click to learn how to import a Photoshop file into Justinmind
For Windows only:
Exit – click to close Justinmind. You will be prompted to save any open prototypes.
Edit menu
From the “Edit” main menu option, you can perform operations related to the handling of information within a Justinmind prototype.
- Undo – click or enter “⌘” or “Ctrl” + “Z” to undo the last modification and revert back to the previous state
- Redo – click or enter “⌘” or “Ctrl” + “Y” to redo the last undone modification
- Copy – click or enter “Shift” + “⌘” or “Ctrl” + “C” to copy the current selection to the clipboard
- Cut – click or enter “Shift” + “⌘” or “Ctrl” + “X” to remove the current selection from the Canvas and place it on the clipboard
- Paste – click or enter “Shift” + “⌘” or “Ctrl” + “V” to paste the contents of the clipboard onto the Canvas
- Delete – click or enter “Delete” to delete the selected items
- Select All – click or enter “⌘” or “Ctrl” + “A” to select all the items on the Canvas
- Duplicate – click or enter “⌘” or “Ctrl” + “D” to duplicate the selected item
- Find – click or enter “⌘” or “Ctrl” + “F” to open a search dialog and look for text terms within UI elements in your prototype’s screens
- Replace – click or enter “⌘” or “Ctrl” + “R” to replace a text entry in your prototype with another text entry
- Replace styles – click to open a dialog to find and replace the attributes of elements in a prototype, including their font family, font size, font color, and background color.
- Order – click to reposition UI element hierarchy on the Canvas. Choose from the following options:
- Bring to front – brings element to the front of the stack
- Send to back – brings element to the back of the stack
- Move forwards – moves element forward by one level
- Move Backwards – moves element backward by one level
- Align – click to re-align the selected UI elements. To use the align options, select two or more UI elements on the Canvas. Choose from the following options:
- Align left – align element(s) to left of the last-selected element
- Align center – align element(s) to center of the last-selected element
- Align right – align element(s) to right of the last-selected element
- Align top – align element(s) to top of the last-selected element
- Align middle – align element(s) to middle of the last-selected element
- Align bottom – align element(s) to bottom of the last-selected element
- Distribute vertically – distribute elements vertically
- Distribute horizontally – distribute elements horizontally
- Match width – match width of last-selected element
- Match height – match height of last-selected element
- Match size – match size of last-selected element
- Group – click to group UI elements together, or in a Dynamic Panel or Master
- Center content – click to center content on the Canvas
- Save as image – click to save the selected items as an image (a screenshot). If no element is selected, the blank Canvas will be saved
View menu
From the “View” main menu option, you can perform operations related to the appearance of the Justinmind workspace.
The View settings differ depending on the Module you’re in.
- Zoom In – click to zoom in on the Canvas
- Zoom Out – click to zoom out of the Canvas
- Zoom 100% – click to zoom to a 100% view of the Canvas
- Zoom to Fit All – click to zoom to fit to the Canvas
- Rulers – click to show/hide rulers on the Canvas
- Grid – click to show/hide the grid on the Canvas
- Snap to Grid – click to activate/deactivate automatic alignment
- Snap to Geometry – click to activate/deactivate the automatic alignment system
- Smart Guides – click to activate/deactivate smart guides on the Canvas
- Fade template components – click to fade/unfade template components on the Canvas
- Mask Panels, Master and Hotspots – click to show/hide the overlay that indicates a Panel, Master, or Hotspot
- Components marked as hidden – click to show/hide components marked as hidden on the Canvas during editing
- Markers – select which markers you want to see on the Canvas (events, pinned positions, comments, and requirements)
- Palettes – click to show/hide each palette
- Beginner/Expert Mode – click to switch the Justinmind editor to beginner or expert mode
- Reset workspace – click to reset default workspace settings
Simulate menu
From the “Simulate” main menu option, you can perform operations related to the simulation of a prototype.
- Simulate Prototype – click to launch a Chromium-based simulation of with the screen or template you currently have open in the Justinmind editor
- View on smartphone/tablet – click to publish your prototype to your account and view it with a real mobile device using the Justinmind mobile application.
- Simulation settings – click to configure how your prototype will be displayed either in simulation, once exported to HTML, or when you publish it to your online account
- Preview screen – click to preview of the current screen. In this preview the events won’t work
Prototyping Tool For Mac
Widgets menu
From the “Widgets” main menu option, you can perform operations related to Justinmind’s Widget libraries.
- Add/Remove libraries – click to add or remove pre-installed libraries to the Widget library palette
- Download Libraries – click to be taken to the UI Libraries page on Justinmind’s website, where you can download and install additional widget libraries to use in your prototypes
- New Widget Library – click to create your own widget library
- Commit all shared libraries – click to save changes to a shared widget library
- Update all shared libraries – click to receive all updates for a shared widget library
Snipping Tool For Mac
Learn more about Widget libraries here.
Share menu
From the “Share” main menu option, you can perform operations that allow you to share your prototype with others via your online account.
- Share – click to share a prototype to your online account and invite collaborators to review it
- Reshare – click to update a shared prototype with recent changes
- Replace published version – click to replace a published prototype with a new version (similar to “Save As”)
- Manage published prototypes – click to manage all your shared prototype in your online account
- Refresh comments – click to refresh comments on your shared prototype
- Settings – click to configure simulation settings
Learn more about working with shared prototypes here.
Teamwork menu
From the “Teamwork” main menu option, you can perform operations related to team prototyping.
- Open shared prototype – click to open a shared prototype
- Share prototype – click to share a prototype to your online account
- Manage shared prototypes – click to manage all your shared prototype in your online account
- Add/Remove users – manage which Justinmind users have access to your shared prototypes
- View locked elements – click to view which UI elements and screens have been locked
- Commit all – click to save all changes you have made to the shared prototype you’re currently working on
- Update all – click to receive updates to your shared prototype made by all users
- Discard all changes – click to discard changes to your shared prototype made by all users
- Unlock all – click to unlock all UI elements and screens
- Show history – click to show all changes in a version history
- Close prototype – click to close the shared prototype you’re currently working on
Wireframe Tool For Mac
Learn more about using our Teamwork features here.
Plug-ins menu
Drawing Tool For Mac
From the “Plug-ins” main menu option, you can perform operations related to your Justinmind plug-ins.
- JIRA – click to see settings for the Justinmind for JIRA plug-in
- Team Foundation Server – click to see settings for the Team Foundation Server/Azure DevOps plug-in
- Install a plug-in – click to install a plug-in. Learn more about available plug-ins and integrations here
- Code your own plug-in – click to code your own plug-in
Help menu
From the “Help” main menu option, you can perform operations related to account and prototyping support.
- Show Welcome Window – click to view the Welcome dialog that you see upon first opening Justinmind. From here you can create a new prototype or open an existing one.
- Show Overview – click to view the Overview dialog, with a wizard to help you get started with Justinmind
- Tutorials – click to be taken to Justinmind’s support section
- Contact client support – click to be taken to Justinmind’s paid customer support portal
- Justinmind community – click to be taken to the Justinmind community forums
- Help Contents – click to view the User Guide of Justinmind
- Check for Updates – click to check for updates to your Justinmind editor
- Validate account – click to validate your Justinmind key (for new users)
- Visit Justinmind’s Homepage – click to be taken to the Justinmind website Homepage
- Sign out – click to sign out of the Justinmind editor