#014 - Countdown Timer

Originally posted on Instagram on October 4th, 2018.

One of the decisions I’ve made throughout this series is to tie some of these projects in together so they’re not just standalone ones. For example, #006 - User Profile and #007 - Settings go together as well as #012 - E-Commerce Shop (Single Item) and this one.

For this project, I imagined that the sisters running Satchel Stone were about to launch a new collection full of pastel colours that would instantly remind you of cotton candy or candy in general.

Let’s get started, shall we?

2018-09-27 - Flow - #dailyui - #02. In the beginning..

2018-09-27 - Flow - #dailyui - #02. In the beginning..

I decided to switch the squares to circles to see how it looked. So far, not bad.

2018-10-03 - Flow - #dailyui - #07

2018-10-03 - Flow - #dailyui - #07

Then I took it a step further and placed three circles in different colours around the numbers.

2018-10-03 - Flow - #dailyui - #14

2018-10-03 - Flow - #dailyui - #14

2018-10-04 - Flow - #dailyui - #15. I took the same colours from the circles and added it to the “Coming Soon” text.

2018-10-04 - Flow - #dailyui - #15. I took the same colours from the circles and added it to the “Coming Soon” text.

Also, in the screenshot above, I used one of the images I didn’t use for the e-Commerce single item project and placed it in the background. I didn’t like the solid background and thought that it was missing something.

2018-10-04 - Flow - #dailyui - #16. A better close up look.

2018-10-04 - Flow - #dailyui - #16. A better close up look.

I removed the three coloured circles and replaced them with black squares, then changed the colour of the numbers to black as well. (That lasted long, didn’t it?) Also tweaked the spacing of the squares and text on screen.

2018-10-04 - Flow - #dailyui - #20. A look at all 6 of the screens.

2018-10-04 - Flow - #dailyui - #20. A look at all 6 of the screens.

Here I removed the “Coming Soon” heading and added in the name of the new collection, then brought the opacity of that down to 70%. Changed all font colours and borders that were previously black to white with the exception of the brand name then brought the text and squares down to the middle part of the screen. Yes, I am aware that I switched back and forth from white to black and vice versa far too many times throughout this process.

2018-10-04 - Flow - #dailyui - #23

2018-10-04 - Flow - #dailyui - #23

MAJOR KEY ALERT: As you can see in the final below, I changed the squares, numbers and headings back to black. It was tough to read with the white when I did the test GIF although it did tie into that pastel look.

The final version.

The final version.