Posts from "April, 2011"

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.