Chrono Clicker

Manage your time,
with just a click of a button.

For this project, we had to create an interactive UI for a clock app, and include a logo animation. It was essential for us to include subtle animations that would make the website more dynamic. Doing so would modernize the app, but also give a better navigating experience to the user. So, Chrono Clicker was created.

The Design:

For my clock app, I wanted simplicity to be the core of the design. Chrono Clicker is just a clock app. So I did not want to overload the users with a bombastic structure. It needed to be simple and clean, yet still have a design that would have layers of depth.

The app’s simplicity can be seen on its menu. The only aesthetic thing about it is the contrast of the blue and white colors. However, as simple as the design is, it manages to capture the users location right where it needs to.

The Colors:

Blue was the color chosen for the design as it evokes feelings of responsibility, calmness, and organization which is perfect for a clock app. I used a darker tone of blue so it can contrast better with white, but also for users that may use the app at night.

The Animations:

Every animation includes a transformation of a circle to a square. The reason for this design is that the circular shape resembles an analog clock, while the square looks like a digital clock. It is also a very satisfying effect that is visually distinguishable.

Transition animations are also present in our website in order to guide the user’s attention. This would make navigating the app more smooth and intuitive. With just a click of a button, you’ll be able to track your time with ease.