Introduction to MockupTiger Wireframes

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

Yes No Suggest edit

MockupTiger Introduction Video

Here is a short introduction video that walks through the features and interface

Yes No Suggest edit

Download and Install Options


Yes No Suggest edit

Working with Text widgets

Wireframe Text Widgets for mockups

Image

Image

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.

Image

This widget is similar to link bar except the link separator is a right angle indicated a trail of link path.

Image

Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.

Button Bar

Image

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 Field

Image

Input fields are quick way to design forms and input elements. Double click and provide a comma separated values

Label widget

Image

To create a vertical label, provide a rotation angle of -90 degrees

Image

 

Text Area widget

Image

Combo box

Image

Input Spinner

Image

Date Field / Picker

Image

Button Stack

Image

Button stack provides a quick way to stack buttons vertically

Input Field Stack

Image

Label Stack

Image

Using Button Stack, Input Field Stack and Label Stack you can create quick input form wireframes.

Image

Image

Calendar widget

Image

Paragraph widget

Image

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.

Image

Star rating widget

Image

You can change the icon used in the star rating widget as follows.

1. Right click the star widget

2. Select Edit properties

Image

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 widget

Image

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.

Yes No Suggest edit

Working with Icons

Wireframe Icons : Material Design and Font Awesome

MockupTiger wireframes includes three sets of Icons, namely Linea, Font Awesome and Material Design . These three sets total over 3000 icons.

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.

What can you do with Icons

  • Rotate the icons to any angle
  • Flip them horizontally
  • Flip them vertically
  • Add text to them

How to use Icon

Simply drag the icons from the icons panel to the center canvas

Image

Use the right panel and pick the "Stroke" and "Fill" colors to paint the icons

Rotate Icons

Use the right panel and change the angle

Image

Duplicate or Clone Icon

Right click on the icon or widget and select "Duplicate"

This action will put the cloned object to the right

Image

Flip Up

Image

Flip Horizontal

Image

You can even combine Flip Up and then Flip Horizontal

Different Fills and Stroke Colors

Image

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.

Image

Yes No Suggest edit

How to add Icons inside any Text component

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

Image

  • double click to edit the Paragraph widget
  • place your cursor anywhere you want the Icon to appear in the text editor
  • open the Icons library on the left panel
  • Right click on the Icon you want to embed

Image

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

Image

If you change the text font size, so does the Icon size

Font size now increased to 30 using the font slider

Image

 

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=blue>Lorem<color=default> ipsum

<color=red><icon=telephone><color=default> dolor sit amet, consectetur adipiscing elit. Cras egestas gravida elit et tristique. Nulla facilisi.

Image

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.

Yes No Suggest edit

Working with Box and Containers

Wireframe boxes, containers and list controls

Box

Image

In the hierarchy of objects, Box is derived from the paragraph widget from the text controls.

Image

 

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 Box

Image

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

Image box represents any image you would like to use in the wireframe. Useful for mocking galleries or portfolio show case.

Image

Map Box

Image

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.

Image

Same as box except this displays the dimensions of the box as you stretch the borders.

Horizontal Spec

Image

For illustrating dimensions of widgets

Sticky Note

Image

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.

Image

Browser Window

Image

Double click will open a text box that will allow you to enter the name and the URL.

Image

Here is a secure HTTPS example

Image

Window Pane

Image

Field Set or Group

Image

Progress bar

Image

Image

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.

Image

Slider

Image

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

Tabs

Image

Double click and provide a comma separated list of tab names. You can embed font awesome icon tags.

Image

Image

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

Image

1. Up Layout: This is the default normal orientation

2. Down Layout

Image

3. Left Layout

Image

4. Right Layout

Image

Tree Pane

Tree pane is another versatile widget that allows for quick mockups of hierarchical structure such as to-do list, file structure etc

Image

Image

 

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.

Radio Control

Image

Check box Control

Image

Ordered List

Image

Annotation Number List

Image

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

Image

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

Image

 

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

 

HTML Table

Image

Check this detailed article on How to use Table Grids

Image widgets

Image

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.

HTML Widget

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

Image

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.

Yes No Suggest edit

Working with Dashboard Widgets

