The Archive of Vibrant Matter

Rafael Gonçalves

rafaelgoncalves.pt is an url, name and username; it is a form of individual, collective and studio practice; it provides services, approaches and reflections on Websites and other Browser-based Artefacts.

This page is constructed on the belief that websites can propose multiple ways of reading, seeing and experiencing. Computational approaches to Design can also create kinds of hyper-narratives that unfold, develop and link to other places upon interaction. This webpage is a sort of scroll-based narrative of a contemporary design practice, it aims to question and explore how the medium can create opportunities for sense-making, brand-placing and shared artistic experiences. Content is divided in the following sections:

Individual and Collective Narratives
Cultural and Insitutional Online Presence
Brand-placing and Commercial Value
Archival and Participatory Dimensions
Web-based Artistic Practices
Collaborative Tools and Parametric Design Approaches
Computational Design Education
Adding to this collection of Websites (Contacts)

By associating projects and creating meaning through them, the current text you’re reading can be interpreted as a meta-website.

— A website of other multiple websites —

Block error: "Undefined variable $headingIndex" in block type: "heading"

One of the most common form of narratives we see through websites are the ones that showcase a particular view through the work of an individual or collective entity. Regularly named as portfolios, these websites propose ways of looking on different bodies of work such as Architecture, Photography, Art and in this case Web Design.

The work of Bruno Alves de Almeida is one to follow in the fields of Curatorship and Architecture. Designed by And Atelier, this website is introduced with a slideshow-like generative narrative, where groups of images and videos of Bruno’s work are selected and randomised in sequence and layout, giving the user a unique juxtaposition of images. The website’s Index lists projects, writings and institutions are displayed with visual connections between them and the year they were created, showcasing the contemporary and interdisciplinary dimensions present in his work.

Daniela Carneiro Lino is an artist, Yoga instructor and Vedic astrology practitioner. Her work and spiritual practices come from contemplation, observation and her exercise to understand the world we inhabit. After spending sometime meditating on this words and images, I’ve designed a website around the visual concepts of alignment. When landing on the website, images are randomly and loosely spread on each visit, navigating deeper on the website (to a project) two central axis (horizontal and vertical) guide the composition, proposing a focus of the users towards the center of the screen and, hopefully, themselves.

I can’t write about websites that showcase a body of work without the new website of Fala Atelier. Designed by And Atelier, the website explores the concept of archipelago, each project belongs to a bigger shared vision that is expressed here in almost obsessive form. With more than 8000 uploaded objects (photographs, drawings, plans, collages, etc.) it breaks the conventional boundary between project pages. Unique and never repeatable narratives are created, as every page is calculated based on image priorities, project hierarchies, lenses and tropes. Using an algorithm that we believe it already has its own consciousness, the extensive and laborious taxonomy of objects and its metadata provide different ways to look into fala’s work. Photographers, collaborators, lenses and tropes have unique pages that collect objects that are “gloriously repeating”.

Block error: "Undefined variable $headingIndex" in block type: "heading"

Similarly to individuals, institutions also aim to construct and disseminate views on the way they contribute to the society. These narratives usually expand to accommodate the importance of place, the networks and collective participation of stakeholders either in short or long periods of time.

I’ve had the pleasure to be part of the team behind the largest Design event in Portugal, the Porto Design Biennale. As a a designer/developer in 2019 and New Media Director in 2021, I was in charge for the design, development and maintenance of biennale’s website and respective web-based side projects. With the Art Direction of Inês Nepomuceno in 2019 and 1234 (Miguel Almeida, Irina Pereira, João Castro, Serafim Mendes) in 2021, designing a website meant managing large teams and opinions, partners, events with different typologies, and more, all of it on an digital interface using expressive visual identities to be used by many.

Produktive Bidstorung was a festival created to celebrate the 80^th Anniversary of Sigmar Polke, organised by Anna Polke Foundation. The website uses a scroll-based section structure that divides the festival in it’s different parts exposing texts and videos of the multiple conferences and iniciatives made during the festival. With the work from artists invited to participate in the festival, the website is filled with a contemporary homage to Sigmar Polke's work.

