Bienal Fotografia do Porto 2021 Web Design

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

Home page do site da "Bienal 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

O projeto, colocado à PLANA, 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

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.

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

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.

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.

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.

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.

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.

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.

Exposição "Das Barracas Pode-se Ver a Cidade"

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

Desenvolvimento: 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

Bienal Fotografia do Porto 2021 Web Design

Interação Hero

Destaques

Call-to-action p/ galeria digital

Créditos

Contactos