A better way to wireframe

Support

Stencil overview

Stencils can contain different functions and options. Using the context menu of each element, you can define properties and add interactions. By default, a tooltip (i.e. a comment that can be viewed in the Simulation View by hovering over the respective element.) can be added to every stencil. To adjust the size of an element, select it and use the anchor points around it to change the height and/or width of it.

       

Text

The TEXT, TEXT BLOCK, LINK, LIST as well as HEADLINE 1 - 3 stencils can be used to add text to a prototype. You can modify the content by double clicking on it and changing the text in the text field. With the inline editing function you can use the formatting options bold or italic text, change the size and color of the text or single words, insert links, underline or highlight text as well as align your multi-line text. The stencil will adjust its size to fit the content, but you can adjust the size using the anchor points around it.

The default settings are:
TEXT, TEXT BLOCK, LIST and LINK: Font size of 14.
HEADLINE 1: Font size of 32.
HEADLINE 2: Font size of 24.
HEADLINE 3: Font size of 18.


 

Accordion

The ACCORDION is used for navigation purposes. This stencil expands and retracts when the user clicks on the various entries in Simulation View such that the user sees a preview of these pages. The list of possible entries can be set by double clicking on the stencil and inputting the desired entries. Each line within the Wiki Syntax will refer to one category.

Properties available in the context menu:

  • Open tab: Specifies which tab should be opened in Simulation View. The default is set to the first tab, which is specified by 1.

 

Action Area

The ACTION AREA can be used for linking areas or stencils in your prototype that are not linkable. This stencil is translucent grey in the Editing Panel, but invisible in the Simulation View. It can be set such that it can be triggered in simulation either with a click or by hovering the mouse cursor over the area.

Properties available in the context menu:

  • Target: Choose which page of your prototype to link to or enter an external URL).
  • Action trigger: Select between "Hover" and "Click" as the action to take your user to a linked page in simulation.

 

Approved

The APPROVED stamp is useful for prototype designs that have been approved.


        

Line

The ARROW stencil contains different types of arrows and lines. They can be used as graphical elements or to visualize and explain the structure of a prototype.

Properties available in the context menu:

  • Arrow type: Select the orientation of the line or arrow. Click on "Change" to choose another line or arrow.

 

Autocompleter

The AUTOCOMPLETER allows the user to type in one letter and it will show possible entries to select from. (The user e.g. types "D" and a list of cities starting with D appear: Delhi, Denver, etc.) The list of possible entries can be defined by double clicking on the stencil and entering the desired entries.

Properties available in the context menu:

  • Tabindex: Allows you to progress through clicking the keyboard tab button (e.g. when filling out forms you can jump from one line to the next by pressing "Tab"). Specify the order by entering a number in the tabindex field.

 

Button

The BUTTON allows you to link to pages of your prototype or URLs. To rename a button double click on it and enter the new name in the text field that appears.

Properties available in the context menu:

  • Font size: Change the Font size.
  • Target: Choose which page of your prototype to link to (you can also enter an external URL).
  • Button color: Choose the color of the button.
  • Disabled: Deactivate/activate linking functionality.
  • Multiline: Choose between a single line or multiple of text.
  • Tabindex: Allows you to progress through clicking the keyboard tab button (e.g. when filling out forms you can jump from one line to the next by pressing "Tab"). Specify the order by entering a number in the tabindex field.

   

Chart

The CHART stencil contains different types of charts - the line chart, bar chart, and pie chart. They are basic design elements that can be added to a prototype.

Properties available in the context menu:

  • Chart type: Select whether you want a bar, line or pie chart.

 

Checkbox

The CHECKBOX allows you to let the user make a selection of one or several items by checking the boxes. By default the box is ticked.

Properties available in the context menu:

  • Label: Change the text displayed next to the checkbox.
  • Font size: Change the size of the displayed font.
  • Checked: Toggle this field to check the box.
  • Tabindex: Allows you to progress through clicking the keyboard tab button (e.g. when filling out forms you can jump from one line to the next by pressing "tab"). Specify the order by entering a number in the tabindex field.

 

Combobox

The COMBO BOX allows the user to choose exactly one option from a list that is displayed in the box. To define the possible choices in the list, double click on it and type in the different entries. Every line represents one entry.

Properties available in the context menu:

  • Tabindex: Allows you to progress through clicking the keyboard tab button (e.g. when filling out forms you can jump from one line to the next by pressing "tab"). Specify the order by entering a number in the tabindex field.

 

