A question we recently received and one that has come up more frequently over the years is – How to design content for transparent displays?
First – What is a transparent display?
Transparent displays use a semi-transparent glass or film that allows content to be played on it while simultaneously being able to see through it. Applications can range from retail entryways to hospitality and everything in-between.
Designers seeking to build content for a transparent display must ask several questions: First: what kind of technology does the display use? Video can now be played on a number of different transparent display devices, from high-resolution LED screens to strips of colored LED lights which light up in a sequence so that, when spun like a fan, a video emerges. Other displays create a transparent effect by projecting footage onto a specially treated glass. Many of these technologies play video at different resolutions, frame-rates, etc., so it pays to look up the specs of the display device before you even start designing. Once it’s time to start working, the next question is where the display will be located. Most colors on transparent displays will get progressively more see-through as they get darker, with black usually keyed to be fully transparent. Therefore, an animation intended for a brightly lit area will require high-contrast graphics and bright colors to avoid having your message wash out. On the other hand, a display with a shadow box behind it will show a wide variety of colors and shades legibly.
Another question that is unique to transparent displays is, “What is behind the screen?” Darker, solid backings generally work well, but if your display is in front of a busy space, it can be difficult for a viewer to see and understand the content on the display. For this reason, many transparent displays make use of shadow boxes, which allow for a more controlled environment. If your display uses a shadowbox, a designer should ask what, if anything, will be placed inside the box, behind the transparent display.
One fun use for this setup is to create the effect of digital content and graphics ‘interacting’ with real-life objects. With careful planning, you can make graphics emerge from behind or spin around an object, change the object’s color scheme, or appear to be held or contained by the object. For example, FWD once created an animation where wine appeared to fill a wine glass, the company logo circled the glass, and grapes tumbled past. The interaction between physical and virtual elements created an effect that was more eye-catching than a completely digital animation. If possible, have the display on-hand during the design process so that you can test your animations and correct for errors before your client sees it in their space. Particularly when using shadow boxes to display real-life products behind the display, care must be taken to align the animation and the object for optimum impact. For instance, when FWD first tested the wine-pouring animation, it looked like the wine was pouring several centimeters above the glass itself! FWD corrected this mismatch by placing a coaster and a piece of black fabric under the glass, thus bringing the glass up to the height of the animation.
Finally, remember to have fun! Working with transparency opens up many avenues for creative expression which aren’t available when designing for an opaque display. With enough time (and testing) you can create truly remarkable content which is sure to impress both your client and their customers.
Written by our 3D expert and creative team member, Josh!
Contact us for more information!