Two Dots Symbol

Bienale Fotografia do Porto 2021 Web Design

Qual o papel de um website de um evento durante uma pandemia?

Home page do site da "Bienale Fotografia do Porto 2021".
Cliente
Ci.CLO: Plataforma de Fotografia
URL
https://www.bienalfotografiaporto.pt
Input
Comunicar o evento através de um site
Output
Design de site com base na identidade gráfica pré-estabelecida

Introdução

O projeto, colocado à PLANA_DIGITAL, pretendia resolver as necessidades comuns de comunicar um evento desta escala, com as suas necessidades conceptuais e funcionais, ao mesmo tempo que seria acrescido uma preocupação relacionada com as restrições físicas associadas a uma época marcada pela pandemia da COVID-19.

Diagrama com as várias tipologias de páginas do website.
Mapa do site

Experiência

Uma parcela relevante do tempo do projeto foi dedicada a definir a experiência de consulta do website da bienal. Conceptualmente, o website divide-se em dois objetivos diferentes. Um, mais comum, tem como foco a comunicação da bienal como evento com uma componente física e espacial. O segundo tem como foco criar uma bienal paralela que se realizará na própria web, sendo para isso necessário criar um espaço de visita nativamente digital.


Linguagem Gráfica

A linguagem visual do website ocorre a partir da tradução da identidade visual da bienal e do conceito que a sustenta. A utilização do verde, como principal cor da identidade, surge tanto como símbolo de componentes interativos como para a criação elementos mais evocativos da marca.

Vários componentes do website.
Componentes do website

A identidade, desenhada por Joana Pestana, sustenta-se na relação conceptual entre a ideia de interdependência e o composto DDT.
Este composto (identificado por Rachel Carson) foi a primeira denúncia do impacto da indústria química nas alterações climáticas. A identidade foi sustentada no desenho esquemático do composto, sendo este posteriormente combinado com fotografias da natureza.

Joana Pestana Website

Composição com duas imagens verticais com conteúdo e aspecto semelhante.

À esquerda cartaz desenhado por Joana Pestana

À direita parte do layout para versão mobile do site


Página Principal

Sendo a página principal, muitas vezes, o primeiro contacto com o website, dois objetivos teriam de ser cumpridos. Em primeiro lugar, seria necessário rapidamente contextualizar o visitante sobre a proposta e posicionamento da bienal, tanto pela apresentação da identidade gráfica, como pela expansão da mesma através de interações. Em segundo lugar, o resultado esperado seria mostrar uma seleção de pontos de interesse do website que resultam num resumo da oferta da bienal.

Acima da dobra (primeira secção) da página principal.

Interação Hero

Inspirado pelo mote “O Que Acontece Com o Mundo, Acontece Connosco”, foi idealizada uma interação que consistia em angariar (com o devido consentimento) streams de diversas webcams, colocando-as no mesmo espaço do website.
Esta interação, simbolicamente, representa a ideia de espaço comum e das interligações que individualmente se encadeiam formando um sistema.

Primeira secção depois da dobra, onde contém três call-to-actions.

Destaques

Dois componentes foram desenhados para suportarem dois tipos de destaque distintos.
À esquerda é destacado um evento, e à direita, uma conversa.

Primeira secção depois da dobra, onde contém três call-to-actions.

Call-to-action p/ galeria digital

O destaque projetado para a Galeria Digital é feito a partir de um componente consistent ao longo do website.
Este componente possui uma dimensão considerável dado o cariz da página de Galeria Digital.

Website carregado num portátil MacBook Pro 13".
Um iPhone numa mão com o website carregado.

Catálogo de eventos

Entre conversas, exposições, oficinas e residências, o catálogo de oferta da Bienal de Fotografia é bastante extenso.
Foi pensada uma navegação que possibilita várias experiências diferentes. O utilizador pode navegar por uma grelha de projetos, filtrando eventos consoante as suas necessidades, ou então navegar a partir do mapa do Porto ou Lisboa.

Duas composições (versão mobile e desktop) lado a lado da página de catálogo.
Versão mobile e desktop da página de catálogo

É possível, a partir de um toggle, alterar a navegação do catálogo a partir de uma grelha de eventos ou de um mapa.
A partir da navegação pelo mapa, o utilizador pode obter, de igual modo, detalhes sobre cada exposição e consequentemente aceder à página de detalhe.

Visualização dos eventos através de uma grelha
Visualização do eventos a partir de um mapa

A filtragem de eventos poderá ocorrer por tipologia ou por um intervalo de tempo.
A filtragem por intervalo de tempo (em que uma determinada exposição irá decorrer) ocorre a partir de um calendário que permite a seleção de duas datas, inicial e final, revelando todas as exposições que ocorrem nesse período.


Página de Detalhe

A página de detalhe foi considerada como o mais provável destino dos visitantes do website. Esta página segue um modelo que se presta a variações, que acomodam uma variedade grande de tipologias de eventos, exposições simples, exposições complexas (que envolvem várias exposições), oficinas, conversas entre outros.
Foi dada primazia nesta página ao material fotográfico, relativo a cada evento.

Variações da página de detalhe

Sendo a fotografia o principal foco do website é importante oferecer uma visualização que permite uma total absorção nas mesmas.
Um toggle foi integrado, permitindo cambiar entre uma visualização da página com todo o seu conteúdo, ou uma visualização “com luzes desligadas” que evidencia as fotografias da página.


Galeria Digital

A galeria digital é o espaço nativo de certas exposições da bienal, que ocorram digitalmente. Face às forçosas limitações de público a bienal decidiu migrar para um espaço digital algumas das suas exposições.
Pensou-se cada página de forma singular, ou seja é cada exposição a ditar a forma individual de cada página e não um template a ditar a forma da exposição.

Flow de página da galeria digital
Visualização pré-definida
Visualização com informação revelada
Exposição "End of an Ear"
Exposição "Das Barracas Pode-se Ver a Cidade"

Créditos

Direção Artística e Design Gráfico
Joana Pestana
Desenvolvimento
Consipere