Comment

The COMMENT can be used to add notes or explanations to your prototype. Double click on the stencil to edit the content. Doing so will open a small text field in which you can edit the text. To close the text field just click outside of it. The stencil automatically adjusts in size to fit the entered content, but can be adjusted using the anchor points around it. By default the comment stencil is visible in the Simulation View with a Font size of 12.

Properties available in the context menu:

  • Font size: Change the size of the displayed font.
  • Comment color: Change the background color of the comment.
  • Show in result: "True" displays the comment stencil in the Simulation View, whereas "False" hides it.

 

Datepicker

The DATEPICKER allows the user to choose a date in the Simulation View by either entering the date directly into the field provided or by choosing a date from the pop-up calendar field. You can adjust the width of the box by using the anchor points around it.

Properties available in the context menu:

  • Tabindex: Allows you to progress through clicking the keyboard tab button (e.g. when filling out forms you can jump from one line to the next by pressing "Tab"). Specify the order by entering a number in the tabindex field.

 

Editor Toolbar

The EDITOR TOOLBAR is useful for prototypes with a text editor such as a prototype of a word processing program.


   

Flow

The FLOWCHART stencil is useful to map out processes, for instance: process, divided process or multi process, decision, start and termination, "Yes" and "No".

Properties available in the context menu:

  • Flowchart type: Define the flowchart type.
  • Fill color: Choose the color of the filling.
  • Border color: Choose the color of the border.

 

Drawing

The FREEHAND DRAWING allows you to add free-hand drawings to your prototypes. Drag and drop the stencil to your page and double-click on it to open the canvas. To draw simply move your mouse. If you want to draw straight lines just press the Ctrl (Strg) key of your keyboard while drawing. The stencil will automatically adjust its size to your painting. To finish simply click outside of the canvas. Pressing the "Shift" key of your keyboard preserves the proportions of the element while resizing.


 

Icon

The ICON stencil allows you to add multiple icons and symbols to your prototypes. Drag and drop the stencil to your editing panel and choose your desired icon from the popped up dialog window. (Hint: Hovering over each icons shows a preview.) To select an icon click on it and it will be added to your canvas.

Properties available in the context menu:

  • Icon size: Select the icon size from the predefined formats.
  • Target: Choose which page of your prototype to display in the scroll frame (you can also enter an external URL)

 

Image

The IMAGE stencil allows you to add images to your prototype. To do so, click on the "UPLOAD IMAGE" button in the stencil palette. In the opening dialog window you can either upload an image from your hard drive by clicking on "Browse" or entering the external URL in the text field below. A click on "Done" adds the graphic to the end of the stencil palette and you can add it to the editing panel using drag and drop. To crop the image press the Ctrl (Strg) key and drag the handles. The default settings are a width of 80px, a height 60px and the border displayed.

Properties available in the context menu:

  • Image: Open the dialog window to upload or select an image.
  • Target: Choose which page of your prototype to link to (you can also enter an external URL).
  • Width: Change the stencil's width.
  • Height: Change the stencil's height.
  • Border: Choose whether to display or hide the border of the image.

 

Keyboard

The KEYBOARD is useful if you are designing prototypes requiring the visualization of a keyboard.


 

List Grid

The LIST GRID is useful if you are designing a graphical frame for lists.


 

List View

The LIST VIEW is similar to the combo box, but displays several entries at once. To edit entries double click on the stencil. Doing so opens a text field where you can enter/change the list items you wish to include. Use a new line for each entry. It is possible to select several entries at the same time in the Simulation View.

Properties available in the context menu:

  • Multiple selections: Toggle this box to allow the user to select several entries at the same time by holding the Ctrl (Strg) key pressed; if this box is not toggled, only one entry can be selected.

 

Map

The MAP allows users to view and navigate through an interactive map in the Simulation View.

Properties available in the context menu:

  • GMaps URL: Set the URL to the map by inputting the link provided by an online map service's website. With Google Maps, you can click on the link button next to the print icon to access this.
  • Tooltip: Set a tooltip comment that can be viewed in the Simulation View by hovering the mouse over the stencil.

 

Menu

