Mockplus- Design, prototype and deliver your digital future
Get Started for Free
Blog > Samples > Inside Mockplus > Management App Design Example – One List

Management App Design Example – One List

Sep 14, 2017 86432

One list is an app that can make you work in a more efficient way. The highlight of this app is that animations are used in the 6 intro pages to guide people how to use it.The intro pages use animations, which is really interesting and easy-to-understand. This time I would like to teach you how to make animations in intro page with Mockplus.

Firstly, let’s take a quick look at the GIF:

Mockplus Prototype Example-One List

Click here to view this project online: http://run.mockplus.com/NKpn7HrxBbrE6Lnb/index.html

Here are three steps:

First link the component that you are going to add some animations to itself.

1
Choose”On Load”as the trigger,and the animations would automatically display when the pages are switched, then choose the type of animations you need.

2-en
Finally, you can set the duration and delay time of the animations on the interation panel.

3-en

Then,a simple animation is finished. If you want to use multiple animations combined, make sure that delay time is set correctly otherwise the animations won’t go smoothly.

And here is the UI Flow in large size for it:

Mockplus Prototype Example-One List UI Flow

The main pages of this prototype include: Welcome, Home, Menu, Help, etc.

All the above pages can be downloaded from here.

All pages of the album (13 pics in total) can be downloaded from here.

Enjoy it!

Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

What's Mockplus?
Mockplus Cloud

Uploads design files from Sketch, Figma, Axure, Photoshop, and Adobe XD into our design handoff tool.

Mockplus RP

A free online prototyping tool that can create wireframes or highly interactive prototypes in just minutes.

Free web & app prototyping tool
Create wireframes or highly interactive prototypes in just minutes.
No time limit Up to 10 users
Get started
No, thanks, i'm good.