Site icon ProVideo Coalition

Designing futuristic user experiences with Adobe After Effects

Watch any big budget movie today and you’re likely to see a scene where characters gather around a screen to inspect 3D schematics or hack into secure systems with a handheld device. Among many of the biggest movie franchises, Perception is the go-to design firm for these futuristic user interfaces (FUIs). Perception combines extensive research and visual artistry in Adobe After Effects to create visuals that straddle the line between science and fiction. The company’s work is influencing the look of technology on Hollywood screens—and inspiring real-world companies to rethink how creativity and technology can combine to change the future of user experiences.

Marvel Studios “Iron Man 2” Tony Stark Phone

Twenty years of visualizing the future

Perception was founded in 2001 by Jeremy Lasky and Danny Gonzalez, both creative veterans from R/GA. During the first half of the company’s history, it became well-known for its trailblazing promos and event work seen on almost every major broadcast network. But Lasky and Gonzalez dreamed of taking their science fiction thinking to the big screen.

“What sets Perception apart is how we take the designs seriously to create a story and build out these fictional universes,” explains John LePore, principal and chief creative at Perception. “We aim to do more than just put blue lines on the screen. Our approach has been to really think about these worlds and figure out how technology might work within them.”

Perception has spent the last decade designing FUIs and titles for some of the most successful Hollywood films. The company’s projects have evolved from quick promos to much deeper engagements where Perception artists spend years building out a highly detailed fictional universe.

As Perception made a name for itself in the film world, the real world took notice. From smart TVs to automobiles, visual interfaces shape how people interact with technology, and many brands became interested in how Perception could apply its creative, thoughtful visuals to move today’s interfaces into the future.

“We realized that the influence goes both ways,” says LePore. “Directors want authentic technology in their films. And then real-world companies began calling us because they want their technology to look as cool as the things people see at the movies. That’s where Perception excels. We work in parallel realms of technical reality.”

Marvelous designs for big and small screens

In the Marvel Cinematic Universe, the name Tony Stark is synonymous with out of this world technology. The way those technologies appear on screen needs to do more than look cool—it needs to tell the audience about the brain of Tony Stark himself. In “Iron Man 2”, many of those visuals were created by Perception, marking just the first in a decade of notable collaborations between Perception and Marvel Studios.

Marvel Studios “Iron Man 2” Tony Stark’s Phone Before VFX
Marvel Studios “Iron Man 2” Tony Stark’s Phone After VFX

Two of Perception’s most recent technology design and titles projects include “Black Widow” and “WandaVision.” In “Black Widow,” Perception worked closely with Marvel Studios and director Cate Shortland for 10 months to design much of the technology shown in the film, from multi-layer holographic maps to medical screens and handset controls displaying biometric interfaces. All of the technology design was done in After Effects.

“It makes a dramatic difference to our workflow when we have one app where we can create shapes, work with 3D layers, adjust colors, and play with cameras all in one place,” says LePore. “It helps us work so quickly that we can approach projects like napkin sketches: exploring many different ideas until we find something that works for everyone.”

On the small screen, “WandaVision” aired on the Disney+ streaming service to rave reviews. Each episode is inspired by a different decade of American TV family sitcoms, and the opening and ending title credits reflect the changing styles of each decade. Perception designed several of the opening title sequences, but it was the company’s work on the end title sequence that earned it a 2021 Emmy Award nomination for Outstanding Main Title Design.

Marvel Studios “WandaVision” Episode 3 Opening Title Sequence

The end titles take inspiration from the television-centric theme of the series. Extreme close-ups of key visuals from the episode transition into individual RGB pixels in the hexagonal shape of Wanda’s “hex” powers. The pixels form 3D figures inspired by the story of “WandaVision”: blooming flowers, a butterfly mobile, and the house where Wanda and Vision live. The 3D figures were designed in Cinema 4D, with After Effects used for final comping, grading, editing, and effects.

“One of the reasons that we started working with Cinema 4D 15 years ago is because we loved how it integrated with After Effects,” says LePore. “After Effects is our bread and butter; we do everything with it.”

“The rise of streaming has really changed the volume of work available for us,” adds Doug Appleton, creative director at Perception. “If you look at something like “WandaVision,” every episode had slightly different end titles and completely original opening titles. I’m excited about some of the new features in After Effects like Multi-Frame Rendering because it will really help us keep up with the growing demand.”

Exploring a futuristic UI for the GMC HUMMER EV

While After Effects is the core of Perception’s visual workflows for film and television, artists also use it as a way to prototype dynamic concepts for real-world clients. When designing the instrument cluster for the HUMMER EV from GMC, Perception started with the same questions used when creating interfaces for Hollywood: What is the inspiration for this technology? What information would people need to know? How can that information be conveyed clearly and easily for viewers?

GMC HUMMER EV Instrument Cluster

“We refer to all of the little nuances and personality that we add to interfaces as the ‘soul’,” says Gonzalez. “It’s hard to explain, but you know it when you see it. Our clients really respond to it because they can instantly see that this was a design made by humans, for humans.”

For the HUMMER EV, Perception took inspiration from the moon, based on GMC’s influence on the space program. A custom, angular font reflects the angularity of the vehicle while remaining legible at a glance. Human-centered design is particularly important for automotive instruments, as distracting or confusing interfaces in a moving vehicle can lead to disastrous results.

Artists explored several possible designs to find a balance between style and readability and turned many of the designs into visualizations in After Effects.

“Working with programmers to create a prototype could take months, but we could create animated motion tests in a fraction of the time with After Effects,” says Gonzalez. “It helped streamline the back and forth between our designers and the client so that we could quickly finalize a design. It also served as a great base for GMC programmers to see exactly how the visuals are meant to move.”

From animation to visual effects, motion graphics to user design, Perception has expanded the expectations of what a creative design studio can accomplish.

“We’ve evolved into so many different areas and industries, from entertainment to real life,” says Lasky. “That’s what’s kept our studio fresh after so many years. A lot of the companies that we used to compete with are no longer around because they didn’t adapt. One thing that hasn’t changed for us is our work with After Effects. After Effects helped make our business possible, and we’re excited to see what new doors it will open for us in the future.”

Learn more about Adobe After Effects.

Exit mobile version