The MENU allows you to create a fully clickable menu. To edit the content of the menu double-click on the stencil. Doing so opens a text field with the current content of the menu. Each line represents a different menu entry. All menu entries are marked by asterisks (*), one for a top-level entry, two for sub-entries, and so on. To link menu entries to pages in your prototype place your mouse cursor after the asterisk(s) and select the desired page from the drop-down menu above the text field. Doing so inserts a page-ID (e.g. page0001) and the page name (the so-called "anchor text", e.g. MyPage 1) is enclosed in brackets ([ ]). The anchor text will be displayed in the menu. To change this text simply change the anchor text (Make sure not to erase the page-ID while doing so.). To link menu entries to external URLs enclose the URL with brackets ([ ]). Example: [http://URL.com The anchor text you want to display in the cell].

Properties available in the context menu:

  • Menu orientation: Set the orientation of the menu to be Horizontal or Vertical.

   

Phone

The PHONE stencils are useful if you are designing prototypes for mobile phones.

Properties available in the context menu:

  • Phone type: Select between mobile phone, iPhone and Blackberry.

 

Radio Button

The RADIO BUTTON is similar to the checkbox. However it limits the user’s choice to only one item within a group. You can define such a group using the menu item "Group" in the context menu. Using the "Selected" option, you can choose to have a default item pre-selected. To edit the text next to the radio button double click on the stencil and enter the desired text into the text field that will appear.

Properties available in the context menu:

  • Label: Name your radio button.
  • Font size: Change the font size.
  • Selected: Toggle this field to activate the box.
  • Group: Allows you to name the groups you use in your prototype.

 

Rating

The RATING allows users to evaluate something in the Simulation View by rating it with 0 to 5 stars. You can predetermine the initial star rating by entering a number in the context menu.

Properties available in the context menu:

  • Rating number: Define the number of stars the rating should initially have (0 - 5). The default setting is 3.

 

Round

The ROUND BUTTON allows you to link to pages of your prototype or URLs. To rename a button double click on it and enter the new name in the text field that appears. You can resize a button using the anchor points around it.

Properties available in the context menu:

  • Font size: Change the font size.
  • Target: Choose which page of your prototype to link to (you can also enter an external URL).
  • Button shape: Choose the shape of the button (default, left/back, right/forward).

 

Scroll Frame

The SCROLL FRAME can be used to display a page of your prototype or external content in a window (a so-called frame) on a different page. This allows you to use the functions of both pages.

Properties available in the context menu:

  • Target: Choose which page of your prototype to display in the scroll frame or enter an external URL.

   

Shape

The SHAPE stencils can be used to create the geometric shapes of a ellipse, triangle, and rectangle. The default settings are a white filling and a black border with a width of 80px and height of 60px.

Properties available in the context menu:

  • Fill color: Choose the color.
  • Border color: Select the outline color.
  • Width: Change the stencil's width.

 

Slider

The SLIDER allows the user to choose a level or setting. It can be customized by setting the displayed value and direction. In the context menu, you can define the default value of the slider by choosing a percentage and choose a slider type such as a horizontal or vertical slider. The default setting is horizontal with a value of 50% (middle position).

Properties available in the context menu:

  • Slider type: Choose between a horizontal or vertical slider bar.
  • Default value: Choose the default position of the slider in per cent.

 

Status Bar

The STATUS BAR is useful to display the information and options bar of a mobile device. You can change the width using the anchor points.


 

Switcher

The SWITCH is useful to change between two different state options (on/off)

Properties available in the context menu:

  • Selected: Toggle this box for "On" or "Off".

 

Tab

The TAB BUTTON can be used to allow the user to switch between several pages. To rename a tab button double click on it and enter the new name in the text field that appears. The default settings are a font size of 12 and the toggle mode "click".

Properties available in the context menu:

  • Font size: Change the Font size.
  • Target: Choose the page of your prototype to link to or enter an external URL.
  • Orientation: Define the orientation of the button.
  • Toggle Mode: Switch between click (tab button) and hover (hover button) modes.

 

Table

The TABLE can be filled in with various data structured in rows and columns. Specific rows with data can be linked to other pages. By default the table stencil is pre-filled with dummy data. To change the data content and appearance of the table you can use the following syntax (special notation).

The syntax for creating a table:

Rows and columns: Each row corresponds to one line of text. To add a row, simply press enter to get to the next line. Each column is separated from the next by a vertical line (|).

Formatting: To display an entry in bold type enclose the text with asterisks (*). Example: *this text will appear in bold*. To justify the text in your table, use the following abbreviations after the vertical line separates the column from the previous one: |c. (center text in a cell),|l. (align left) and |r. (align right).

Links: To place a link in your table, enclose the URL with brackets ([ ]) and add the anchor text to be displayed. Example: [http://URL.com The anchor text you want to display in the cell]. To link pages within the prototype, select the text to be linked within the table, use the dropdown menu and choose the desired page.

Here are some examples:

The default Table stencil features population data of 3 countries as well as the world total. It consists of 5 rows and 3 columns and is represented by the following syntax:

  | Rank | Country       | Population    |
  | 1    | China         | 1,333,240,000 |
  | 2    | India         | 1,169,560,000 |
  | 3    | United States | 307,505,000   |
  |      | world total   | 6,787,100,000 |
  | Airport | Destination | Travel Dates | Flight Only | Flight + Hotel |
  | BOS | Orlando | 27 Mar - 31 Mar | from $205 | $270 Save $29* |
  | BOS | Las vegas | 19 Mar - 23 Mar | from $319 | $395 Save $6 |
  | BOS | Chicago | 13 Mar - 17 Mar   | from $274 | $360 Save $15 |
  | BOS | Washington D.C. | 17 Mar - 21 Mar | from $107 | $237 Save $1* |
  | BOS | Los Angeles | 19 Mar - 23 Mar | from $299 | $416 Save $15* |
  | BOS | San Francisco | 19 Mar - 23 Mar | from $299 | $454 Save $20* |
  | BOS | New York City | 21 Mar - 25 Mar | from $131 | $185 Save $39* |
  | BOS | Atlanta | 31 Mar - 04 Apr | from $219 | $304 Save $38* |
  | BOS | San Juan | 21 Mar - 25 Mar | from $314 | $531 Save $17* |
  | BOS | Fort Lauderdale | 29 Mar - 02 Mar | from $222 | $405 Save $70* |


 

Text Input

The TEXT INPUT allows you to let users enter text into a form while in the Simulation View of the prototype. You can also add default texts to text inputs (e.g. "Enter password here"). Default texts appear in the Simulation View but can be changed by entering new content. To add a default text double click on the stencil and enter the desired text into the text field that appears. You can resize the stencil using the anchor points around it. For multi-line text inputs simply adjust the height of the stencil. You can choose between a normal text field and a password field in the context menu. In the password field, typed characters will be masked as asterisks. The default setting is for the text input to be a normal text field.

Properties available in the context menu:

  • Password Field: "True" changes the text input to a password field. "False" changes the text input to a normal text field.
  • Tabindex: Allows you to progress through clicking the keyboard tab button (e.g. when filling out forms you can jump from one line to the next by pressing "Tab"). Specify the order by entering a number in the tabindex field.

 

Toggle

The TOGGLE SECTION can be used as a dropdown to show and hide part of your prototype and expands when the user clicks on the arrow in simulation. You can either link the stencil to an existing page in your prototype or to an external website. This is particularly useful if you want to create a prototype which includes product previews.

Properties available in the context menu:

  • Target: Choose which page of your prototype to link to (you can also enter an external URL).
  • Overlay Width: Choose the width of the overlay in pixel.
  • Horizontal Offset: Choose the horizontal distance in pixel that you would like the overlay to open from the stencil in simulation.
  • Vertical Offset: Choose the vertical distance in pixel that you would like the overlay to open from the stencil in simulation.

 

Tree View

The TREE VIEW allows a hierarchy to be visually represented through categories and subcategories using the "+" symbol. If the "+" is replaced by a "-" the subcategory is collapsed initially. To define the possible choices in the list, double click on it and type in the different entries. Every line represents one entry. Clicking on it, the user can expand and retract these categories in the Simulation View. You can also make the entries linkable. To do this double-click on the stencil, highlight the entry you wish to link to a new page and select a page from the drop-down menu above.

Properties available in the context menu:

  • Tooltip: Set a tooltip comment that can be viewed in the Simulation View by hovering the mouse over the stencil.

 

Upload

The UPLOAD stencil can be used to simulate the upload of a document. When users click on the "Browse" button in Simulation View, they can select a file from their desktop and the name of this file will then appear in the search bar.

Properties available in the context menu:

  • Label: Rename the "Browse" button for the uploads.
  • Button color: Choose the color of the button.

 

Video Control

The VIDEO CONTROL is used to add a video to your prototype. The default settings are: Show screen "false".

Properties available in the context menu:

  • Show screen: Select "true" to reveal a screen in the stencil.
  • YouTube/Vimeo URL: Allows you to embed a video on your prototype
<< back to overview