Designing a Monograph-Inspired Video Player Skin for a PortfolioDesigning a Monograph-Inspired Video Player Skin for a Portfolio
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Folio is a player skin I designed for my portfolio, where the videos are case studies of how I work. I wanted it to read like a page from a design monograph: the video is the plate, and the controls are its caption.
The controls are in an ink caption plate at the bottom of the frame. Its running head shows the chapter that's playing, with the numeral in small caps and the name in Instrument Serif italic, and the current time is set large next to it. The seek bar is drawn as a ruler, split into chapters with fine tick marks, and the thumb is a bookmark bar instead of a dot. There's also a chapters menu that works like a contents page, so you can jump straight to a section of the case study.
The colours and type come from awolesigideon.com: cream, ink, a gold accent, Instrument Sans, and Instrument Serif. The plate is solid enough to stay readable over the bright cream scenes and the dark scenes in the showreel, and every control has the same gold focus ring with an ink halo. The icons are a set I drew for the skin on one 24px grid with a 1.5px stroke. On a phone, the seek buttons and picture-in-picture drop out and the touch targets grow to 44px, and the motion collapses when reduced motion is turned on.
The skin is live on my portfolio at awolesigideon.com/showreel, where it plays my showreel from Mux.
Post image
Post image
Denis's avatar
Running head in small caps and Instrument Serif italic, the monograph feel is spot on.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started