Over the past week I’ve started taking part in the Daily UI design challenge to showcase and improve on my design skills contained in the rest of my portfolio. Day 3 was a particularly fun challenge as it opened up the prompt to any landing page. I’ve never designed with video before, so I wanted to experiment with scenic imagery showcasing an elegant experience. I landed on the concept of creating a website for a helicopter tour company, mostly so I could use this beautiful footage.

The design came together pretty quickly on Sketch, but when I tried to prototype both the video and glass effect, a number of tools came up short. Unable to create the effect I wanted, I decided to take the opportunity to revisit some of my front-end skills that have gotten a bit rusty. You can see the result in the codepen below. Unfortunately the blurred glass effect is only compatible with Safari for now.

See the Pen Daily UI #003 by Will Vaughan (@wvaughan) on CodePen.