Tool: Create interactive layouts applications using Mockup.io

Application development for mobile devices is a complex and time-consuming process. It is based on four main steps. Planning, design, programming, testing. Which of these steps is more important to solve difficult.

But they have in common is that each of these steps is very important to properly and effectively build relationships between all stakeholders. From the customer to the developer. In this circuit very useful the prototypes. Mockup.io is a communication platform that allows:

Basically it is intended for UI/UX designers and mobile application developers. But ordinary entrepreneur — for example, the client application will also be able to use it easily. A significant advantage of the Mockup.io is that its Creator company Alterplay — have already spent years developing mobile applications. So the functionality of the Mockup.io based on real experience of the team and the challenges of audience.

Mockup.io is a service that runs by subscription. There are three subscription plan. All of them allow you to invite at an unlimited number of colleagues and have no functionality restrictions. App for iOS and Android devices free.

If you need a special subscription terms, you can apply directly to the company. Users are able to subscribe to a more expensive or a cheaper plan at any time. When you update the plan all information about projects remains unchanged.

The main competitors Mockup.io are applications such as Notism, InVision, RedPen, Marvell App. They are all based on working with finished mockups. The main advantages of each platform.

There are also more complex applications, such as UXPin, Balsamique, or Avocode. But it is, primarily, the constructors that allow you to create page prototypes from scratch. Presentation design app.

Automatic framing is loaded in a virtual mock-UPS frames devices. IPhone, iPad, Apple Watch, Android Phone, Android Tablet, or abstractnode device (for custom screen sizes). The new version has added the frame for the iPad Pro. Creating interactive prototypes.

Creating clickable areas, linking them with other application screens, installation of various animated transitions (transitions) between screens. Joint work. Inviting more users to the project for simultaneous work on it. View, comment on, create interactive areas, usability testing, etc.

Preview icons. Download multiple icons in a project — allows you to download several different ikonok and see how each of them will look in a real context. On the home screen of the device or in the store (App Store or Play Market).

Prototype testing on a real device. Native iOS and Android to test the prototype on real devices. IPhone, iPad, Android Phone, Android Tablet. The organization of the project.

Folders and tags allow you to structure your project, make it easy to find and access the necessary layouts. Custom label system allows you to assign different statuses mockups. “in progress”, “approved”, “waiting for discussion”.

Support animations and scrolling. The application supports GIF animated models and a “long” page (when loaded into a Mockup.io automatically transformed into web pages with scrolling). When you create a project you must select the device for which you will be prototyping. IPhone, iPad, Apple Watch, Android Phone, Android Tablet, or a custom device (you must specify the size of the screen).

. The project is being managed via the settings menu (Project Settings). It is available within each project, in the upper right corner. This menu allows you.

The project context menu (right mouse button) allows. I would like to dwell on the possibility of preview icons. Anyone who has ever suffered with the development and promotion of apps in the App Store or Google Play Market, knows how much the icon affects the perception of the applications target audience. Especially when the first visual contact.

A good icon can significantly improve the level of sales, draws the users attention, affects memorability app. In Mockup.io it is possible to upload several options for icons and to appreciate them in a real context. On the screen, listing or on the page of apps in the App Store or Play Market.

The main work with layouts — customize links and scroll, tagging, renaming, deleting, updating is carried out via the context menu of the layout. For example, to create interactive links in the prototype used the menu “Links and Scrolling”. Interactive (clickable) area is the left mouse button. In the appeared window you can select the screen on which this zone will be referenced.

Do not forget about the native iOS or Android-animated transitions between pages (transitions). In Mockup.io you can choose any of the existing animations in the transition from page to page. With one of the recent updates to the app added the ability to edit interactive zones.

Now several people can work with them, with all the changes made by one user instantaneous otobrazhatsya on the other screen. In addition to linking pages, the menu “Links and Scrolling” allows you to work with “long” pages to set fixed zones for scrolling. For these zone can be established as accurately as possible, in Mockup.io provides a small magnifier. It slightly increases the area in which the latch is installed.

Communication between project participants is through messages. You can create them on the page of each Macapa. This simplifies the understanding. In addition, if one of the users for a while havent been following the fellowship, he can easily recover the entire chronology of the discussion and changes.

As we said earlier, any of the prototypes for iOS or Android devices can run on a real phone or tablet. For this you will need to download and install the app from the app Store or Google Play. After starting the Mockup.io on the device you will get a list of available projects (created by you or to which you are invited).

Selecting the right project and the screen from which you want to start working with the prototype, press the Play button. However, interactive zones on each of their mock-UPS will be highlighted blue frame. The application supports GIF animated mockups. “Long” page will be displayed as page scrolling.

For the convenience of new users in a web application created a demo project that shows the main features Mockup.io. It is available at a time when the project is created but not loaded any Macapa. In recent years mobile phones have become a must-have for many companies.

It is not a fad but a necessity. The user is more and more action makes from mobile devices, uses electronic accessories. It is this trend and is determined by the demand for platforms such as Mockup.io. They help in developing applications that facilitate communication with clients and within the team, help to save time and money resources.

Main advantages Mockup.io. Mockup.io refers to the prototyping tools that work with the finished mockups. This can be a schematic layouts or completely painted designs.

It is not intended for the page building applications from scratch and does not work with layers. Alternative layers can serve as support GIF animated layouts. Despite its simplicity, Mockup.io is a very sophisticated tool. In the process they discover a lot of nice “little things” that can greatly simplify your work.

This once again proves the fact that the tool was created by specialists who are constantly working with prototypes and know how to improve and simplify the work with them.

Source: google.co.uk/blog/lviv-tech-scene/

Leave a Reply