Two Dots Symbol

Bienale Fotografia do Porto 2021 Web Design

What's the goal of an event website in a middle of a pandemic?

"Bienale Fotografia do Porto 2021" site home page.
Client
Ci.CLO: Plataforma de Fotografia
URL
https://www.bienalfotografiaporto.pt
Input
Communicate the event through a website
Output
Design a website with a graphic identity already established

Introduction

Bienal de Fotografia do Porto is an event organized by CiCLO: Plataforma de Fotografia. The present Bienal theme “What happens with the world, happens with us”, suggests themes with ecological, political, social and cultural considerations and how they intertwine. The project consisted in solving the common needs of communication for an event of this scale, with specific conceptual and functional needs, while at the same time dealing with the physical restrictions associated with a time marked by the pandemic.

The project, placed to PLANA_DIGITAL, pretends to solve common conceptual and functional needs of communicating an event of this scale, while taking into account the physical restrictions associated with the COVID-19 pandemic.

Diagram with multiple page types of the website.
Sitemap

Experience

A significant amount of time of the project was dedicated to define the Bienal website consulting experience.
Conceptually the website is divided into two different objectives. One, more standard, has its focus on communicating the Bienal has an event with a physical and spatial component. The second has its focus on creating a parallel bienal that occurs on the web. For that, it was necessary the creation of a digitally native space for visiting the Bienal.


Graphic Language

The website visual language occurs through the translation of the visual identity of Bienal and of the concept that supports it. The green, has the main identity color, appears has a symbol for interactive components and has a form of creating identity evocative elements.

Multiple components of the website.
Website Components

The identity, designed by Joana Pestana, is bases on the conceptual relation between the idea of interdependence and the DDT compound. This compound (identified by Rachel Carson) was the first denunciation of chemical industry impact on climatic changes. The identity was based in the schematic drawing of the compound, being posteriorly combined with pictures of nature.

Joana Pestana Website

Composition of two vertical image with similar content and visual aspect.

To the left, a poster designed by Joana Pestana

To the right, the designed layout for the mobile website


Homepage

Many times the homepage is the first contact with the website. Assuming this, we can identify two objectives that need to be fulfilled. The first is to quickly contextualize the visitor about the Bienal proposal and positioning. This occurs with the presentation of the graphic identity and the expansion of it through interactions. The second expected result is to show a selection of interest points of the website that result in a summary of the Bienal offer.

Above the fold (first section) of the home page.

Hero Interaction

Inspired by the motto “What Happens to the World, Happens to Us”, an interaction that consisted in raising (with consent) webcam streams, placing them in the same space of the website.
This interaction, symbolically, represents the idea of a common space and the interconnections that are formed, creating a system.

First section after the fold, containing three call-to-actions.

Highlights

Two components were designed to support two different kinds of highlights.
To the left an event is highlighted and to the right a talk.

First section after the fold, containing three call-to-actions.

Digital gallery call-to-action

The highlight projected for the Digital Gallery is done through a component, consistent throughout the website.
This component has a considerable area given the characteristics of the Digital Gallery page.

Website loaded in a MacBook Pro 13".
An iPhone in a hand with the website loaded.

Event Catalog

Between talks, exhibitions, workshops and residencies the Bienal offers catalogue is considerably extensive.
A navigation that allows multiple experiences was thought. The user can navigate by a project grid, filtering events according to its needs, or navigate through Porto or Lisbon maps.

Two compositions (mobile and desktop version), side by side, of the catalog page.
Desktop and mobile version of the catalog page

It's possible, through a toggle, to alternate between a grid or a map navigation of the catalogue page.
Through the map navigation, the user can reach in equal manner, details about each exhibition and consequently access the detail page.

Events displayed in a grid
Events geographically visualized in a map

Event filtering can occur by typology or by a time interval.
The time interval filtering (in which a certain exhibition will happen) occurs through a calendar that allows the selection of two dates, initial and final, revealing all the exhibitions that occur on that period.


Detail Page

The detail page was considered the most probable destination for the website visitors. This page follows a model that allows multiple variations, accommodating a great variety of event typologies, simple exhibitions, complex exhibition (involving multiple exhibitions), workshops, talks and others.
A special focus was attributed to the photographic material.

Variations of the detail page

Photography, being the principal focus on the website, it's important to offer a visualization that allows a total absorption in them.
A toggle was integrated, allowing to change between a visualization of the page with its full content, or a visualization “with lights” off” that highlights photography on the page.


Digital Gallery

The Digital Gallery is the native space for certain Bienal exhibitions that occur digitally.
Facing with the audience limitations, the Bienal decided to migrate some of its exhibitions to a Digital Space.
Each page was thought in a singular manner. It's each exhibition that dictates the individual shape of the page and not a template that shapes the exhibition.

Flow of the digital gallery page
Default view
Extended view
"End of an Ear" exhibition
"Das Barracas Pode-se Ver a Cidade" Exhibition

Credits

Art Direction and Graphic Design
Joana Pestana
Development
Consipere