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.