E se um website pudesse ser o vislumbre de um futuro de esperança? Pegar nos elementos soltos e ancorá-los numa mesma linha do horizonte, mesmo em escalas diferentes? O resultado: um conjunto de janelas geométricas que dão vida a fotografias e vídeos e que acentuam a importância das mensagens.
Imbuído no espírito da marca Estoril Conferences e do seu universo visual rico, desenhei um website com uma experiência gráfica muito forte e dinâmica. Todos os elementos surgem de forma animada, gerando no utilizador suspense e curiosidade.
Mais do que dispor e mostrar informação (que é importante, pois há que servir bem os utilizadores), procurou-se criar uma narrativa coerente com os valores, ambição e conceito da marca.
O website foi desenvolvido com recurso ao WordPress e ao Elementor — para mim, o mais poderoso e dinâmico construtor de páginas ao estilo WYSIWYG (What You See Is What You Get). Se procura uma ferramenta para criar websites visualmente muito ricos e sem quase constrangimentos criativos, esta é a minha recomendação.
No entanto, por mais dinâmicas e moldáveis que sejam estas ferramentas, há sempre limites aos quais temos de encontrar formas criativas de ultrapassar. Um deles foi como colocar uma máscara com transparência sobre alguns dos vídeos em loop (e não só — o mesmo efeito foi utilizado sobre imagens), como aparece abaixo.
Pode questionar-se sobre a razão de isto ter sido um problema, pois bastaria embeber essa máscara no próprio vídeo e exportá-lo. Eu não sou expert em vídeo e o que estava a acontecer era uma diferença no cinzento do vídeo que depois se notava quando inserido sobre o cinzento da página. Também não perdi muito tempo a tentar perceber porquê, mas desconfio que terá que ver com o Codec do vídeo, mas não cheguei a investigar.
(Tudo isto está a ser um bocadinho geek e por isso pode saltar para o final do e-mail! Não vou censurar por isso. Mas permita-me que continue, pois acho que a solução que encontrei é tão engenhosa, que tenho mesmo de partilhar! )
A solução que encontrei foi colocar a imagem da máscara por cima do vídeo. Porém, o problema estava em criar uma layer ou div por cima sem acesso ao HTML, recorrendo exclusivamente a CSS. O que fiz foi utilizar um pseudo-elemento. Um pseudo-elemento CSS é uma palavra-chave adicionada a um selector que permite aplicar conteúdo e estilos a uma parte específica do elemento selecionado. Confuso? Por exemplo, o pseudo-elemento ::first-line aplica o estilo apenas na primeira linha de um parágrafo. Desta forma, o primeiro parágrafo pode ter um design diferente dos seguintes.
Neste caso específico utilizei o pseudo-elemento ::before de forma a introduzir aí a imagem da máscara, jogando com um z-index superior à posição do vídeo. Como nestes casos é sempre mais fácil mostrar que descrever, criei este fiddle para que possa ver o código usado. Como poderá notar, em pouca linhas foi possível criar este efeito de máscara que funciona também sobre fotografias e que é ajustável ao tamanho do ecrã.
Outra particularidade do projeto são as animações dos vários conteúdos. Eu creio que as animações são mais do que um elemento estético; elas devem servir para aumentar a atenção do utilizador para o conteúdo, criando nele expectativa sobre o que virá a seguir. No caso particular deste website, as animações também têm um papel central ao acentuarem as propriedades da marca, como expansão, horizonte, ultrapassar barreiras, etc.
Mas melhor que palavras, será visitar o website. Partilhe comigo os seus comentários e ideias.
