Daily UI Challenge Day 002 + 003

Yesterday kind of got away from me, so day I am posting about days 2 and 3 for the Daily UI challenge. Day 2’s prompt was “Credit Card Checkout” and Day 3’s prompt was “Landing Page”.

For Day 2 I designed a payment flow that could work for web or mobile with some simple tweaks. The mock up I made is for web, but for mobile I would simply have a small tab for the cart in the corner of the screen.

Custom Size – 1

The idea is that if the cart tab is pressed then the cart will slide open and take up the open area of the page. The input sections are all divided up and when one section is done it closes and the next one opens. This allows us to keep scrolling to a minimum. I like the look of other credit card payment screens where you fill in the information on a graphic credit card, see the examples below, but I feel like it’s a little overdone, so I opted to lay the fields out in a similar fashion to a credit card without actually drawing a credit card on the screen.

For Day 3 I decided to design a landing page for a fake bakery. I focused on finding a high quality background image and creating a simple typographic design. I chose to go with dark, warm colors to make the page feel cozy and home-y.

Custom Size – 1

So far I am having a lot of fun with this UI challenge. It is a much different mindset focusing on design first. My approach for this project has been to keep things fun and laid back and not try to aim for perfection, so I have been trying to finish each design pretty quickly and not agonize too much over the details.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s