Turn Your Ideas Into Prototypes Rapidly|Mockplus Tutorial
When you want to create the greatest possible mobile app that you can build, you likely already realize that you’ll need a strong foundation to start with. You might feel hard getting into the mobile industry as you’ve never built a website or app before and you have no coding or design experience, but in fact, to turning your ideas into reality is easier than you think. You may ask where to start designing mobile/website apps. The first step to getting your app idea out of your head and into a form that someone else can see, is to prototype your app. But what does that really mean?
What Is a Prototype?
“A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. A prototype is designed to test and try a new design to enhance precision by system analysts and users”. (en.wikipedia.org).
How to Prototype an App Quickly?
The UX prototyping space is booming. Dozens of solutions are now available, it is difficult to pick the best one. From start to finish without any technical expertise or programming knowledge; Mockplus is the perfect tool to visualize designs before moving on to coding. Follow this tutorial you will learn how to create a new interactive prototype with Mockplus in a simple and fast way, no designing or coding knowledge required.
- Go to the Mockplus start-up page and click “New Project” > select a device in the device selector, which lets you define the type of prototype you’re about to build, i.e. a website prototype, a mobile prototype for iPhone, iPad, etc. The aspect ratio will be configured depending on your selection, and you can customize the aspect ratio as needed. The device type and orientation can’t be changed later so choose carefully!
By selecting “Open project…” or “Reopen” option from the start-up page, you can open your project using an existing .mp file.
2. Now click ‘OK’ and this window will show up:
There are two options for the design style: sketch and wireframe. Choose the design style accordingly. You could change the style in the main menu later.
Tip: You can see the demo from the start-up page to help get you started quickly.
3. Once you have chosen how you want to start building your web or mobile prototype, press “OK”. The dialog will close and the workspace with all the tools and palettes will be displayed.
Don’t know how to use Mockplus? Don’t worry, here we will introduce Mockplus workspace with detailed description.
1. The Title Bar. We will start with the Title Bar, which is located at the very top of the screen. On the Title Bar, Mockplus displays the name of the project on which you are currently working.
2. The Menu Bar. The main Menu bar is directly below the Title Bar. The Menu Bar contains New project, Open project, Reopen, Backup, Save, Options, Export, Share etc.The most frequently used options appear on the menu list. An ellipse or a right arrow after a menu item signifies additional options; if you select that menu item, a dialog box or submenu appears. Items in gray are not available.
3. The Library. The Library is next to the Menu Bar. It displays tabs for Component Library, Icon Library and My Favorites. You can change the current one by clicking on the desired tab.
a. The component library. In this tab you will find all the elements you can add to the screens of your prototype. Simply drag them onto the work area.There are seven different sections: Most Frequently Used Components, Extension, Text, Layout, Mobile, Static and Markup.
b. The Icon Library. Switch to Icon Library by clicking the icon tab next to the component tab at the top of the screen. There are about 400 pre-designed icon listed here, with even more coming soon.
c. My Favorites. Mockplus allows you to import/export frequently used components, templates and images to/from your favorites. It will make you design faster and easier with My Favorites.
4. Search Box. You can search specific component, icon and collection quickly in Search Box.
5. Work Area. It displays the content of the active screen and allows you to add or change its components. You can change the component properties (size, color, layout, link etc.) on the Properties tab by clicking on the corresponding components. You can rotate the screen by clicking the “Rotate” icon at the upper-right corner of the screen (only available for the blank screen). It allows you to change the screen properties ( page size, background, font size, font, remark) by going to the “Options…” button in the right-click menu.
6. Properties Tab. Here you can edit the properties of the selected component/icons (e.g. color, background, text, border, font, position, layout ). It also includes a section where you can add remarks, interactions related to the element. Please note that the properties that are specific to each component/icons. You can move the properties tab as you want or pin it into the right sidebar by clicking the “Settings” icon.
7. Project Panel. It lists the screens in your prototype. Access its content by clicking on any part of the project tree. In the Project Panel, you can: add new page/folder quickly, save project, change screens order, quick search screen, rename screen, copy screen, cut screens, delete screen etc.
8. Preview Button. Clicking the“Run”button at the top of the screen to get a quick preview of your prototype and make sure things are working properly, without having to export it. If you prototype a mobile app, it allows you to view your design quickly on actual device by pressing “Preview on mobile phone”button next to the “Run” button.
9. The Status Bar. The Status Bar appears at the very bottom of the screen. Here you can zoom in or zoom out your screens. You can also change the settings of your project on the Status bar by clicking the “Settings” icons.
Hope this basic overview of Mockplus is helpful to you. If you have further questions, please feel free to contact the support team via support@jongde.com.