Bienal Fotografia do Porto 2023 Website

A website that extends to the whole experience of visiting and consulting the Bienal in Porto.

Client: Ci.CLO: Plataforma de Fotografia

URL: https://bienal23.bienalfotografiaporto.pt

Input: Communicating the Bienal online and assisting visitors with an informedand comfortable local experience.

Output: Website design and frontend development.

The Bienal's identity fulfills its full potential on the website. Elements like the hurricane and the logo are animated, more assertively communicating the underlying concepts.

As a tool, this website was designed to accommodate different types of use, thus serving as a guide for visiting the various exhibitions, as an activity planner, or as a repository of information on the various creations produced in the context of the Bienal.

Home page intro animation

The main page has two versions depending on the date of the device:
one before and during the Bienal, and one after the Bienal

The exhibition page serves as the nucleus for the Bienal's artistic proposal. This page works as an archive, being able to be navigated as a gallery (time) or as a map (space).

Exhibitions viewed by venue

Exhibitions viewed by time

Detail of the exhibition

This type of page summarizes the content of each activity.

Slideshow

Slideshow used to show a selection of photographs associated with the exhibition.

Related projects

There are exhibitions that bring together multiple projects, by the same or several artists. It was therefore necessary to create a detail page for each project and provide links to them in a gallery associated with the main exhibition.

Venue section

Each exhibition had a specific venue. This space has a detail page with logistical information that can be also accessed through the exhibition page.

Clicking on an image expands it, updating the composition of the gallery grid

During the course of the Bienal, multiple activities were organized. This page serves as an index of all activities, being possible to filter by different topics.

Navigating to the activity index page

Activity Detail

This type of page summarizes the content of each activity.

Application Form

In order to participate in each activity, a registration was required. An inline form allowed to streamline this process.

Related exhibitions

In most of the activities there was a association with one or more exhibitions. In order to contextualize the participant, we have created links to the detail page of each of these.

The “About” page describes the Bienal more generally, presenting the annual concept as well as more comprehensive content such as the list of partners or artists.

About page with the gallery of artists

Typography: Cambon by General Type Studio
Monument Grotesk by Dinamo Typefaces

Backend Development: Consipere

ssss oooosssss oooooooooo ssssss oooommmssss ssssssss ssss oooommmmmss oommmmoos mmmoooo oooooooosss oommmmoos mmmmmooss ooooooossss oooooooos mmmmmoooos oooooooooos mmmmmooooo ssss mmmmmoooos mmmmmmmmmmm ooosssssss sssssss mmmmmooooos oooooooosss ooommmmooo soosssss mmmmmooooos ooooooossss oooooocccc ssooossss mmmmmmoooo ooooooossss designssss ooooossss mmmmmmooooo ooooommmmmm oooooooddd ooooosssss mmmmmmoooo oooooommmmmms codeoooooo oooooossss mmmmmmmoooo ooooommmmmmms ooooooooooo ooooosssss mmmmmmmoooo ooommmmmmmm ommmmmmmmmo s————————s mmmmmmmooooo ooommmmmssss ommmmmmmmoo soooooosss mmmmmmooooo oooooossssss oosssssssss soooooooos mmmmmmmooooo ooooommmmsss oooosssssss ooosssssss mmmmmmmmmooo oooooommmmss ooooommmmms oooooooosss mmmmmmmoooo oooooommmmmm oooommmmmss oooooooooos mmmmmmmmoooo ooowessssss ooommmmmmms ooooooossss mmmmmmmmoooo oooossssssssssssssmmmmms oooooooosss mmmmmmmmmoooossssssssssssmmssssssssssssooooooooosss mmmmmmmooooooooossssssssoooooosssssssssssmmmmooooo mmmmooooooossssssssooommmmmmsssssmmmmmssssoooooos mmmmmmmmmmmmdesignmmmmmmsssssooooooosssssssssssss mmmmmmmmmmmmmmooooommmmmmmmoooooammmmaaaaaaaaaaas mmmmmmmooooommmmmmmm\mmmmmmoooommmmmmmmmmsssssss mmmmmmmmmmmmmmmmoooooooo\oooooommmmmmmmmmmssssss mmmmmmmmmmmmmmmmm/mmmmmandosssmmmmmmmmoooooosssss mmmmmmmmmsssssoooooosssssssssoooooommmmmmmmmoooos mmmmmmooooossssssssssmmmmmmmmmmmooooooooosssssssss mmmmmmmoooooo mmmmmmmmmoooooosssssssoooooommmmmmmmmssssssoooooos mmmmmmmmmooooommmmmmm mmmmmoooooooooossssssssooooooossmmmmcodeosssssssos mmmmmmmmmssssssooossoooom mmmmmoooooooooossssssoooooooooommmmmooooooooosssoos mmmmmmmmmooooooosssssssoooss mmmmmmmoooooossssssssmssssssmmmmoooommmmmmmssssssss mmmmmmmmoooooosssssoossssssssssoooooooooooossssssssssssssssoooooooosssssmmmmmossss mmmmmm/ooooooooossssoommmmsssssssssswessssssssssssooossssmmmmmmmmoooooooss mmmmmmmoooooooooossssssmmssssssssssssssssssssssssssooossssssssssssmmmmmsss mmmmmmoooooooossssssossssssssssssssssssssssssssssoossssssoooooooommmms mmmmmmmmoooooooosssoooooossssosssssssssssssssssoosssssssssoooooooos mmmmmmmooooooossssssssssdesignssssssssssssssssssossssoooooooooos mmmmmmmmmooooooosssssssssssssoooosssssssssossssossssmmmmmmmms mmmmmmmmmommmmmmmmsssssssssoooooooossssoosssooooooossoooos mmmmmommmmmmmmmmmmmmmmmooooooooosssssssssssooooooooooos mmmmmmmmmmmmmmmmmmmmmoooandmmmmmmoommmssssmmmmmmmmos mmmmmmmmmmmmmmmmmmommmmmmmmommmmmmooooommmmmmssss mmmmmmmmmmmommmmommmmmmommoooooooosssssssoooos mmmmmmmmmmmmmmommmommmmommmommmoooooooooooos mmmmmmmmmmmmmoommmomooomoooooocodeoooooooos mmmmmmmmmmmmmmmmmooooooooommmmmmmmmoooos mmmmmmmmmmmmmmoooooooooooooooommmmmmoos mmmmmmmmmmmmooooooooommmmmmmmoooooooos mmwemmmmmmmmmmmmmmmmmmmmmmooooommmoos mmmmmmmmmmmmmmmooooooooooooooooosssss mmmmmmmmmmmmmmmmooooooooooooooommoos mmmmmmmmmmmmmmmmooooooommmooooooooss desigmmmmmmmmmmmoooooooommoooosssss mmmmmmmmmoooooooommoooooosssssssssss mmmmmmmmmooooooommmmooooossssssssss mmmmmmmmooooandoooossssooooosssssss mmmmmmmmmmmooooooooomssssssssssssss