Rick and Morty

Our latest project from one of our favorite clients, Adult Swim, comes from the universe of the TV show Rick and Morty.

The site was created as a content hub to collect Rick and Morty content from all over the internet, including show streams, purchasable merchandise, fan art and social media posts.

0:00

/0:32

The challenge for us was taking a fairly standard site structure, and infusing it with the flair and tone of Rick and Morty in way that fans would love.

The Brief

Kicking off the project, Adult Swim had three priorities for the site:

Serve video content
Help sell Rick and Morty products
Showcase promotional content e.g. video sneak peeks

With this in mind, the wireframe provided showed a fairly conventional site structure — a linear scrolling site with five core sections: videos, products, news, games and fan art. While we were comfortable creating this sort of site, we wanted to identify exciting ways to plus it up and make it feel like an experience worthy of the epic franchise that is Rick and Morty.

A single page scrolling site was the starting point of the project.

Assets from the show

A key point in the early creative process was receiving a comprehensive asset package of photoshop files of original artwork from the show’s episodes. These assets included backgrounds, characters, props, and just about everything we’d need to push the design towards a more immersive, exploratory experience. To add to this, the assets were packaged as clean, layered photoshop files — which made them incredibly easy to work with and translated perfectly into our internal production workflow.

A small sample of different objects available from the provided asset package.

The Idea: Explore The Universe

Originally, the site consisted of five core sections; videos, merchandise, games, news and fan art. Rather than keep it at five discrete sections, we wanted to make the experience feel more like you were exploring the universe of the show.

We did this in two steps. First, we assigned each of the five sections to an environment — watch the videos in the garage, see the news in the basement, view fan art in space etc. Second, we inserted interactive easter eggs in the form of a portal gun that users could use to break free of the site structure with a more exploratory full screen mode.

We added an ‘immersive art’ extension to the five core sections to give users the chance to explore more environments from the show.

Creating The Scenes

With the different scenes determined, we were tasked with turning 2D illustrated assets from the show into exploratory, interactive environments. To do this, we used our internal toolkit, Hydra GUI, that allows our designers and developers to build each page visually and tweak elements such as shaders and layers using a tool sidebar panel.

In the toolkit, each section of the site was created as its own unique scene that was populated with different objects from the art as ‘layers’, very similar to how photoshop works. We then created a ‘2.5D’ effect by positioning the layers in z-space with a parallax effect to give the scene a 3D feel.

To bring it together, we created a scrolling structure that stacked pages under the opening garage scene. We also illustrated some supporting assets from scratch in the Rick and Morty art style (such walls and pipes) to ensure the user could scroll between scenes without a hard breaking point in the illustrations.

Bringing Scenes To Life

As well the 2.5D effect, we brought the scenes to life using a series of shaders that were implemented via Hydra GUI.

One shader we created used a glow effect that would animate on the 2D art to give it some life and depth. Creating this shader involved combining masks and painting on objects in an area.

Applying the shader gives 2D objects some dimensionality.

To make the screens in the basement less static, we used a combination of different effects made to resemble analog technology: visible refresh rate, scan lines, unstable brightness, warping at the edges and the occasional glitch. On top of that, the screens would also follow the mouse at different speeds to add another level of interactivity and playfulness.

A range of effects made the screens resemble analog technology.

Using Physics on Objects

Rather than just scroll up and down to explore the content, we wanted to encourage users to click around objects to see what they could find. The first moment of this is in the landing experience, where users can pick up and play with objects in Rick’s garage. To do this, we used a physics engine to place the objects and apply physics boundaries, giving 2D objects basic physics such as drag and push. We also added some chain physics so users can play with ropes hanging from the ceilings.

Users can pick up and play with objects in the scene.

The Portal Gun

Once we established that users would click around the experience, we hid an interactive easter egg to the scenes — a portal gun. By clicking the portal gun, users would enter a new mode that would equip a custom modeled 3D portal gun to transition them between different scenes in the universe.

Discover a portal gun triggers an ‘explore’ mode where users can discover art from the show.

To represent travel through the portal, we animated the destination world from the inside of the portal to full screen. The portal shader applies a sequence of blend modes, noise, twist and bulge that should look familiar to time-travelers. The gun shader itself uses fresnel shading to outline the transparent glass part and the energy core inside.

A final detail was to make the actual portal become visible on the sides as you made your browser window wider. This was an elegant fix to cropping the world assets while not breaking the immersion.

The Rick and Morty website is now live at https://www.rickandmorty.com/.