100 Days of UI Challenge

October 2017

The Challenge

On a mission to hone my craft as a designer, I recently decided to take on the Daily UI Challenge, which is an email newsletter that sends me 100 days worth of UI challenges. To increase my learning curve, I introduced a set of criteria for every challenge.

Objective: Improve my UI, graphic & visual design skills.

Every challenge shoud address at least one of the following:

Challenge #1: Sign up page, modal, form or app screen

My first challenge was met with foundational graphic design principles - color theory. I learned the color lingo (hue vs chroma, tone vs shade vs tint) and tools (color scheme and palettes) to communicate and evoke emotions.

I decided to design a sign up screen for one of my recent trips in Melbourne to discover street grafitti art and laneways. After experimenting with several color schemes, I settled on the below to communicate the idea of fun, spontaenity and discovery based on the picture captured from my trip.

The final design

Color palette generated from Canva

Challenge #2: Credit card checkout form or page

First thing that came to mind was designing for travel activities checkout, mostly inspired by my recent read on The Airbnb Story. I decided that a static jpg wasn't enough to communicate the series of interaction from punching credit card details to confirming the order. As a first step to motion and interaction design, I used Keynote to prototype it.

For this challenge, I learned about the importance of contrast, alignment, proximity and white space in visual hierarchy. I specifically designed for the desktop experience and decided that the Rule of One Thirds would serve as the best placement for the checkout interface as users look down on the waves.

When animating the responses to user actions (ie. press a button, type a number), I learned that even a subtle 50ms makes a difference in perceiving states (ie. processing vs processed).

Challenge #3: Calculator for Numbers, Mortgage or Anything

Given that I used to work at a travel loyalty program, the first calculator that came to mind is on the number of miles traveled. In response to emotion design, I wanted it to be a milestone calculator and about celebrating traveler's moments.

This time, I focused a lot more on the nitty gritty part of creating vector art using Adobe Illustrator and then mocking it up with HTML/CSS. I learned to design with gradients, which uses mostly analogous colors. And gradients are tricky. The gradients' directions matter and when you have more than one set of gradient, the visual pairing is quite a test-and-learn. I also learned to design create depth with shadows and reflections for the mountains, hot air balloon, clouds and the sky. I gotta say, gradients are so much fun to look at!

Challenge #4: User Profile - Serious or Social?

The layout this time is quite straightforward - username, CTA, interest clusters and a short description. Visually, the background image and profile picture was the most difficult pairing. The user photo I chose has a very warm, yellow tone and I wanted the background image to contrast but not overwhelm the user photo with too much details in the background.

In terms of tools, I wanted to improve my responsive web design skills, specifically the Bootstrap navbar responsive hamburger menu and navbar color change when scrolling.

Desktop version

Mobile version