observer
effect in building interface

Searching for a concept isn’t a mundane task, you can't just sit down and do it. Usually, all members of the team hop on a call and together we brainstorm multiple ideas. This time we did so as well. After discussing all the variants we got curious about the way modern art is very much dependent on the viewer.

My team usually prototypes complex interfaces, so it was our first time designing a portfolio for an artist. Naturally, we looked around for references…After looking at more than 30 website-portfolios of artists, artisans and art directors we’ve come up with a few rules for the site. This includes:

• Artworks should not be hidden behind frames and interface elements
  

• Visual of the website should not distract from the matter, rather it should be neutral
  

• Searching for collections and artworks should be be user-friendly
  

• Concept for the website should be built around the artist's manifesto
  

The foundation of the concept was built around this thought and the visual was found in physics.

Imagine there is a device that shoots particles (e.g. electrons or photons) through a screen with two slits. Behind this screen is a second screen that records where the particles have arrived. If you shoot particles without measuring which slits they fly through, they do not behave like balls on the back screen. Instead of two bands (expected if the particles were flying strictly through one or the other slit), there is an interference pattern — alternating light and dark bands. It looks as if the particles are behaving like waves, interacting with each other.

But if you put a detector to “see” through which slit each particle flies, the magic disappears. The particles begin to behave as separate “balls”, and only two stripes are visible on the screen — no interference patterns.

When we are not observing, it is as if the particles are in a state of superposition — they pass through both slits at the same time, like waves. And when we observe, the particles are “defined” and choose a specific path as particles.

This idea became the basis of the visual concept. We conveyed it with a hover effect: while the user is not interacting with the content on the site, he can see 5 columns in which “particles” move, but as soon as the cursor touches the picture, the particles line up in 2 lines.

While creating the structure of the site, it took us a long time to reach a decision on how the home page should look like. It is the screen that the user sees first. Is it right to place a photo of the author's main collection, or should there be a selection of the latest works? Both didn't seem to be the best solution, because the works are very diverse and are an experiment of different techniques. So it wouldn't be fair to let the user judge the author by the first thing they see.  So the idea of showing everything at once was born. Display all the most significant collections and give the user a choice of what they will look at first.

The home page represents a canvas where all artworks are displayed. There is no scrolling. It is unnecessary in this context. There are only buttons in the corners of the screen, which can help to reveal the structure of the site in more detail. Full portfolio, about the author and contacts.

And a long-standing dispute over which background looks better has led to the decision of allowing the viewer to choose their own backgrounds.

This project required extra work with custom code. While we don’t shy away from creating unique web experiences, Irina’s site presented a new kind of challenge for us. Since we came up with an idea of a double-slit experiment on the website, we had to implement it as well. This is partially because we pride ourselves on our ability to create a website from start to finish — from conceptualization to a fully functioning webpage.

We had to find a way to make the experiment work on a live website, not just in Figma. During our internal discussions it was established double-slit experiment should behave on the website in a certain way, with some rules, which are:

• There are 2 states: Focused and Relaxed.
  

• The Focused state is activated when the user hovers on the artwork, causing the atoms to collide into 2 columns.
  

• Regardless of the state, the atoms should always be moving and never static
  

The atoms themselves are particles, so we started thinking of plugins we can use. Initially, we looked into Particle.js (https://vincentgarreau.com/particles.js/), as it offered an easy-to-understand visualization and straightforward implementation. However, as a ready-made solution, it ended up lacking the flexibility to meet our first two rules. This led us to use GSAP, with this code by Rajat Kapoor being our founding block for atoms always moving. (https://webflow.com/made-in-webflow/website/gsap-particle-animation).

We divided the particle generation into columns, styled the atoms to our liking and then made them move based on the user’s cursor hovering over the artworks. Surprisingly, the final step — animating the columns for hover-in/hover-out interactions — was straightforward. We implemented it directly in Webflow, and it looked exactly as we intended.

The client specifically wanted the website to look good on mobile as well as on desktop. This meant that taking a few extra steps. For example, the mouse-move-over animation (which moves the artboard on the main page according to mouse movement) works perfectly on desktop, but was extremely glitchy on mobile. So we decided to use interact.js, which allowed us to set up a similar interaction on mobile. Here’s how it works:

• Drag-and-drop functionality with smooth stopping.
  

• Boundary constraints prevent dragging outside a defined area.
  

• Velocity-based motion provides a realistic and natural interaction.
  

Irina's works are a set of collections of different periods and styles. It was important to create the structure in a way that makes it easier for the user to find what they are looking for. By default, the works are shown clearly, and you can choose based on your visual preferences. But we also included the ability to search author's portfolio by title. For example, it's useful in those cases when the artist and his works are known from an article or catalog, where there is only the name. For such cases there is a tab where works are sorted by title with preview.

In her manifesto, Irina says that for her, art is about finding the unusual in the ordinary and the ordinary in the unusual. That's why we got involved in this project.

To experiment, to look for unusual solutions to common problems. This is what is sometimes lacking in the routine work of interface designers, where 90% of elements and behavioral patterns have been invented before you. We had fun, stretched our arms and made a cool site.