In Porto, Portugal, Espaço Ócio presents itself as a liquid and extensive network for artistic creation. Usually (but not only) featuring local artists, this space has moved from different locations always promoting different modes of curating around event-making and ways of practising leisure. Designed with Raquel Peixoto this simple webpage resumes the initiative, presents yearly events and shows ways locals can contribute to the Portuguese art scene, through Ócio.

Known worldwide, the Faculdade de Arquitectura da Universidade do Porto is one of the most important institutions in Architecture education. The research center CEAU wanted to update their institutional website not only with a visual re-design (beautifully done by Non-verbal Club), but also to add set of features that would facilitate research work, analysis and dissemination. Using the national platform for research curriculums, Ciencia Vitae, I’ve come up with the algorithms that collect the CV’s and respective outputs from all the researchers on the center, making available to the public through lists and statistics.

Reflecting on the importance of spaces, institutions and models where education happens, Classroom, a Teenage View is an exhibition curated by Joaquim Moreno, hosted in CCB, arc en rêve and Z33. With the visual identity designed by Thomas Spallek, the website collects all the information about the exhibition such as about, symposium, venues and a Publication.

In a project managed by Item Zero, I’ve had the chance to work for the Portuguese Supreme Court on a editorial project where academics, judges, magistrates and cultural authors congregate themes of law, citizenship, human rights and more. A Revista has a layout design based on the neo-classical architectural structure of the courts in Portugal. Based on the form of triangle, the header and title of the page, the composition of text, and the footer shape (visually and metaphorical) the classical structure of classical column.

Block error: "Undefined variable $headingIndex" in block type: "heading"

The society we live in today also demanded for different kinds of narratives with a transactional intent. With the aim to improve brand-placing these websites are designed and developed to seduce the visitors for particular qualities of objects, either material or immaterial. I’m glad that most of the projects I worked with in this area also carry a certain sense of unique creative expression.

Creme Climbing is the new big scene in climbing holds design and manufacturing. Designed together with Miguel Mesquita using photographs from João Monteiro, this website is a presentation of the first collection of climbing holds. These objects carry more than just the ideal characteristics of a dual-texture hold, they aim to exist on a gray zone between athletic performance and aesthetics. In 2 sets of colors the route-setters can create pleasing compositions, blurring climbing with choreographed-movements on a wooden wall.

“Things are not always as they seem” is the punchline of Softrock® and also the motto for how this website was designed. With the layout designed by Pedro Mata, this website starts by exploring this paradoxical materiality of these objects, a series of 3 softbody simulations of rocks falling are randomly selected upon each visit, creating a sense that every visit has a unique combination of textures colors and collisions similar to Softrock’s extensive catalogue of unique objects.

Block error: "Undefined variable $headingIndex" in block type: "heading"

Online Archives and Information Repositories, tend to present ways of navigating into complex data structures that are only possible by interactive media. Visualising, Searching, Filtering, Sorting and a combination of these modes of organisation help the preservation and expansion of the different body of knowledge we possess today.

The Archive of Vibrant Matter was an exhibition in Casa do Design within the context of Porto Design Biennale 2021. From the exhibition with the same nam, this digital archive was conceived with the idea that different participators can submit entries (matter) meticulously categorised and identified on pre-defined fields. All entries are verified, edited and perfected by the curatorial team by a necessary validation process.

An Archaeology of Utopia, is a project that aggregates multiple records during the period of SAAL, an important and revolutionary project in Portugal. This website, results from the project of Ana Catarina Costa, Francisco Ascensão, João Paupério and Maria Rebelo and was designed by Miguel Almeida and Irina Pereira. Together, we planned ways of organising information with multiple dimensions, listing, reading and viewing on a map. Each entry is filled with detailed with information about the location, service, technical team and more important data from the neighbourhood in question.

Block error: "Undefined variable $headingIndex" in block type: "heading"

Websites can also be, in themselves, places for artistic experiences. From internet art to participatory-media, web-based artworks have profoundly unique characteristics. They can be synchronous to multiple users and locations, allow for multiple forms of participation and interaction, warp or critique already existent online structures of power and oppression, create both individual, local or global experiences, and much more. I've been exploring both the potential visual expressions of this medium, but also, the meaning we can infer through them.

