Designing reuseable React
components

At Vimeo, there’s an active marketing appetite for product pages. As functionality expands, the creative team is tasked with showcasing new value to future subscribers, often on a rigid timeline. Prior to this project, each marketing page was created without an underlying design or code structure. The new modular system allows writers and designers to focus more on creative work and engineers can deploy each page in a matter of minutes rather than a number of days.




Inside a component

In the designs above, two different features utilize the same Wrapper component. Embedding your video across the internet is one of Vimeo’s most common tools. Embedding interactive screens inside your video is more specialized. The code for each design is identical, but the visuals we pass through each container are more tailored. Flexible components allow us to design with more consideration and spend less time in QA and technical loops.


Fully responsive and meticulously designed for scale.


All designs react to the composition of both graphics and copy, producing beautiful, pixel perfect demonstrations of Vimeo’s product. The blocks can be broken out into individual layout components we refer to as atoms and molecules. These build within and atop one another to form complete sections. With the FiftyFifty component for example, the design can heighten, flip and animate depending on the creative direction of each context. And the entire library is aligned to our grid system, so every component supports 4 breakpoints to expand and contract to.




Roles

Design: Moazam Shah
Engineering: Work&Co., Eric Smiling
Creative Direction: Graham Douglas


Other projects