Let me begin by saying that the first part of this project was easy and didn’t take very long for me complete. The second part is where all of the time went.

I started off putting things together with two dark grey rectangles then I adjusted the corners and reduced the size.

2018-10-07 - Flow - #dailyui - #02. Rounding out those corners.

2018-10-07 - Flow - #dailyui - #05. We’ve got labels now!

The next step was to bring in circles to the sides of the rectangle along with the checkmark and x icons. I also duplicated the first artboard to start adding colour.

2018-10-07 - Flow - #dailyui - #07. I browsed through Pinterest after seeing some cool gradients pop up in my feed and chose #38ADAE with #CD295A.

I originally made the entire button that gradient colour, but decided to only keep the circle with checkmark that shade then white for the rest. Lowered the opacity down to 64% from 100%

I didn’t want to use another gradient for the colour of the OFF switch, so I decided to use a solid colour that was slightly darker than the blue used in the gradient. I also lowered the opacity of that down to 64% to match the ON switch.

I didn’t take a screenshot of this, but I changed the font from the default Segoe UI to Paralucent Medium in 14pt.

Now remember how I said at the beginning of this post that this took longer than it should have? Here’s where that all ties in. I discovered Atomic, an online software that lets you make interactive designs and prototypes, while I was browsing through Pinterest. (Call me basic. I don’t care.) My first thought was to make this a GIF, but I decided against it because I’ve already made two of them so far and I figured it was time to try something new.

It took awhile for me to recreate everything that I did in Adobe XD, but I managed to complete it and adjust transitions to make it interactive.

Here’s where I started to get a bit frustrated: gradients. Learning how to add in the gradient wasn’t as easy as I thought it would be. I spent a few mins looking for an option to do it right on the main screen, but it wasn’t until I googled “gradients Atomic app” before I found an article instructing me how to do it. Even then, I still had to take it a step further by going to a gradient CSS generator.

Also: curving the corners of the rectangles drove me nuts. Maybe I’m just spoiled and so used to using Adobe XD where you can easily just nudge those points into curves. Again, it took time for me to search the entire screen and press random options before I managed to get the shape that I desired. I’m sure people who use it on a regular basis didn’t run into this, but as a first time user, I thought it would be a little more visible than it was.

TIP: In order to use Atomic, you have to download Chrome. It doesn’t work with Firefox or any other browser other than Chrome, so if you’re not a fan of it, well, you’ll have to work with it. (Chrome isn’t my favourite either, btw.)

Last, but not least, you can view my Atomic interactive prototype here.

[EDIT: 11/12/2020 - This blog post was posted many moons ago and while Atomic is no longer with us, I’ve added a GIF below to compensate for the lack of the interactive prototype. Enjoy!]