Daily UI

Experimenting from Sketch to Codepen.

My Daily Challenges

I am challenging myself to learn more techniques in UI design and front-end code.

Each challenge will consist of two parts: 1) A planning day where I strategize my UI, gather assets, and mockup my ideal finished product. 2) A coding day, where I make my mockup come alive on Codepen.

Challenge 1: Mobile Boarding Ticket

Creating a layout for the boarding pass feature of a travel app Jet Set.

The grid layout allowed me to practice positioning items using flexbox. I had Chris Coyier's A Complete Guide to Flexbox open the whole time I was working in Codepen. For a better presentation of the Codepen, I want to update my CSS once I get a better grasp of responsive design.

Grand Canyon Photo Credit: Jad Limcaco on Unsplash.

Challenge 2: Slide Title Animation

My interpretation of the title animation from Calvin Harris's VEVO. Palm trees sold separately.

Intersecting my passions, I was inspired by Calvin Harris's new song with Frank Ocean and Migos to animate the "SLIDE" title. Predicted to be a summer jam, my goal was for "SLIDE" to exhibit fun flair. The final result required giving the whole title a BounceJS sway animation, while timing translateY transforms for the individual letters.

SLIDE BounceJS animation: Translate and Rotate.

Upcoming: Sezane Hero Timeline

Discovered this Site of the Day off Awwwards, where the most innovative websites on the web are featured. Preview the inspiration here.