Éden X is a compelling example of the power of participatory media. Created by Joana Pestana and Mariana Pestana, this more-than-human digital assembly brings together participants from various disciplines – including architecture, biology, design, and philosophy – to engage in discussions on ecological issues. Contributions such as text messages, proposals, replies, votes, and reactions are gathered from a Discord chat and displayed on both a dedicated website (accessible globally) and a physical installation with TV screens (acessible locally). This multi-platform approach ensures broad accessibility, fostering reflection and dialogue for anyone with an internet connection.

Para-scapes is a project from Luisa Tormenta, it reflects on "[…] the autonomy of machines as image creators through a generative digital painting created with screenshots […]" as written by Luisa. A series of cctv cameras where collected and an algorithm in WebGL superimposes them with a generative threshold and pixel processing function. The result is "[…] an infinite painting to be generated live on a website."

Not necessarily a artwork in the browser, this website is part of a monograph of one of the most influential artists in this field. Color Code Communication, is an exhibition in Museum Folkwang of Rafaël Rozendaal's work featuring different artworks. Together with Thomas Spallek, I've develop a website that also works as a guide for the exhibition featuring information from each work, the artist and even an audio guide to follow from anywhere inside or outside the exhibition.

Block error: "Undefined variable $headingIndex" in block type: "heading"

One of the key characteristics of websites is that they're universal and have open access. Because they exist on a common layer to all of us, the browser, we can also explore this medium for shared and participatory tools for creating together. This tools can have both generative and algorithmic flavours, and can be built in a way that facilitate interaction and be used by multiple stakeholders, such as clients, designers and editors.

The first parametric tool I ever built was actually for Porto Design Biennale 2019, I quite didn't know what Parametric Design was back then. Together with Inês Nepomuceno, we decided to explore the potential of expression using variable typefaces (that were becoming more popular at the time). I've made an interface that randomly attributed a value to each letter creating an animation that could run infinitely, but also, be stopped, configured and exported in vector format at each step. This resulted in a dynamic visual identity with infinite combinations of logos with multiple outputs.

Prémio Paulo Cunha e Silva is an important prize for artists in Porto, it covers areas such as performance, installation, painting, sculpture and moving image. With Irina Pereira, the Art Director, we envisioned a dynamic visual identity that could result from co-creation with computers. I've built a Parametric Tool that uses an uploaded black and white image, to generate organic root-like forms that compose the empty space, and can be controlled in real-time.

With the knowledge I've been gathering in the areas of creative coding and Parametric Tools, I've decided to create short duration courses that can both introduce professionals and students to Creative Coding and Parametric Design and also focus more on creating tools for graphic design practice.

Block error: "Undefined variable $headingIndex" in block type: "heading"

I'm grateful for the opportunities I've had to share knowledge. In different settings and timespans, but mainly at ESAD Matosinhos, they've taken form of classes, lectures and workshops:

Short Courses & Workshops

Artistic Web Development: Exploring techniques for visual expression in the Browser, [PDBA 2023]
Approaches to Parametric Design in p5.js, [Processing Community Day FBAUP 2023]
Introduction to Creative Coding [ESAD, 2021–now]
Parametric Design in p5.js [ESAD, 2023–now]

Classes

Creative Coding for Design, [ESAD, 2024—now]
Web Development, [ESAD, 2020—now]
Interface Design, [ESAD, 2020—now]
Digital Media Design [ESAD, 2019—2024]
PG—IDD Digital Studio, [ESAD, 2020—2021]

I've been reflecting on the importance of Computational Thinking in the era of Artificial Intelligence. Since the invention of computers and use of command-line interfaces (CLI), we've gotten further away from the language computers speak at they're core. Knowing how to operate a computer (also to code), might become an endangered practice. If a few decades ago, we needed to write an instruction to start a software, play a game or edit the colours of our My Space profile, nowadays there's an human-like (graphical, gesture, voice…) interface for everything.

— We just ask and the computer answers —

