I met Ortésia in 2019 during a Saas-Fee summer school in Berlin. I haven’t seen them since, until that one day in May, when they popped into my inbox to ask if I wanted to build their portfolio website. From June until October 2023, we’ve been meeting regularly (every two weeks) to develop ortesia.online. I’m going to give this website a ‘cold’ review here — a style I discovered while being a student in MA Aesthetics & Politics at the California Institute of the Arts.
When you enter the homepage for the first time, and if your connection is slow, you may experience a glitch of sorts — a slow loading of the technologies that the website is using, specifically Vue.js. I’ve been busy learning this framework in parallel to developing websites this summer. I love that the slow loading is the welcoming effect, a split split split second in which the user, if familiar with this framework, will immediately know that I’m coding with vue.js. Ortésia’s website is the first one in which I integrated this framework.
Once Vue.js is loaded fully, and all text becomes understandable, the homepage appears almost empty. Only a few details demand the user’s attention. The most noticeable one is the dropped-down left menu, the list of Works (11). It is open by default, but the - sign next to it indicates that the user can close the list if more silence is needed prior to exploring the full website. Obviously, I programmed this because the first thing I want the users to do is interact with Ortésia’s projects.
Before we do, let’s analyze other details that are given in this initial encounter of the homepage:
Since I feel like the website wants me to dive into the projects archive, I decide to click on a project called extincióFest (2017/2022). The page scrolls down fast to the project which contains a slideshow, a title at the top right of it, and a project description underneath. I click the left and right triangles on the side of the image to browse through the slideshow images. The orange gradient shadow, previously at the bottom of the page, is now on top of the page, leading me to scroll up and down the archive of projects. After doing so, I realize that its function is to be a visual division between each project.
The archive is a long scroll that the user can shorten by clicking the projects from the Works menu. There are all kinds of image files, including screenshots of sound files and zoom calls.
Halfway through exploring the full archive of projects, I click on the third circle in the group of seven circles on top of the page. The background of the website turns dark grey, while the divisions between projects remain orange. The pills at the bottom of the page become squared and turn red, except for the one saying mode: raw, which turned blue. I guess we are in the raw mode right now. Everything is squared and I feel like I’m browsing through the 90s web. Video game aesthetics. My eyes want out. So, I click on the sixth dot and enter a bb blue mode of the website. It is more friendly, but the light blue is too distracting for reading the text. My eyes want out again. So I click on the 7th dot of the website, which makes the background color of the website white and triggers a very long pill to pop up above the 7 fixed pills. In it, it’s written: type the preferred color of the background. In the input area next to it, I type in blue. The background color of the page changes to royal blue, my favorite. Definitely not the best color choice for a reading experience, leading me to go back to the the default mode (light).
None of the circles change the structure of the website changes, only the colors. When talking about and developing this interaction, Ortésia and I were trying to think of the several modes of user experience in which the user would feel like they’re creating interventions on the interface — an abstract translation of social organizing and performative interventions that are found in Ortésia’s projects.
It was challenging because we were struggling to find a fine balance between making users feel like they are active on the website and solely playing on it. We didn’t want to rely on traditional ways to do this, which would be to allow users to change the structure of the grid in which the archive is presented, or allow them to change everything with the help of an Accessibility widget, or have their cursor leave a path behind.
Allowing the users to change the color of the background seemed to be the balance we were looking for. Thanks to Vue.js, I learned how to code this function. The given ones are mine and Ortésia’s favorite ones, but probably not everyone’s.
This website reflects Ortésia’s affinity for colors, and my struggle to pick / compose a good combination.