Back to News List

Cinemagraphs in Promotional Landing Page Design

Share This

During WA’s most recent collaboration with Pfister Faucets, we developed a landing page to help promote the launch of a new faucet finish - Slate. This post discusses the art direction of the photography and the use of cinemagraphs.

Pfister Slate website on a laptop

About Slate

Introduced as the fashionable alternative to stainless steel, the allure of Slate is its versatility. It blends with virtually any kitchen decor’s colors and textures. If Slate shares common ground with stainless steel in its aesthetic appeal, it one-ups on practicality. Its Pfinish Guard feature offers a matte surface that resists the build up of fingerprints and water spots.

Pfister finishes comparison

The landing page’s audience is comprised of interior designers, design enthusiasts, and casual users - people looking to breathe new life into their kitchens. Our goal was to capture their interest and sustain their product education by offering a page of beautiful visuals, large-scale photography, and interactive features.

Photography Approach

To capture the appeal of Slate’s warm, metallic grey, we became interested in the lighting techniques of San Diego-based photographer Nick Nacca (NaccaPhoto.com).

Nick describes his approach as “blending, sculpting, and shaping with light.” The result is a visual marvel that adds excitement to subjects from luxury cars to everyday household items. Set against a dark, minimalist background, we believed the photography would create the drama needed to transform a faucet finish into a fashion statement.

Samples from Nick's online portfolio

Samples from Nick Nacca's online portfolio

Cinemagraphs

Our goal was also to see Nick’s technique come to life inside of an animated GIF. We wanted to capture the motion of running water and integrate it into the final photography. In this way we intended to create an engaging visual for the page’s hero shot.

When not enabling addiction to Reddit, animated GIFs have a carved out a new life for themselves in digital marketing by transforming into the more elegant form of cinemagraphs. In the hands of originators and reigning innovators Jamie Beck and Kevin Burg, they are a beautiful way of instilling a sense of wonder. For our project, we wanted to capture just a splash of the form’s ability to inspire attention.

Setting up the shoot

The faucet was mounted on black plexiglass and hooked up to a water supply. Since it wasn't installed in an actual kitchen, we had no sink. A plastic tub was used to catch the water as we shot and filmed. A selection of fruits and vegetables were placed in the shots with the colander to add a pop of color. Within a day we captured over a dozen primary shots, including the video of water.

Slate shoot setup

The End Result

When composited together, the end result is a hero shot that we hope unveils Slate with the excitement of the unexpected.

Slate cinemagraph - Slate faucet with running water

More Cinemagraphs

Running water was also integrated into a handful of additional shots which were used throughout the landing page, including the photo gallery.

Slate faucet with water running over bowl of tomatoes

Slate faucet used to clean strawberries

Slate's Kitchen Visualizer

Also embedded into the Slate landing page is a kitchen visualizer. Users are able to engage with Slate’s design versatility by changing the colors and textures across the kitchen’s appliances, cabinets, countertops, backsplash, and floor. The photography and meticulous clipping of the visualizer’s components was done by TC Studios, also a long-time collaborator with Pfister Faucets.

Examples of how Slate fits in with many different kitchens

Having redesigned the entire Pfister website the previous year, the Web Advanced team was excited to have the opportunity to continue to build upon the award-winning website. Check out the landing page here: Slate

About Web Advanced

We share a passion for creating great user experiences across connected devices.

The WA team specializes in building effective brands and enabling organizations to grow online. Our heritage in strategy, user centered design and software development has made it possible for us to deliver no-compromise, digital experiences that generate demand and loyalty for our client's brands.

For more information about Web Advanced, visit us at www.WebAdvanced.com.

Got a project you'd like to discuss with us? We'd love to hear from you. Call us at (888) 261-7414 or send us an email.

What's Next?

Back to Top