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.
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.
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.*
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.
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!
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.