I believe that artists, designers and other creators have the important role of unweaving, dismantle and question the fabric of the reality we live in. Since technology is today intertwined in it, and the way we produce images and symbols too, these multiple layers in the language of computers can provoke (in the future) the idea that this language is obscure and difficult to understand. In reality, I believe that it's just another human language that we can learn, explore and use, instead of submitting to.

My role as an educator is also to try to unweave that.

I'm enrolled in an PhD program in Computational Media Design at University of Coimbra, researching about this topics and more.

Block error: "Undefined variable $headingIndex" in block type: "heading"

I’ve had the pleasure to work with valuable institutions, brands and other clients such as:

This usually meant collaboration of close partners that take the role of designers, developers, managers, sometimes psycho-therapists, and most of times, good friends 🫂:

And Atelier, Andrew Howard, André Cruz, Diogo Matos, Diogo Vilar, Diogo Terremoto, Irina Pereira, Item Zero, Inês Nepomuceno, Joana Lourencinho Carneiro, Joana Pestana, João Castro, João Faria, João Monteiro, Luísa Tormenta, Mecha Studio, Miguel Mesquita, Pedro Mata Nogueira, Pedro Meireis, Non-verbal Club, Sérgio Couto, Serafim Mendes, Susana Martins, Studio Bruto, Raquel Peixoto, Thomas Spallek

(If I somehow forgot your name, it’s always good time to write me)

I want to address a paragraph on this website to Leo Mendes. Starting the collaboration with me since the beginning of 2024 on a full-time basis, Leo made made this practice change from solo to team. Some of the work here presented, but specially the work coming in the future, had either the help, the ideas or the dedicated and continuous work from both of us.

There's also a list of websites that I've made that I couldn't yet write about or organize within this chapters:

Assembleia Ordinária ^{w/ Raquel Peixoto}
Casa do Design
Fishing Arquitecture ^{w/ João Faria}
Graniparalelo ^{w/ Pedro Meireis}
Hall Design ^{design by Non-Verbal Club}
Hands on Type ^{w/ Pedro Meireis}
Helder Gonçalves ^{design by Non-Verbal Club}
Houselab & Houselab Tech ^{w/ Pedro Meireis}
Marques Almeida Foundation ^{w/ Diogo Matos, Raquel Peixoto}
Museu de Bolso ^{w/ Raquel Peixoto}
Narrativa Provável ^{w/ Raquel Peixoto}
Porto Design Summer School ^{w/ Andrew Howard, Pedro Meireis}
Projecto Orfeu ^{w/ Inês Nepomuceno, Pedro Meireis}
Studio Andrew Howard ^{w/ Andrew Howard, Pedro Meireis}
Secundino Queirós ^{w/ Pedro Meireis}

Block error: "Undefined variable $headingIndex" in block type: "heading"

The websites hereby presented are tailored to each project objectives and necessities, I don’t work with design templates. Projects usually go from a Conceptual approach, Design iteration and Development phase. This ensures that all visual concepts are possible to produce, and everything that is produced is in line with the concepts that we first started with. We try (as most possible) to built frontend experiences from scratch, no JS frameworks, no CSS libraries, no SPA's. Most websites are developed using the Kirby CMS, a content management system that allows for easy, stable and autonomous editing of content.

Fortunately, I’m always working on something, requests for designing or developing projects should come with a few weeks in advance. Most websites I’ve made took from 3 to 9 months to deliver (with some rare exceptions). Normally, I’m happy to hear about your project, but consider that making quotes, calendars and listing specifications requires effort. If you want me to produce a website, know that its quite an investment, not only of money, but also of time to produce/organize content; review/approve layouts and insert/edit content after launch.

We don’t have a defined ethics guideline for accepting projects, but if your project is clearly discriminatory, supports oppressive structures or advocates for far-right discourses, you’re on the wrong place. By the other hand, if your project is centred on inclusivity, social work, ecology, or other non-profit activities, I might be more flexible with my previous conditions 🤓

for work hello@rafaelgoncalves.pt
for teaching rafaelgoncalves@esad.pt

Go Back to Homepage

Web Development, 2021

Block error: "Undefined variable $headingIndex" in block type: "heading"