Justinmind Blog

Wireframe & prototype apps and websites for iPhone. And the library is free for all the Justinmind users out there! Just download it.
We hope you’ll enjoy wireframing with our widgets. We try to include all the necessary elements and to make widgets as faithful as the original iPhone design! We hope you’ll like it, feel free to contact us if you want to add your own iPhone widgets, so all the community can enjoy your work.

iPhone widget library for Justinmind

See the library component list: Component List

Example of a iPhone prototype: See prototype

Download the iPhoned widget library and try it yourself: Download Library

Following this morning’s post about how the slider worked in a wireframe, now I’ll show you quickly how to create a unlock effect.

After the slide, the gray screen disappears, and we see the normal iPhone background, or anything else you might want. How to do it?

The slider widget is inside the gray box, and behind that box, there are several buttons, widgets, your whole application. What do we need to do?

Go to layer four. That’s the layer in which the  button is in the extreme right. Well add an event to the button, that hides the gray box. The slider widget will be hidden to, as it is inside the container. Simple as that. Remember that, for it work just as the iPhone, it must be an OnMouseOver event, not OnClick, which is Justinmind Prototyper’s default event.

After the launch of the iPhone widget library, I’ve started creating some mockups of iPhone apps. But before showing you that, I’ll explain how the widget work.

Here’s the widget simulated.

How does it work? How to make a box move?

First, install the widgets, drag and drop the unlock button in your canvas. It works as any normal widget.

Now let’s see how it was built. It will look like this:

As any widget, you can edit and modify its parts.

It’s a layered box, with four steps. Each step from locked (left) to unlocked (right) position. Besides the button, there’s an invisible container with an event. The event is OnMouse Enter, show the next layer. This means that, when you’re on the layer 1 and passes the mouse over the trick invisible container, it will hide the first layer and show the second one.

Here’s how it works. We repeated the trick in the four layers:

Now there are 2 trick boxes, one for going forward and one for backwards. This means the slider can go any direction.

In the last layer, we add another trick:

When the fourth layer is shown, we want something to happen. In this case, it will probably mean that the screen will be unlocked and you’ll be able to see the content that’s there. So, Select the button inside the fourth layer of the box, and add an event.

You can create a link to another page, where your iPhone simulation starts or you can hide the background gray screen.

I’ll explain how I created the screen in the next tutorial.

Following our first post and second about freebies, now you can create iPhone app prototypes with more details. Just create the app, the phone’s background will already be there.

iPhone template
Click here to download the template for iPhone.