Daily UI #003

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.