Learn how to prototype web and mobile apps

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.

Next tutorial > How to view a sitemap of your wireframes


  1. DJ

    December 2, 2014 at 10:08 pm

    How do you change the size of your screens after you have already created them?

    • admin

      December 9, 2014 at 1:29 am

      Go to the main menu option View – Resolution guides.

  2. Rafael

    December 15, 2014 at 8:08 pm

    There isn’t the “resolution guides” on the tab “view”

    • Lidia Rodriguez

      March 4, 2015 at 11:03 am

      It’s only available when working with web templates.

  3. Sujith

    January 30, 2015 at 7:05 pm


    How do we include mobile and tablet screens (Responsive) once you create a regular website wireframe? Please let me know.


  4. Andy

    April 17, 2015 at 9:31 am

    How can i change the default name in the outline elements?

    • Lidia Rodriguez

      July 2, 2015 at 10:27 am

      You can do it on the properties tab of each element.

  5. Jordi

    May 13, 2015 at 9:25 am

    Is possible recover deleted screen?



    • Lidia Rodriguez

      July 3, 2015 at 10:51 am

      Hi, you can try to find your prototype backup on /Users/Xxx/Justinmind/X.X.X/backups/Xxx/

  6. Melissa James

    July 28, 2015 at 1:17 pm

    Can you copy and paste a screen to another project?

    • Danielle Schneider

      July 29, 2015 at 1:00 am

      Hi Melissa,

      Unfortunately, at this time you cannot copy and paste a screen to another project.

  7. Stratten Waldt

    August 9, 2015 at 7:37 pm

    Hey, is it possible to change the background color for the application? I’m not sure how to do that without creating a blank image of the exact width and height needed to fill the screen and sending it to the back.

    • Lidia Rodriguez

      August 10, 2015 at 8:19 am

      Yes this is possible. You can do it by creating a template and applying it to all screens or clicking on the screen item on the outline tab and changing the background properties.

  8. Warren

    August 10, 2015 at 4:48 am

    Is it possible to save an existing screen as a template?

  9. Sherish Says :

    August 26, 2015 at 8:30 am

    Finally, a good site that isn’t in my face trying to constantly sell me something. Thanks, please keep up the good work.

  10. Nick Chilvers

    September 9, 2015 at 11:45 am


    Is there a possibility for a screen to change to another screen automatically? I want to show the initial load screen going into the main menu without having to click a widget to get there. Is this possible?


    • Danielle Schneider

      September 9, 2015 at 1:01 pm

      Yes – first create an on page load event with the outcome of ‘pause’. Then create another on page load event with the outcome to link to another page.

  11. Nick Chilvers

    September 10, 2015 at 6:34 am

    That worked perfectly, thanks Danielle!

  12. Nathan

    September 11, 2015 at 4:05 pm


    I am wondering how I make a mobile prototype in landscape? I am not sure if I need to make a separate view or prototype for that or how I would rotate the device in the editor.


    • Danielle Schneider

      September 11, 2015 at 7:15 pm

      When you go to create a new prototype for a mobile device, you should see an option to change the orientation to Landscape. If you wish to do this within an already existing portrait prototype, create a new page and space everything as it would be in landscape mode even though the device outline will remain in portrait mode. You can see how this looks in landscape by going to simulation settings and setting it to landscape.

      • Nathan

        September 11, 2015 at 7:27 pm

        Thanks. I am also wondering if I need to make a new prototype for each different device I want to model or if I can prototype multiple (say iphone and ipad) in the same project?

        • Danielle Schneider

          September 13, 2015 at 4:23 am

          You can use the same prototype. You’ll just have the create an on-page load event to detect page size in order to load the correct page (iPad or iPhone).

  13. Scott Mackenzie Says :

    October 8, 2015 at 12:49 am

    Is there and widgets that allow one screen to slide and expose a menu that is under the screen that I want to move to the right( to expose the menu)?

    Need Help, Thankx