Home Design Create App Mockups and Wireframes with Moqups

Create App Mockups and Wireframes with Moqups

0

moqups

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.

Moqups is a web app that works without any browser plug-ins. It’s responsiveness and easy to use nature makes it my favorable pick when designing an app UI concept. It works in HTML5 and JavaScript and will make a great tool that you can use to demonstrate the app capability to your clients.

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.

1

2. Let’s delete the sample content in order to start fresh. Select all the content and press Delete.

2

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.

3

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.

4

5. Select the Rectangle/Box stencil and drag it over the screen of your devices.

5

6. I added 2 Text input boxes on each device mockup. One for the Name and one for the Email Address.

6

7. In order to change the default text, double-click on the newly created text box.

 7

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

9. Let’s create a new page that will display the comment.

10

10. Copy your device mockups to the new page and insert headers and paragraphs containing the name and the comment of a user.

11

11. Switch back to the playground page and find the Hotspot & Links icon directly above the playground. Proceed by adding 2 hotspots.

12

12. Drag the hotspots over the Submit buttons.

13

13. Preview the work to see whether your UI is working correctly.

14

14. It should look like this. When you click the Submit button it should show the second page.

15

16

 

Denis Madroane App junkie, Android developer, proud Freelancer. Passionate about app development and blogging, updated with the new stuff. Likes to think that he's versed in app re-skinning, content writing and social media.

LEAVE YOUR COMMENT

Your email address will not be published. Required fields are marked *

Powered by WordPress