Whether you are a website designer or an app developer, at one point you will cross path will wireframing chores so it’s best to be prepared. Most of the popular wireframing tools require a monthly fee, but I’m going to show you an inexpensive method to showcase your concepts.
How to create a Simple App Wireframe with Moqups
1. Visit Moqups site and click on Try it Now! We are going to create a basic UI concept for submitting comments on iPhone and iPad.
2. Let’s delete the sample content in order to start fresh. Select all the content and press Delete.
3. Let’s drag the iPhone and iPad mockups into the work board. Click and hold on the stencil, then drag it to the playground.
4. Let’s change the orientation of iPhone in order to keep things simple. Double-click on the stencil and select Landscape mode right under Settings.
5. Select the Rectangle/Box stencil and drag it over the screen of your devices.
6. I added 2 Text input boxes on each device mockup. One for the Name and one for the Email Address.
7. In order to change the default text, double-click on the newly created text box.
8. Let’s go ahead and add a Combo box. Repeat the same procedure and add another text area along with a Submit button.
9. Let’s create a new page that will display the comment.
10. Copy your device mockups to the new page and insert headers and paragraphs containing the name and the comment of a user.
11. Switch back to the playground page and find the Hotspot & Links icon directly above the playground. Proceed by adding 2 hotspots.
12. Drag the hotspots over the Submit buttons.
13. Preview the work to see whether your UI is working correctly.
14. It should look like this. When you click the Submit button it should show the second page.