Once you have started the Protoreto Editor, you will see an empty window. To create a new prototype, select File -> New from the menu bar, or press the "New prototype" button in the tool bar.

A window will show up, into which you can insert a title and a description. You can also select a scripting language, but this doesn't matter at the moment because we only want to create a simple prototype without any scripts. The title is the text that will be shown in the title bar of the prototype window when you run it. You can use the description text for whatever you want, e.g. information on what the prototype is supposed to do, who created it, etc.

Once you click "OK", the Protoreto Editor will open another window, with which you can create the first screen of your prototype. Screens are the units into which a Protoreto prototype is divided. For example, one screen may contain the phone with the main menu; another screen could show the phone with the web browser switched on.

Let's first create a screen for the main menu. We can set an arbitrary ID for this screen, so let's call it "main menu". We should also add a background image; we want to use the iPhone photo that you have seen above. So after downloading it, go back to the Protoreto Editor, click "Select image", then "Import file", and choose iPhone.jpg. Click "OK" two times, and you will see your first screen in the Protoreto Editor. Congratulations!

Now try to create a second screen that looks exactly the same, but has the ID "second screen" instead of "main menu". You can open the "new screen" dialog by selecting Screen -> New screen from the menu bar. This time, you don't have to import the background image file, you just have to select it. As an alternative approach, you can select Screen -> Duplicate Screen to duplicate the "main menu" screen.

As you can see, there are now two tabs at the bottom of the editor window. The main menu, which is the start screen of our prototype, is marked with a small "home" icon. You can use them to toggle between the screens that you have just created. Of course, these screens don't have any noticable differences at the moment.

Adding elements to the screen

Text labels

Now that we have a prototype with two screens, let's add some content to them. First, switch to the "main menu" screen by clicking on its tab at the bottom of the window. Now add a text label to the screen. The easiest way to do this is to click on the "New text label" button on the tool bar to the left.

The new text label is supposed to offer some orientation for the user. So write a descriptive text which describes in which state the device is on the current screen. Also, don't forget that the background of the iPhone is dark, so choose a light color for the text label element.

You don't have to care about the width and height of the label, it will be determined automatically so that the text fully fits in. Also, you don't have to set the X and Y position manually; you can just drag and drop the screen element later to move it around.

So just click on the "OK" button, and you'll see that the new text label has been placed at the upper left corner of our prototype. Drag and drop it in order to move it to the screen of the iPhone. Repeat these steps to add a text label on the second screen, of course with a different text. Alternatively, you can use the copy & paste mechanism to copy the text label to the second screen, then change the text by right-clicking on the label and selecting "Properties".

Now run your prototype by clicking on the "Run" button in the main tool bar (or by pressing CTRL-R). As you will see, the prototype will start with the "main menu" screen. But you cannot yet interact with your prototype in any way, other than closing it.

Buttons

So let's add some interactive elements to the prototype. First, switch the editor to the "main menu" screen. Then add a button to the screen, just as you have added the text label. As the button text, enter "Proceed to the next screen".

As you can see, the button has been added to the screen, and it has been auto-sized so that the text fits in. Drag and drop it to move it to the display area of our simulated device. If you ran the prototype now, you could already click on the button, but it wouldn't have any effect. To add functionality to the button, right-click on it in the editor, and select "Transitions". A new dialog window will pop up.

As you can see, the current behavior of the button is to stay on the current screen when it gets clicked. From the drop-down menu, simply choose "second screen" to change this behavior. If you want, you can also add a comment on this transition, e. g. "Button clicked, switching to second screen". Click OK to apply your changes and close the dialog window. Now run the prototype to test your new button. Congratulations, now you know how to apply simple transitions to buttons. But once you have switched to the second screen, you can't return to the main menu.

Click areas

Switch the editor to the second screen. We need to add an interactive element that will lead the user back to the main menu. As you might know, the iPhone has a physical "home" push button at the bottom of its front side. On the real iPhone, this button leads back to the main menu; this is exactly what we want to simulate.

We could add a button with that functionality, and move it to the position of the photographed "home" push button. But then it would cover the important part of the iPhone photo. Instead, we can use a so-called "click area" element. A click area is fully transparent, so that the user will only see the elements lying under it, or the background image.

Create a new click area, just as you have added the text label and the button before. Just press "OK" when the "New element" dialog window opens. Then use drag and drop to move the click area over the iPhone's "home" button, and to resize it accordingly.

Afterwards, add a transition to the click area which leads back to the "main menu" screen. Run the prototype to test your changes.

Congratulations, now you know how to create a simple prototype using Protoreto. Play around a bit and try to add other kinds of elements to your prototype. Then you can continue with the [Using_script_code] tutorial if you want to learn how to develop more advanced prototypes.

You can download the prototype from this tutorial here.

Protoreto-Tutorials

[[Installing and starting Protoreto|