Playing with Masterpieces

Parallax Magritte (2013)

As a digital product designer, I have a strong tendency of trying to make things more useful and efficient. So it was reasonable that I decided to make a useful info graphic website for my first major project in graduate school. However, during the process of researching for the project, I discovered the Javascript Parallax Engine called Parallax.js, and that totally changed the direction of my project. It gave me the Parallax Magritte idea, and I instantly decided to abandon the info graphic project that I was working on, and tried to make something that could be useless, yet it's fun to make.

Inspired by the Technology

There's nothing new about parallax technology on the web; it's rather unnecessarily used too much. Nevertheless, what makes Parallax.js different from many other similar plugins is that it works almost perfectly on the mobile devices with the gyroscope sensors. Moreover, the plugin was simple and easy enough for the newbie developers like me to use.

      <ul id="scene" data-limit-x="28" data-limit-y="22">
        <li class="layer" data-depth="0.05"><img src="golconda/06.jpg"></li>
        <li class="layer" data-depth="0.25"><img src="golconda/05.png"></li>
        <li class="layer" data-depth="0.40"><img src="golconda/04.png"></li>
        <li class="layer" data-depth="0.50"><img src="golconda/03.png"></li>
        <li class="layer" data-depth="0.80"><img src="golconda/02.png"></li>
        <li class="layer" data-depth="0.90"><img src="golconda/01.png"></li>

The code above is pretty much everything I need to make the images feel like in 3D space.

Why Magritte?

I came up with the Parallax Magritte idea when I discovered Parallax.js, probably because Rene Magritte is one of my favourite artists. His work is always thought-provoking, and I think he liked to distort the space to make the illusion. He once said, "Everything we see hides another thing, we always want to see what is hidden by what we see." I thought that phrase could be the starting point of my project.

To demonstrate the parallax effect well, the more depth, the better. In that sense, Magritte's works are perfect for my approach, especially Golconda, one of his most popular works, which has a perfect structure to apply the parallax engine, and that's why I started working with Golconda.

Taking the Masterpiece Apart

After I came up with the idea, the rest of the project was pretty straightforward, although some parts were a bit time-consuming. To build a 3D space from a plane painting, first I needed to separate each layer of the painting by using Photoshop. The tricky part of this step was filling the empty spots by copying-and-pasting from another similar part of the painting. Some layers of the painting needed to be expanded so they could have some extra space to show when the image is moving.

Making the separated images into a 3D space using Parallax.js was mostly about sizing and positioning the each layer with CSS, so that each painting could demonstrate the best parallax effect within given boundaries.

The value of depth or sensitivity of the layers were given differently depending on the structure of the image, or particular purpose. For example, The layer contains the head image in The Pilgrim has much higher sensitivity value than the other layers because I wanted this to be able to move a lot, so people can tilt their smart devices to fit the head part with the body part. On the contrary, for the famous painting The Son of Man, I gave a very low sensitivity value to the green apple layer, so it could always stay in the face area. Although I had to draw a little bit of the face part, I didn't want to ruin the mysterious feeling that had when I first saw this painting.

Height-Based Media Queries

Parallax.js reacts to the orientation of a smart device, or to the mouse cursor when it's running on a desktop. If I had to choose one of those two options, I'd definitely choose the former. The smart device part was the core of this project, so the responsive web design was also crucial. But if there's one difference with this project and ordinary web site projects in designing responsive layout, the contents in this project are fixed size paintings that the height of the content will never increase. Moreover, half of the paintings are in portrait orientation, so I had to use not just width-based media queries, but also height-based.

      /* Height-based Media Queries */

      @mixin respond-to($media) {
        @if $media == handhelds {
          @media only screen and (max-width: 480px)
          { @content; }
        @else if $media == medium-screens {
          @media only screen and (max-width: 768px) and (max-height: 768px)
          { @content; }
        @else if $media == large-screens {
          @media only screen and (min-width: 900px) and (min-height: 900px)
          { @content; }

Actually, I never used height-based media queries before, so I thought it wouldn't work properly. But it just worked perfectly, same as the width-based.

Redesigning based on the feedbacks

The concept of the first version of the Parallax Magritte website was an "Online Museum," so I focused more on the visual concept than convenience or users' paths. I made it impossible to jump from one work to another because I wanted users to stay longer on each work, and tried to make each artwork feel like it is in a separated room.

It didn't take me long to realise that I forgot the basics of UX design. Users don't behave in the way that I want them to. I treated this project like a different type from the other productive website, so I approached accordingly, but for the users it's just one of so many websites, they don't care about my purpose. I looked up the visiting data from Google Analytics, and realised that so many people just leave even before seeing the first painting. I decided to redesign the website into a simpler structure and focused on the contents, not the concept of the website. The feedback from my friends and classmates was better than before.

Designers can't design a user experience; we can only design for a better user experience. When it comes to designing a digital product, thinking like an artist certainly doesn't help, regardless of the concept or purpose of the producer. The focus should always be on the user, not the product itself.