nonplace.site is a browser-based project that grows over time.
It began with a simple idea of hosting a little digital space open for all unexpected encounters, where a sense of familiarity is curated to all visitors yet yields no clear ownership or identity.
In 2023, I developed this idea into a website as my graduate degree thesis project, embedded with more contextual research, specifically, digital memory and hybrid belongingness. No one seems to be the sole owner behind the homogenized interface, whereas the parallel of a personal space and a nameless perspective fills the gap with our own experience, rendering a soft and blank canvas that merges us into collective memories.
nonplace.site was an online pavilion as part of The Wrong Biennale, on view from November 1, 2023 to March 1, 2024. Taking this opportunity, nonplace.site has been adapted into a collective space that showcases various forms of digital work by different individuals, which actualizes its fundamental concept that merges the public and the personal. I'm grateful to all the supports that I am fortunate to receive along the way, especially, my co-curator and dear friend Yan Shao, all the artists and friends who participated in the exhibition, and undoubtedly, The Wrong Biennale.
You can read an interview of me about this project here.
Website landing page
The website is fully developed by me individually, using Javascript, HTML and CSS.
I used Node.js for server-side scripting and Express.js as a backend framework to pass data.
I also used EJS (Embedded Javascript templates) to keep the interface coherent to better mimicking the familiar yet uncanny file system interface of folders.
Tools
Tools
Interaction
Interaction
Because the concept revolves around the macOS file system interface, the visual components necessitate technical craftsmanship to closely mimic the reference rather than a graphic redesign.
At this point, my initial design prioritizes the interactive element to create a sense of uncanniness emerging from the familiar interface, and to blur the boundary between a web browser and a folder window.
Restriction
I utilized restriction as a primary method to blur the distinction between online and local windows. By restricting the browser window's resizability and implementing a "open as new window" mechanism for page redirection, I aim to mimic the appearance of default folder windows, typically smaller than regular browser windows.
This approach ensures that the UI features within the window are determined by the browser, often featuring only an address bar, therefore removing the typical context of a browser window.
window.resizeTo(setW, setH); // resizes the window upon opened
window.addEventListener('resize', ()=>{ window.resizeTo(1000, 700)});
// auto resize to the fixed size if the user tries resizing the window
Pathname
Without the default browser window interface, I have the freedom to create a custom interface resembling a folder window. This approach involves three parts:
1. Utilize Express routing to customize the URL address, resembling a folder's pathname.
2. Name each window using the local file format with the ".fileformat" suffix.
3. Dynamically display the "file name" of the selected "file" in the simulated folder window bar (created using CSS) on the inner page.
Pages of nonplace.site
Explorability
Another key element in approaching uncanniness is to balance between intrigue and the unexpected. Therefore, I've created features that encourage visitors to explore while maintaining intuitive affordance—ensuring it's not too far off to decrease their interest and curiosity.
One feature includes an infinite scroll on the landing page, where continuous scrolling reveals more folders with random names, recalling the disorienting feeling of revisiting a dated folder with various out-of-context names.
To maintain website affordance, I keep all 7 hyperlink file icons remain visible on landing, ensuring visitors won't get lost despite the random positions of the files with each web page load.
Landing page of nonplace.site
I also incorporated a popup window feature inspired by early net.art, resembling local system popup alerts rather than malicious ads. Clicking on a non-hyperlinked icon triggers a popup window with an image indicating that the file is damaged. This mechanism serves two purposes:
1. Ensure every icon is interactive, maintaining a visitor's intuitive experience and encouraging them to keep exploring.
2. Aligning with the concept of nonplace.site and memory anchors, it creates a scenario with a subtle emotional undertone. Some files display low-res previews as residues, symbolizing the loss of contact with past memories when encountering a "damaged file," reflecting the theme of inaccessible memories from the digital anchors.
Demonstration of the popup window mechanism
Finally, on the credit page, instead of mimicking a real folder, I took the opposite approach. I utilized a 2D Canvas element to illustrate the cursor trace, where the stroke consists of icons representing all participating artists. Given the colorful and diverse personalities captured in these icons, combined with the automatically triggered interaction, the visual creates an appealing and engaging effect.
Demonstration of the credit page interaction
Final Look
Final Look
A little walk through of the website
As part of the open call process and the promotional phase for the exhibition, I also designed posters that complement the visual style of the website.
Exhibition poster >
Open call poster >
