100 Days of UI

  • 2015
  • UI

Originally started by the Dribbbler Paul Flavius Nechita, the '100 Days of UI' challenge is an exercise in improving one's UI design skills. It had been a while since I had worked on designing interfaces without accounting for developmental complexities, so I decided to give this a shot.

1. Login Form

The first challenge was to design a simple login form. Historically, Login forms on the web and mobile have been treated like second class citizens, a mere afterthought. However I firmly believe them to be one of the most important part a person's onboarding experience. A well designed login form inspires confidence in the product, while a bad one leads to confusion, frustration and in some cases, complete loss of interest.

2. Product Card

The second challenge was designing a Product description card. The aim of this challenge was to display a product and its details in a clear & concise manner and motivate people to buy what I'm trying to sell. My product card design was for a DSLR Camera.

3. Dial Pad

Next up was a smartphone dial pad. Dial pads have been around as long as we've had the first telephones. However, apart from the addition of the octothorpe and the asterisk (# and *), Dial Pad's remained virtually untouched for decades. All that changed with the advent of smartphones in the late 90s. Their introduction opened the gates to a host of new possibilities. The dial pad I've designed is a platform independent one, featuring minor tweaks to make some repetitive tasks easier to perform.

4. Credit Card Checkout

E-commerce has revolutionized how we buy and sell things, largely due to Credit Cards and their ease of use. So it goes without saying that a lot of care has to go into designing this online payment experience.

5. Music Player

This one is self explanatory. After designing semi-skeuomorphic interfaces for the first few challenges, I wanted to try out a different art style, video-gamey to be precise. For this exercise, I focussed making a music app oriented towards kids, which meant a couple of things needed special attention : A bright and appealing color scheme and easily identifiable icon based action buttons.

6. Currency Status

The sixth design exercise was for a currency comparison/convertor app. This one was a little more complicated as compared to the previous, more generic exercises.

7. Fitness Card

The next exercise was to design a fitness oriented app. After giving this some thought, I settled on designing a run tracking app. The focus of this exercise was to give a visual overview of the 'Run', so to speak. The design itself was card based and not built for any specific platform, but due to the simplicity of the interface, it can easily be ported over to a mobile version.

8. Recipe App

This one was my favorite of the bunch - A recipe app. It took considerably longer than the others too. My experience with working on Ami whelped me shortlist the details of a recipe that I needed to display. Based on some early mockups, I decided on a split pane UI (Ideal for navigation and displaying content on tablets). I also opted for a more skeuomorphic look while designing the UI.

9. Weather Widget

The 10th exercise was a simple weather widget. For this exercise I designed a simple interface, with emphasis on the colors for the main illustration and the temperature label.

Up Next

Ami

Restaurant and recipe recommendation app