How to create your first wireframe screen
Create your first interactive wireframe screen, without any technical background. In this tutorial we will show you how to do so.
From the widgets palette, drag and drop the widgets you want to the canvas. Once inside the canvas, you can re-size and move them to fit your design. In order to move a widget, select it and drag it to the desired destination; you can also move it using the arrow keys (holding down the SHIFT key will move the element faster).
To create new screens in your prototype, click the “+” button on top of the Screens tab. You can rename them by right clicking them and selecting Edit from the context menu.
Justinmind allows you to copy and paste widgets within the same screen or onto other screens. You can use the options in the Edit menu or the usual keyboard shortcuts of “Ctrl+C” (copy) and “Ctrl+V” (paste). To duplicate elements, you can also drag them to the desired position by holding down the “Ctrl” key or with “Ctrl+D”.
To change a screen’s properties, including its background color, select it in the Outline tree and change the color in the Properties tab.
If you want to delete a screen, right click on it and select Delete. To open a screen, just click on it in the Screens tab. Its content will then be loaded onto the canvas where you can easily edit it.
If you’re working on a web prototype, you can change the size of the screens by going to View menu > Resolution guides.
As you add more screens to your wireframe, you will need to navigate between them. There are several options to do this.
- Navigator Utilities. These are on the left-hand side of the Share/View on device buttons and include:
- View Home Page: This is the starting point of your wireframe; it will be the first screen the users will see when you publish the prototype online or you export it to HTML. It is marked with a star in the Screens tab. If you want to replace it by another screen, right click on the screen you want to be the new home screen and select ‘Set as initial screen’.
- Previous: Opens the latest edited screen.
- Next: Opens the screen you were in before pressing the Previous button.
- Site Map: This is another way of looking at the structure of your wireframe. To do this, click the Site Map tab located at the top part of the canvas. From here you will see which screens you can navigate to from the active screen. When you go from one screen to another, the application shows you all the available routes. This site map is updated automatically each time a link is added to the wireframe. You can learn more about this view in the next tutorial.
Remember: Whatever action you perform, you can undo it or redo it from the Edit menu.