Justinmind

BLOG

Expand your prototyping knowledge

Tutorial 07: Pop up screen using masters


This is an old entry, please check our tutorials section in our website

I have this prototype of a Tour Agency, and I want to create a pop up that shows a map.

Here, in the red dot, I need a link that says: “Click to see map”, and when clicked, a pop up shows the map. For this tutorial, I’ll create just a grey box, but later, it’s possible to embed Google Maps objects easily in Justinmind Prototyper.

First, we go to the Masters Panel, and create a new master. We’ll see a blank main screen. This is the area of the map.

Let’s put a link, and the grey box where the map code will be.

I’m going to place the box above the link, so let’s first create the events and then put them in the right position. Also, it’s important to mark the grey box as hidden. It means the box won’t be show in the simulation, except if something happens.

The first event is for the link. Go to the Events panel, create a new event and choose: OnClick – Show, and choose the grey box.

The event is ready. If you simulate, you’ll see the box when clicking on the link. Now, the second part. We’ll create a big red X button, to close the box when clicked. To create this, just follow the same steps. Create an X, place it inside the grey box, and add the event OnClick – Hide, and choose the box.

Next step is the layout. Place the box where you want, and the link too.

Go back to your main screen. Just drag and drop the master on the screen, and it will be there. You can place several masters on several screens and them edit them all later by just editing the first one. For this wireframe, we won’t put graphics, but later on the project I’ll put colored buttons, gradients and other things.

Place the master wherever you want with drag and drop. Then, simulate and test it.

These are frames of the link working.

Victor Conesa

About the Author

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.

Comments are closed.