MockupTiger is a Wireframing web application that works purely from your web browser. The wireframe software that we provide online as a service is exactly the same software that gets installed when you choose to use it on your own computer. If you choose to you can install on Windows, Mac or Linux.
MockupTiger first debuted in 2011 and then we couldn't focus on its development so after 7 years, this is kind of the second incarnation of our wireframe application. In the first version we had all the widgets designed using HTML5 Canvas.
We got rid of all the old code and widgets by redesigning everything in HTML and SVG.
What is unique with MockupTiger?
MockupTiger borrows the original concept of wireframe application for Dashboard and data visualization. It keeps and extends the functionality by providing better visualization engine for the dashboard charts. The most differentiating factor is that you can drag any chart onto the canvas and edit the data values on the spot and the charts will reflect them. They are not just static images like other wireframe applications.
Building blocks of wireframes
Our wireframe app is designed with few basic components and these components add features to make them distinct widgets within our library.
For e.g the basic building Text object is the "paragraph widget", the paragraph widget can take any text including HTML content, this can be flipped top,left, right and bottom and rotated to any angle.
The second building block is the "box" which is internally just a paragraph widget with a border. You can add text to the box or leave it blank.
Using the "box" and "paragraph" you can build almost 80% of your wireframes.
MockupTiger version 2 has fresh new UI, SVG based widgets, HTML content and widgets to break any boundaries if needed and over 3000 icons from Material Design and Font Awesome
Here is a short introduction video that walks through the features and interface
To use it as personal Desktop Edition for Windows
Follow these instructions : How to download Mockups and use it on windows Desktop
The above zip file contains a packaged webserver ready for you to simply double click and run the application.
If you already have LAMP or WAMP stack enviornment then follow the below instructions
How to install Mockups on your corporate network or web hosting domain
You can use Mockups hosted on our secure servers. Just create a username and start using it.
Free Online Wireframes
NOTE: MockupTiger works with latest version of FireFox, Chrome, Safari and Opera. For Internet Explorer, it requires a plugin Google Chrome Frame. Install this plugin and keep using it with any browser on your machine
Thank you for using MockupTiger
Link bar is a quick way to create a set of horizontal links separated by a pipe. You can use the asterisk * in front to indicate a clicked link and a hyphen to indicate a disabled link. Double click the widget to provide a comma separated values.
This widget is similar to link bar except the link separator is a right angle indicated a trail of link path.
Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.
The default button bar, contains example tags for font awesome icons. This is to demonstrate the possibility of including icons within the button labels.
NOTE: MockupTiger icons can be added to almost all text. Simply open the text editor, expand the left panel for icons (e.g material design) and then right click on the desired icon. This icon's code will be added to the cursor position in the text box.
Input fields are quick way to design forms and input elements. Double click and provide a comma separated values
To create a vertical label, provide a rotation angle of -90 degrees
Button stack provides a quick way to stack buttons vertically
Using Button Stack, Input Field Stack and Label Stack you can create quick input form wireframes.
Right click on the paragraph provides quick way to change the orientation. Paragraph is a very versatile widget. Technically many other widgets are derived from paragraph and by just changing certain properties they provide a different use in the wireframing process. For e.g the Box widget is nothing but a paragraph widget with default border.
You can change the icon used in the star rating widget as follows.
1. Right click the star widget
2. Select Edit properties
The icon name is listed in the "bulletIcon". You can replace the name with any icon name you find on the left panel.
Icon tray is a quick way to provide a set of icons for building parts of user interface. For e.g the tray icon on the bottom right corner of windows OS or the top bar of any mobile device can be quickly prototyped using this widget.
Double click the widget and then expand the icon set on the left panel. Then right click on the desired icon and the codes will be added in the text box.
The most powerful thing about Icons within wireframes is that they are designed just like widgets so you can simply drag and place them anywhere on the canvas and then resize to any dimension. There are no separate dialog boxes that get in your way to pick icons from. The same left panel extends and lists them for easy pickup.
Simply drag the icons from the icons panel to the center canvas
Use the right panel and pick the "Stroke" and "Fill" colors to paint the icons
Use the right panel and change the angle
Duplicate or Clone Icon
Right click on the icon or widget and select "Duplicate"
This action will put the cloned object to the right
You can even combine Flip Up and then Flip Horizontal
Different Fills and Stroke Colors
Finally add text to the icon
Double click the icon and a small text editor will popup and you can enter text inside. The text will always appear at the center of the icon.
Text and Icons are two of the main building blocks of mockups in MockupTiger.
They are basic and yet powerful.
You can embed text inside any Icon and you can also embed any Icon or any number of Icons inside a text string.
Consider the below paragraph widget
When you right click on the icon in the library, the icon tag "<icon" is included in the editor with the icon name. If you want to replace the icon simply select the tag in the editor and right click on a different icon in the library.
click Ok and the icon now appears in the Text string
If you change the text font size, so does the Icon size
Font size now increased to 30 using the font slider
You can even change the color of the Icon inside the text. The icon is just treated like a text character so it is just like custom coloring of text object. Just enclosed the color tags around the icon tag or the text tag
We will now color the first word and just the telephone icon with different colors
<color=red><icon=telephone><color=default> dolor sit amet, consectetur adipiscing elit. Cras egestas gravida elit et tristique. Nulla facilisi.
So to provide custom color you start with a tag "<color" and then you can provide a color name or a hex code like #FFFFFE so the color tag will look like <color=#FEFECC> My Text <color=#CCCCCC>... .
If you notice there is no closing tag for color. To stop the color we simply use the color=default value that indicates it to use the default text color you may have set for the text. If you don't provide default then the rest of the string will be painted with start color.
In the hierarchy of objects, Box is derived from the paragraph widget from the text controls.
If you remove border and background from the box widget and add text to it then it is exactly same as default paragraph widget.
Using Box and paragraph widgets, you can accomplish major portions of your UI mockups.
Placeholder boxes are used to quickly fill up space in your wireframes. It could be a placeholder for some image, text or any other widget that is not decided at the time of design.
Image box represents any image you would like to use in the wireframe. Useful for mocking galleries or portfolio show case.
This is a SVG map widget to indicate either a Google map or other map. You can combine and place any icon on the map to indicate address or location.
Same as box except this displays the dimensions of the box as you stretch the borders.
For illustrating dimensions of widgets
When you first drop the sticky note, it may be slightly rotated to an angle. You can change or reset the rotation on the right panel.
You can change the background color and opacity of the sticky note from the right panel. It accepts normal and html text. HTML text means any kind of html tags and style attribtues are accepted.
Double click will open a text box that will allow you to enter the name and the URL.
Here is a secure HTTPS example
In the progress bar, you can type the percentage of progress and also what text you want to show in the progress. It is smart to parse the number and text from what you type.
Horizontal and vertical sliders used for input in dashboards. You can double click and edit the position by entering a value between 1 and 100
Double click and provide a comma separated list of tab names. You can embed font awesome icon tags.
Highlighted tab is indicated with an asterisk in front and disabled tab is indicated by hyphen
How to change orientation of the Tabs
Right click on the Tab and it will provide four options
1. Up Layout: This is the default normal orientation
2. Down Layout
3. Left Layout
4. Right Layout
Tree pane is another versatile widget that allows for quick mockups of hierarchical structure such as to-do list, file structure etc
The default widget has complete index of all the shortcuts for icons. The tilde character "~" is used to create indent in the text. Every tilde will add more indentation. You can use font awesome icons or MockupTiger icons by right click method.
These are tiny circles with numbers that are designed specially for annotating widgets and documentation purpose. The special feature is as you drag them or duplicate the numbers increment. This allows a quick way to annotate your widgets with numbers. Along with the Ordered list, you can document the individual annotations.
Here is one example showing the annotation widgets and the use of ordered list
Ordered list can be created by using the ordered list widget or using HTML tags in the paragraph or tree pane.
By using the <ol> tag one can create numbered list
How to change the shape of the annotation widgets
1. Select the annotation circle
2. Expand the icon library on the left panel
3. Right click on any desired icon
Check this detailed article on How to use Table Grids
There are two image widgets. One widget takes Image URL from anywhere. The second widget uses HTML5 canvase to load the image and then allows to further manipulate the image.
This is a pure HTML widget and you can embed any html text.
Checkout this complete custom HTML implementing flexbox where the Style is also defined in the same widget followed by the listed items
If you have a need to design a custom Grid with merged columns, merged rows, then you can think of using the plain HTML grid to mockup the table.
For most purposes, you may just need to update the value and the description
Doublick the gauge and you will see all the properties. On the top you will see range related settings and the very bottom you will see the pointer value that affects the position of the pointer.
Drag the charts from left panel to center work area
Double click on the chart to edit the data.
Set the number of rows and columns
How to edit the Bar chart
1. Simply click Charts on the Left Panel and choose any type of charts that you prefer.
Once you decide which chart you will be using, drag and drop the chart to the wireframe editor. In this article, we use basic vertical bar chart as shown as figure below.
2. Edit the rows and columns of the bar chart
If you want to change the rows and columns data shown in the vertical bar chart, click on it twice and the new window as shown in figure below will appear.
On the edit window, you can edit any data including the labels, columns data, number of columns, and rows. Click "Apply" if you want to implement the changes. Click "Close" if you want to close the edit window.
3. Duplicate the bar chart
There are two ways to duplicate the bar chart.
1. Right click on the bar chart. The new menu will appear as shown in figure below. Choose "Duplicate".
How to edit chart properties
The default gray scale used for charts is sufficient for most of the dashboard wireframes but sometimes you may need to change the colors or change what appears in the X and Y Axis.
Right click on the chart and select "Edit Chart Properties"
The list of properties may appear daunting as it is based on D3js library and are real charts (not just static images). But the important properties are highlighted below
Example with different colors
These connector widgets are special widgets that connect one object to another object using curved or straight lines.
These are the various line connectors
These are basically the same line objects except they are provided in different positions for conveneince.
You can simply drag a connector and drop it anywhere on the canvas. Just dropping a connector does not join the two widgets.
How to join two widgets
1. Select the line connector
2. After selection, two small green squares and two red squares will appear
3. Dragging the green squares and touching any widget will make the connection
4. We drag the right green square to touch the box on the right and make sure the left green square is also dragged and placed on the left image placeholder.
5. This way both the boxes are now connected.
6. The red squares allow to adjust the shape of the curvy line.
7. Moving around the boxes will keep the connection
8. In this figure we moved the right box slightly downwards and you can see the connection is maintained.
How to write text on Line Connector
1. Double click on the line connector
2. A text window will show up.
3. Enter any text and click ok
As you see the text follows the path of the curve.
You can change the text appearance by modifying the font, font size and color properties on the right panel
On the bottom of the right panel, you will see controls to toggle the arrows at the end of the line connectors
To disconnect, simply select the line connector and then drag the green square out of the widget container and it will be disconnected.
The stencils provided for Android and iOS are group of basic widgets and known as symbols. The symbols are pre-designed for your convenience and you can create your own symbols.
How did we create the symbols
1. We designed the following symbols just like regular mockups using boxes, text and icons. We formatted and used the material design guidelines from Google and used their dimensions. Once the mockup was done, we grouped them into a symbol, took a screenshot, exported the symbol into JSON and compressed the string.
All of these symbols are then stored in a text file
Images of each symbol is stored in the _symbol directory
The definition of all symbols is stored in the mt_symbol_x.js file
The above information is useful only if you are using MockupTiger on your own computer or server. In future we will automate the process of adding your own symbols.
Every symbol is editable. Simple double click the symbol to enter edit mode. All the child widgets will then become selectable. Once you are done with the edit, double click outside and on the canvas. This will lock all your changes to the symbol. The changes do not affect the original symbol.
Start by sketching your idea into a wireframe in few clicks