Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

How To Make a Cool Countdown With Prototyping Tool?

Mockplus Team 5406 Views

It's easy to make a countdown with the prototyping tool you use. Read this tutorial and get some inspirations.

There are many kinds of countdown designs around us: at the beginning of a video clip, or stay inapparent on the top right of the screen to show the duration of a TV commercial, or used on the startup page of applications to increase the users’ expectations on the following content. It’s no denying that a countdown is very helpful in many cases. Then, how to make a cool countdown with prototyping tool in a way as easy as possible? Let’s learn together.

Tool: Mockplus

Time needed: 3 minutes

It’s easy and fast to build interactions with Mockplus, a rapid prototyping tool. The countdown in the following GIF can be made in only 3 steps with Mockplus.

Countdown made by Mockplus

Step 1 – Customize the countdown style

Launch Mockplus. Drag a Circle Component from the Component Library on the left. Then, double click the component to enter the number you need.

On the properties panel, uncheck the “show border” option. In this project we set the circle color gray and the number color white.

Select the component and meanwhile press “Alt”down, drag the component to make 4 copies. Enter 3, 2 , 1 respectively. (Set the final one as blank white circle and make it bigger)

Customize the countdown style

Customize the countdown style 2

Step 2 – Build Interactions

To build a countdown, we need to make the 5 circle show respectively. It’s easy to achieve this in Mockplus.

Drag the connection dot of the circle 4 to itself. Select “Onload” as the trigger and “Show/Hide” as the command.

Build Interactions

On the Interaction Panel, set Visibility as“Show”, with 300ms delay and 200ms duration.

Set Visibility as“Show”

Also, build the same interaction for Circle 2, with 800ms delay (300ms+300ms+200ms)

Build the same interaction for Circle 2

Set the timing

Step 3 – Put the 5 Circles together

Put the 5 Circles together in sequence (blank one, at the top layer, Circle 4, at the bottom). Click preview to see the effect.

Put the 5 Circles together

Is it simple? In fact, with Mockplus, the fast and easy-to-use prototyping tool, one can build many kinds of interactions including countdown, accordion menu and mouse hover menu, etc. what’s more, Mockplus offers us many unique design methods which show amazing design thinking. Like “How to Make Floating Buttons with Scroll Box?” , this tutorial is a good example.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com