Drawing

Basic drawing instructions

You can draw a new element by clicking and dragging your mouse cursor across the canvas and selecting a stencil from a pop-up menu. The pop-up menu will only present stencils that can fit in the selected area. For example, a vertical scrollbar can only be inserted if you draw a high and narrow rectangle.

Drawing on top of existing elements

There are two ways to draw on top of an existing element:

Drawing with shortcuts

Keyboard shortcuts

The process of inserting new elements into your wireframe can be sped up even more by using keyboard shortcuts. After drawing a rectangle with click and drag you can press a key that corresponds with en element that you want to place there. A pop-up menu will appear but in this case you don’t have to click it. If you are drawing a box you can insert it and specify its background color with one keypress.

Editing

Basic editing instructions

Double-click an element to edit it. A context sensitive menu will appear. It contains only options applicable for this particular stencil type.

Selecting multiple elements

You can select multiple elements using one of two methods:

Selecting multiple elements

Locking

To lock or unlock an element select it and click Lock/Unlock button in the toolbar. Alternatively, press Cmd + L.

Linking Pages

Every stencil can be turned into a link that in the Preview Mode will lead to a different page.

Creating a link

Removing a link

Removing a link involves all the steps mentioned above but instead of selecting a page from the list you need to select None.

Exporting

You can export wireframes to a PDF file or a series of PNG files. You can export all pages at once to one file (or zip archive) or export selected pages.

To export your project you need to:

You can include the device template (browser, tablet or mobile) in the exported files or not. For Png format you can also specify the resolution of the produced images. Your pages can be exported as @1x or @2x raster images.

Keyboard Shortcuts

Drawing

Instead of selecting a stencil by clicking an icon in the pop-up menu you can press one of these keys:

Colors

These shortcuts can be used while drawing (to create a box with a given background color) or editing (to change background color of a selected element).

Editing

contact

If you have any questions you can send an email to info@wireframe.cc