Electric knots are the core of this website’s design. A self-scrolling collection of them burns for the user who just arrived on the landing page, as if conditioned to disengage with an automated experience of the page scrolling itself to the bottom and shuffling through the collection of a set of words written by the artist. in~visible nonlinear de~composition de~form trans~formation de~stabilising trans~materialising corporeal literacy bodymindvoice spiral swirl movement expansion regeneration breath water softening sound resonance vibration waves listening micro~politics infra~structure audibility aliveness wildness vulnerability participation faillure glitch flaws error asymmetry dis~order relational crack gap contiguous inter~dependent shuffle for 7 seconds before the shuffling stops on a randomly picked word such as spiral. The background color bleeds from one shade of grey into another, as if the website travels to and from the light source. Both of the functions, self-scrolling and word shuffling, are synced and stop simultaneously. When the page becomes static, the user should move. They may click any knot to enter the website. When the desired knot is clicked, all the other ones fade out, as if making room for the user to remember the one they clicked.
Angelo and I liked thinking and talking about the knots during our conversations. Knots can create structured entanglements to serve as supporting systems and they can also create unresolvable traps. They require strategic a approach from their creators and participants. I am fascinated by their ability to contrast the rigid grids of websites when translated in the digital, while Angelo’s interest in knots conceptually relates to their interdisciplinary practice that combines sound, performance, video, and studies into crip theory. From the beginning of our collaboration, knots were the visual tool that contrasts the rigidity of the screen even; over time, they became a linguistic practice. Angelo and I had some knots to untangle while entangling new ones.
The leading question behind the website is: How to make the website less linear and more unstable within the system in which it operates? Answering this question was a philosophical endeavor as much as it was a digital experimentation which I started by making everything on the website dynamic and order-less. The navigation bar shuffled the order of items, the home button traveled across the page, we killed all chronology — to the point that the website, whose primary function should be to archive the artist’s works and make them readable, became an upsetting user experience. It upset its developer to the point of transforming disorientation into a floating UX experience.
The homepage, holding the artist’s business card, information about upcoming projects, and a giant electric knot that separates this past and future — contains three fixed and clickable black magnets to the sides of the screen. Hovering over each one will reveal a word and a pointer cursor, revealing where they go. While the left and right ones are side menus for artist’s Works and Publications, the top one is just a reminder saying u r here — a homepage is referring to itself.
The side menus are classic lists with differing styles. Publications that are external links open in new tabs, just so the user doesn’t leave the artist’s website. All internal links lead to project pages.
It’s time to mention my favorite challenge which was to establish and design the archiving logic. The artist’s interdisciplinary projects have extensive documentation containing video, sound, image, and script files. All are very important, but sometimes, some are more important than others. For example, for a project called Unknown Springs, sound is its top form. So how to design a project page that emphasizes this hierarchy without getting rid of the elements that are also a part of the project?
I asked Angelo to come up with written hierarchies by defining the importance of project files from top to least important. The following were defined:
sound~text~photos
sound~text~score
video~text~photos
video~text~photos~score
video~text~score
…each of which I turned into a template that shows the files in the same order that compiles their name. When you enter a video~text~photos project page, the video is the first file you see. By clicking the knot to the top right — which is a media switcher button, you’ll change from video to text to photos. With this design, I aimed to reduce the visual overload you’d normally experience on a page that reads its content from top to bottom, forever. The reading on Angelo’s project pages is rather horizontal. Although a lot of importance calculation was done for the projects’ visual appearance, their sounds were not neglected. In fact, they were prioritized. Videos and sounds, which appear first on the page, will continue playing even when the media has been changed to text or photos. When clicked, a user-friendly button at the bottom of the page will pause the sound coming from a sound or a video file. In the backend editor, Angelo only has to make sure that the files are added in the same order. Although the content stacks up vertically, the code shows it individually on the page. Should a project have no content hierarchy, a default template will stack up all files and turn the reading into a vertical experience.
I love this website and I loved making it! It behaves in a way that I don’t want to leave it. That’s why I integrated a script that accumulates knots randomly across the page when you open a new tab. It’s like a little, rewarding punishment.
Go back to the website