Avesso

*

Online exhibition created for PhD Fine Arts students in Porto. The design was developed using Adobe XD, with Gatsby.js as the frontend and WordPress as the backend.

Story

In March 2020, during the height of the COVID-19 pandemic, a friend of mine, a Ph.D. student at the University of Arts in Porto, asked for my help in creating a website for an online exhibition. With live events no longer possible due to global restrictions, we were determined to bring the exhibition to a digital platform.

At that time, I was transitioning from my career as a full-time psychologist to a front-end developer. I had a basic understanding of HTML, CSS, and other web technologies, but I was missing an essential piece of the puzzle: Gatsby. Despite my limited experience, I was eager to step into this project as a way to deepen my skills and support my friend’s artistic vision.

As I delved into Gatsby, I quickly grasped its potential for creating fast and optimized static websites. Learning it from scratch was challenging, but it allowed me to build a website that not only showcased the art beautifully but also performed efficiently. My focus was on designing an intuitive user experience that could translate the essence of the physical exhibition into a digital format, ensuring visitors felt connected to the artwork even from a distance.

This project was more than just a technical challenge—it was a crash course in problem-solving, adapting to new tools, and communicating effectively with a non-technical team in English. It reinforced my passion for bringing creative ideas to life through code and solidified my decision to pursue web development as a career.

Process

01

Project Expectations:

We began by discussing the project’s goals and understanding the vision for the online exhibition. It was essential to align on what the final product should achieve, both in terms of user experience and design.

02

Setting the Main Points for the Design:

Based on the initial discussion, we identified the key design elements that would best represent the artwork and provide an intuitive user journey. This step involved brainstorming the look and feel that would reflect the essence of the exhibition.

03

First Design Draft:

With the core design principles in mind, I created the first draft of the website layout. The focus was on simplicity and accessibility, ensuring that even those unfamiliar with digital exhibitions could navigate easily and engage with the content.

04

Choosing the Technology:

Once the design was approved, it was time to choose the right technology. Despite my limited experience with Gatsby, I decided to use it for its powerful capabilities in building fast, optimized static websites. I dove into learning Gatsby from scratch, knowing it would allow me to create a seamless, responsive experience for users.

05

Making Everything Real:

With the design and technology in place, I turned the concept into reality. This phase was all about bringing the website to life—coding, testing, refining, and making sure every detail aligned with our vision. It was a challenging yet rewarding process that strengthened my technical skills and problem-solving abilities.

Challanges

The main challenge in that project was the technology, considering that my only approach to Gatsby on that time was on an online course at eduweb.pl. I had to learn while working on that website, but in just 3 weeks magic happened!

Artist page as showcase for works, as simple as possible