Mockplus - Design Faster. Collaborate Better.

Blog > Design and Prototyping tools > How To Make a Cool Countdown With Prototyping Tool?

How To Make a Cool Countdown With Prototyping Tool?

Jul 23, 2017

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.

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.

Summer ye

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

What's Mockplus?
Mockplus Cloud

A design handoff and collaboration platform to streamline your entire product design workflow.

Mockplus RP

A fast and free online prototyping tool that makes your ideas fly.

Mockplus DT

A vector-based UI design tool enables you design in the way you want to.

Mockplus DS

Your single source of truth to build, maintain and evolve design assets in one place.

Free prototyping, design handoff and collaboration

Join millions of Mockplus users to create the world’s best product

Sign Up For Free