DailyUI 002 – Credit Card Checkout

Second challenge – a credit card checkout. This one was fairly tricky as it could be anything. Coming up with the layout and looks of it took time, but as soon as I got the challenge I knew what would be in the checkout. As I had just a few days earlier put a pre-order for this exact product it became the inspiration for this design.

The colour scheme this time was derived from the product itself. A dark grey with a deep red with light text for legibility. At first I picked the red from the FightStick itself, but I found it was too bright and in your face, thus deepening it to what you see here. The font used is Lora, a personal favourite which I feel fits well in many situations.

I’m still debating my choice of using the red for the input field titles. On one hand I feel it looks better than a light text, but on the other it reduces legibility. In hindsight, had this been a real thing I probably would have made it a light one.

Again we see handcrafted icons. This time in the form of a credit card, an info icon and a shopping bag. The first two are fairly self-explanatory, though I feel like I totally misplaced the info icon here. There’s so much space to the right of the CVC text that I don’t even know what I was thinking here.

The shopping bag icon was the most difficult one. I was struggling with coming up with something that would represent a purchasing action clearly without any text – one of the main drawbacks of using FABs for big calls to action like this. So I took to The Noun Project for inspiration and a majority of the icons that appeared when searching for terms like “buy” or “purchase” are either shopping carts or shopping bags. After a few minutes of consideration I went with a shopping bag. However, one feedback I got was that it looked too much like a padlock. Which I now totally cannot unsee.

That’s it for this time. Peace.