get faster to a product your customers love!
girl

New: Save drawings as stencils

A new update is out and we're sure that it will speed up your workflow a lot. pentotype already allowed duplicating elements which is very useful when building UIs with repeating elements. We take this a bit further now and allow you to save drawings as stencils. Such a stencil can then be reused, even when you are working on a different project.

Creating and reusing stencils

In order to create a new stencil, draw some elements (and/or use the text tool) and select them. Then, click on the export button in the lower left corner of the selection box which will show a small menu. Its first item is the "Export as image" feature which you already know. The second item however is the new one: "Save as stencil". Click it, and you've created a new stencil.

https://lh3.googleusercontent.com/-1gMCejteFRY/U1kFUSIoqpI/AAAAAAAABKM/QgHovGU2lbY/w540-h435-no/create-stencil.png

All your stencils appear in the new side bar on the left side. On the iPad, you have to open it by tapping on the "+" button, while it is permanently visible on the desktop. By clicking on a stencil you insert it to the current document.

https://lh6.googleusercontent.com/-Mw7crFz01XA/U1kUut8AT7I/AAAAAAAABLc/R21gv0w8xTE/w540-h507-no/stencil-sidebar.png

On the desktop, moving over a stencil with the mouse unveils a delete button which lets you get rid of obsolete elements. On the iPad, you need to tap and hold a stencil to access the delete button.

https://lh3.googleusercontent.com/-9FX78x9WiQY/U1kUtqR1GvI/AAAAAAAABLU/dOAJGgttU_8/w540-h220-no/highlighted-stencil.png

Predefined stencils

In order to get you started with your first wireframe even faster, the sidebar already includes a well-picked collection of pre-defined stencils that you can use right away. The list includes a navigation bar, a tab bar, buttons, icons, lists, a date picker and keyboard placeholders:

https://lh4.googleusercontent.com/-UdX4KVAENV4/U1kFWvuTsHI/AAAAAAAABKg/9XEOucldgPY/w540-h320-no/predefined-stencils.png

You’ll also find a stencil of phones (portrait and landscape) which are already equipted with a title bar and a list view.

Furthermore, there is a map stencil which we designed self-repeating. That way, you can create a bigger map just by using multiple copies of it:

https://lh6.googleusercontent.com/-iPh_sfxfrwQ/U1kFWCtkQDI/AAAAAAAABKY/bIbadzUgL9M/w540-h505-no/map-stencil.png

Working with stencils

  • Insert a stencil and modify it: Some of the stencils might include texts or icons that you want to customize according to your need. It is very easy to do that. The good thing about pentotype’s stencils is that the elements of the inserted stencil can still be selected individually. No “merging” is done when creating a stencil. That way, you don’t loose any flexibility and there is nothing to stop you from e.g. deleting unwanted list items, replacing icons or using the text tool to change captions:
https://lh5.googleusercontent.com/-ij6Wfs3f7rI/U1kFUTn3JuI/AAAAAAAABKI/zuW82u4S0-I/w540-h346-no/edit-stencil.png
  • Editing saved stencils: Just insert the stencil in an empty space of your project. Then, apply your changes, e.g. replace an element or change a color. Finally, select everything and save it as a new stencil. If you’re happy with your new stencil, you can delete the old one.
  • Create stencils of screenflows: Stencils can not only consist of strokes and texts but also of phones and connections. This allows you to create stencils for small screenflows. For example, you could have a stencil for the “Tweet” or “Select from image gallery” workflow.
https://lh6.googleusercontent.com/-ED7h_ztlqkQ/U1oeLZXSsTI/AAAAAAAABMc/3FS8K43efko/w540-h325-no/flow-stencils.png
  • Draw on the iPad, arrange on the Desktop: If you prefer working on the desktop with a big screen, you can still use the iPad for drawing. In that case, you would draw UI elements on the iPad and convert them to stencils. Then, start pentotype on the desktop and find the new stencils in the sidebar.

Other improvements

We improved the regular copy feature. When duplicating a selection of phones, the connections between them are now also copied, so you don't have to link the copied phones again. In the same way, connections are preserved when converting multiple phones to a stencil.

Talking about connections, you can now draw an arrow from a text to a phone which will make the whole text clickable.

https://lh6.googleusercontent.com/-nCECYxySs3o/U1kFYfC2jdI/AAAAAAAABK0/aYpcFc-EiXY/w540-h223-no/text-links.png

Furthermore, it is now possible to change the colors of elements afterwards. Just select them and click one of the color buttons.

Finally, we’ve increased the maximum zoom-out level on the desktop which will help you get a better overview in large wireframes.

Try pentotype now: iPad | Desktop

blog comments powered by Disqus
Finished reading? Browse all articles »