Posts tagged with "templates"

Working with Custom Stencils in Pidoco

Do you want to save time in your projects? Do you want to reuse elements of your prototypes and ensure that your work is consistent? At Pidoco, we’ve added a new feature, which can help you save time when you create your prototypes. We’ve introduced “Custom Stencils”, which enables our users to edit and group stencils together as templates to reuse when they want.

Custom Stencils are perfect for reusing navigation bars, login fields, footers and any other reoccurring content in your projects. What’s more, any changes you make to your Custom Stencils will be carried out wherever you have used the stencil in your project. With this feature you can save time and ensure consistency throughout your projects.

Custom stencils saved in stencil palette

Custom stencils saved in stencil palette

Here is an example: I have used the Custom Stencils feature to create a template for a group of stencils that occur several times in the profile page of my Social Network prototype. This way I have been able to create a consistent layout, so that my image holder, text block and like button remain in the same relation to one another. Because custom stencils are saved at the left of the screen in the stencil palette, I can simply drag and drop my custom stencils into the page.

Creating custom stencil for wireframe

Create a custom stencil for your prototype by selecting a few stencils

You can create a custom stencil by simply highlighting a selection of stencils, opening the context menu and selecting ‘convert to custom stencil’. After converting the group into a custom stencil it appears in the stencil palette under “Custom Stencils” and can be used like a regular stencil. A custom stencil includes the customized information you have included in your stencils and also saves how the stencils are positioned in relation to one another.

Did you know: Another way to create templates in Pidoco is by using the global layer feature, which allows you to create positioned layers that you can re-use on any page in your prototype, for example to create the main navigation of an online shop.

The Custom Stencil feature is available with our Classic and Expert plans. We hope you can save time in your projects by using Custom Stencils. Watch this space for information on more updates to our product. Happy prototyping!

Adding Folders and Custom Stencils

As already mentioned in our previous blog post about the new navigation that we implemented, there were a few new features that had to be finished before we can continue deploying the new version of pidoco. That is also the reason why we weren’t able to deploy this yet, since the features first had to be tested and stabilized to include them into this new preview. Up to now we have finished four out of the five open issues that we mentioned in the other blog post:

Navigation to other pages

We added a little menu to each breadcrumb that opens when you hover over the little grey arrow as shown in the screenshot. It lists all the elements on the same level and you can pick one to switch to that view. We also added a button that opens the desired view in a new browser tab such that you then can easily switch between several views. This way, navigating through your prototype should be as fast as before.

Folders

You can now add folders to your prototype where you can put anything inside. This allows for better organization of all the pages, layers, etc that your prototype contains. In order to move an item to a different folder, use the context menu. A drag and drop moving into a folder has not been implemented yet.

Custom stencils

We already have layers to reuse groups of elements across several pages, but they are always at the same position. From now on you can convert a group of elements into a so called custom stencil that then appears in the palette and can be added anywhere in your prototype. You can add several instances of it to the same page, you can choose different positions, and any change will automatically be applied to all the instances.

New visual design

Since it already took longer to implement things up to now, we skipped this part and will change the design in one of the next versions.

Stability

A whole lot of bugs have been fixed already, but there are still some left to be fixed. As long as we are not satisfied with the quality we won’t deploy the new version. However, it shouldn’t take very long anymore until we reach that point.

Let us know what you think

We would love hearing from you what you think about this new version! If you have any suggestion or feel that there is something important still missing, please don’t hesitate to get in touch with us.

Many thanks for your support!

Designing Pop-Ups Easily in Pidoco

KISS – “Keep it short and simple.” This is the mantra behind Pidoco, and it is the reason why we have avoided cluttering the tool with complexities like page states, panels and so on for simple things like creating pop-ups. Meanwhile, there is no reason why you should not use pop-ups in your prototypes. In fact, there are strikingly easy ways of creating pop-ups in Pidoco without complex, intransparent functions. And here is how you do it.

The trick is using two pages and two layers. In one of my earlier blog posts I talked about how to work with global layers in Pidoco. This is one situation where they are particularly handy. In order to create a pop-up in your prototype simply follow these steps:

1. Create the page on which you want the pop-up to appear.

Creating a new prototype page in Pidoco to design a wireframe

 

2. Create a layer for the page content and use it to design the page. You will need to put all stencils that will be covered by the pop-up onto this layer.

Placing elements on a layer of a Pidoco prototype.

Place the page content on an extra layer.

 

3. Create a second layer for the pop-up. Design the pop-up on that layer, e.g. using a rectangle in which you place the content of the pop-up. Once you are done with the pop-up, make sure to de-select the layer in My Global Layers.*

Creating a second layer in the UI prototype for the pop-up.

Create a second layer in your prototype to design the pop-up.

 

4. Once you are done with this, go to the Prototype View and duplicate the page.

Duplicating the prototype page in order to create a second prototype page with the pop-up.

Duplicate the page to create a page that will contain the pop-up.

 

5. Now open the copy and activate the pop-up layer. Then link up the “pop-up page” with the original page and vice versa. Voilà, done!

Linking the two wireframes to be able to navigate between the prototype pages and simulate the pop-up.

Link the two prototype pages together to simulate the pop-up.

 

This simple recipe will allow you to create functioning pop-ups without resorting to complexities such as panels, states and the like. Instead of using a panel, you simply will have two pages. Easy, isn’t it?

You can also use the pop-up method to create lightboxes. Simply start the pop-up layer with a rectangle whose fill color you set to semi-transparent. This is easily done through the context menu. Make sure the rectangle covers the entire page. Now you can lock the rectangle in place and continue designing the lightbox content.

So, how about you? Have you tried to figure out how certain things are easily done in Pidoco? Let us know below!

 

* Remember: You can order global layers in the My Global Layers panel by dragging them to the desired spot. The layers are displayed in the order in which you place them, i.e. the top layer will show up on top of all the others. For the pop-up layer to come out on top make sure that the pop-up layer is placed above the layer with the page content in the My Global Layers list.