Dashboard Wireframes and Mockups - How to build Chart mockups

Gauge or Dial Chart

Image

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.

Image

Bar Chart

Image

 

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.

Image

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.

Image

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.

Image

 

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.

Image

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

"autoMinMax":"Y",
"axis_dimTickCount":10,
"axis_lineColor":"#E6E3FF",
"axis_numDual":"N",
"axis_numTickCount":5,
"axis_showAll":"Y",
"axis_showDim":"Y",
"axis_showDimLine":"Y",
"axis_showDimTicks":"Y",
"axis_showNum":"Y",
"axis_showNumLine":"Y",
"axis_showNumTicks":"Y",
"axis_tickColor":"#E6E3FF",
"bullet_color":["#F0F0F0","#D9D9D9","#BDBDBD","#969696"],
"bullet_range":[20,40,80],
"color_scheme":"sequential",
"colors":["#cccccc","#777777","#ffffff","#444444","#f3f3f3","#66666","#eeeeee","#999999","#bbbbbb","#555555","#aaaaaa","#ffffff"],
"customBound_lower":"auto",
"customBound_upper":"auto",
"customMinMax":"N",
"dateFormatStr":"%Y-%m-%d",
"fontColor_dimAxis":"#3D3D3D",
"fontColor_legend":"auto",
"fontColor_numAxis":"#3D3D3D",
"fontSize_dataLabel":"auto",
"fontSize_dimAxis":13,
"fontSize_legend":"auto",
"fontSize_numAxis":13,
"grid_numCount":10,
"grid_numShow":"N",
"label_dimAxisName":"Year",
"label_dimAxisRotate":"-30",
"label_num2AxisName":"auto",
"label_numAxisName":"Value",
"label_showAxisNames":"Y",
"label_showDataLabel":"N",
"label_showXTickLabel":"Y",
"label_showYTickLabel":"Y",
"layout":"vertical",
"legend_display":"N",
"legend_x":-150,
"legend_y":10,
"margin_bottom":55,
"margin_left":50,
"margin_right":10,
"margin_top":20,
"markerPicker":"same",
"markerSize":15,
"markerStart":0,
"numFormatStr":"d",
"numPostfixStr":"",
"numPrefixStr":"",
"numberFormatStr":[",.1f",",.1f"],
"numberPostfixStr":["",""],
"numberPrefixStr":["",""],
"show_stroke":"Y",
"stroke_color":"black",
"stroke_width":"2",
"showAllMetrics":"Y",
"showMarkers":"Y",
"size_height":250,
"size_width":350,
"targetGrandMetrics":[404],
"target_color":["red","blue","green"],
"target_names":["low","medium","high"],
"target_show":"N",
"target_type":"percent",
"target_values":[20,40,80],
"textColor":"#3D3D3D",
"fontSize":13

Example with different colors

Image

 

Vertical Stack Bar

Image

Horizontal Group bar

Image

Horizontal Stack Bar

Image

Pie or donut Chart

Image

Line chart (smooth)

Image

Line Chart (normal)

Image

Area chart (smooth)

Image

Area Chart (normal)

Image

Yes No Suggest edit

Working with Line Connectors

Wireframe connectors and Line widgets

These connector widgets are special widgets that connect one object to another object using curved or straight lines.

These are the various line connectors

Image

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

Image

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.

Image

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.

Image

 

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

Image

Image

As you see the text follows the path of the curve.

Image

You can change the text appearance by modifying the font, font size and color properties on the right panel

Image

Image

 

Image

On the bottom of the right panel, you will see controls to toggle the arrows at the end of the line connectors

Image

Image

To disconnect, simply select the line connector and then drag the green square out of the widget container and it will be disconnected.

Yes No Suggest edit

Working with Symbols or Groups

Wireframe Android and iOS widgets - Symbols and Groups

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

Image

 

The definition of all symbols is stored in the mt_symbol_x.js file

Image

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.

Android Frame

Image

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.

Keyboard

Image

Image

Android Inbox

Image

Clock picker

Image

Yes No Suggest edit
Suggest Edit

Let the Tiger help you build your next Mockup!

Start by sketching your idea into a wireframe in few clicks