Designs de pôsteres de filmes para inspirar suas imagens de herói do PWA

Publicados: 2022-03-10
Resumo rápido ↬ Você não tem muito tempo para capturar a atenção dos visitantes do seu PWA. Em vez de perder esse tempo com uma imagem de herói superlotada ou, pior ainda, decepcioná-los com um design sem brilho, seja criativo com o pouco espaço que você tem acima da dobra. Uma das melhores fontes de inspiração para isso? Cartazes de filmes.

Visitei o site do Fandango no último final de semana, esperando encontrar algo que me desse uma desculpa para passar algumas horas dentro de um cinema com ar condicionado. Isto é o que me chamou a atenção quando cheguei lá:

A página inicial do Fandango mostra um controle deslizante com filmes populares e seus pôsteres
A página inicial do Fandango mostra um controle deslizante com filmes populares e seus pôsteres. (Crédito da imagem: Fandango) (Visualização grande)

Para ser honesto, a maioria desses pôsteres de filmes não fez absolutamente nada para me motivar a sair de casa. Exceto por O Rei Leão, que tem uma paleta de cores tão marcante, e Era uma vez em Hollywood, que faz umas coisas legais com tipografia.

Alguém mais já experimentou isso antes? Você está com vontade de assistir a um filme e:

  • Dê uma olhada no pôster do filme em que você estava interessado, apenas para questionar se vale a pena assistir ou não?
  • Vislumbrou um pôster de filme no qual você não tinha pensado muito, mas depois mudou seu plano e viu aquele em vez disso?

E nem estamos falando de trailers de filmes aqui. Estamos falando sobre o que um único pôster projetado para promover um filme e atrair as pessoas para assisti-lo pode fazer com sua percepção dele.

Se você pensar bem, a imagem do herói em um PWA tem tanta influência sobre um visitante de primeira viagem.

Você tem apenas alguns segundos para impressionar com sua imagem de herói. Como você quer que o seu faça os visitantes se sentirem?

Seus visitantes prosseguem pelo PWA com entusiasmo sobre o que estão prestes a encontrar? Ou o fazem com apreensão devido à decepção ou confusão causada pela primeira imagem?

Vejamos alguns exemplos de pôsteres de filmes bons e ruins e veja que tipo de lições podemos usar para ajudá-lo com o design do seu herói PWA:

Mais depois do salto! Continue lendo abaixo ↓

1. Evite Stock Photos quando puder

Em outras partes de um PWA, fotos de alta qualidade compradas em sites como Getty ou iStock podem ser suficientes. Mas sua imagem de herói?

Eu diria que você deve ter muito cuidado com isso, especialmente se estiver usando uma foto facilmente reconhecível. Mesmo que seja uma foto atraente e se alinhe perfeitamente com a história da marca, você realmente acha que as imagens de outra pessoa pertencem ao topo do PWA?

Quando Aquaman foi lançado em 2018, eles lançaram uma série de pôsteres de filmes para promovê-lo. No entanto, foi esse pôster em particular que causou um grande alvoroço online:

O pôster do filme Aquaman inclui fotos de tubarões
O pôster do filme Aquaman inclui fotos de tubarões. (Crédito da imagem: “Aquaman” no IMDB) (Visualização grande)

Essencialmente, as reclamações no Twitter se resumiam ao uso desta foto do Getty:

Usuários do Twitter estavam em alvoroço com o pôster do filme Aquaman
Os usuários do Twitter estavam em alvoroço com o pôster do filme Aquaman. (Crédito da imagem: Twitter) (Visualização grande)

Agora, você pode esperar que haja discussões sempre que qualquer crítica importante for feita a um filme de super-herói. Com campos claramente divididos entre os filmes da Marvel e da DC, é meio difícil não querer defender seus super-heróis com unhas e dentes quando alguém os insulta. Mesmo que seja por causa de uma foto de um tubarão.

As pessoas contra as críticas têm razão. Não é como se as verdadeiras estrelas do filme pudessem ser submersas em um corpo de água com tubarões vivos. Além de fotografia ou CGI, que escolha os designers de pôsteres realmente tinham?

Dito isso, acho que o verdadeiro problema é que este é um grande filme com um enorme orçamento de estúdio, e a inclusão de uma foto de banco de imagens faz você se perguntar se eles cortam cantos em qualquer outro lugar do filme.

O uso de fotos reconhecíveis em uma imagem de herói pode enviar o mesmo tipo de sinal aos visitantes se eles esperam uma experiência premium de ponta a ponta da marca por trás dela.

2. Torne-o único

Se você assiste a tantos filmes quanto eu, você notará certas tendências quando se trata de pôsteres de filmes. Isso é especialmente verdade no gênero rom-com, onde quase parece que os designers não se preocupam em ser originais ou criativos.

Embora essa qualidade semelhante de pôsteres de filmes possa ajudar os fãs de certos gêneros a identificar instantaneamente os tipos de filmes que desejam assistir, ela também envia outro sinal para eles.

Se você não sabe quem é Nicholas Sparks, ele é autor de mais de vinte livros, a maioria com enredos semelhantes.

Vou deixar esta compilação de pôsteres de filmes da Vanity Fair demonstrar meu ponto de vista:

Artigo da Vanity Fair mostra várias capas de filmes de Nicholas Sparks
Um artigo da Vanity Fair mostra várias capas de filmes de Nicholas Sparks. (Crédito da imagem: Vanity Fair) (Visualização grande)

Se você fosse falar com alguém sobre um desses filmes, poderia ser resumido como:

“Você conhece o filme… Aquele com o menino e a menina que não gostam muito um do outro no começo, mas depois se apaixonam loucamente e não suportam ficar separados? Ah sim e tem aquela pessoa que morre no final.”

Isso descreve cerca de 80% dessas histórias, e é por isso que não é tão surpreendente que os pôsteres de cada filme sejam tão semelhantes.

Como eu disse, um pôster com design semelhante poderia funcionar a seu favor se eles estivessem tentando atrair um subconjunto muito específico de espectadores. Mas não funciona assim com PWAs.

A menos que você esteja construindo um PWA para complementar diretamente outra marca, não há razão para projetar sua imagem de herói para se parecer com a de qualquer outra pessoa. Isso só causará confusão quando os visitantes perceberem as semelhanças. Ou eles vão se perguntar por que estão se preocupando em olhar para o PWA, supondo que não são apenas as imagens que parecem iguais, mas também os serviços e produtos dentro deles.

Se você deseja que seu PWA se destaque da multidão, sua imagem de herói deve ser única.

3. Concentre-se em uma coisa

Um dos problemas de fazer um filme com um elenco de estrelas é que é impossível focar em apenas uma pessoa – não apenas dentro do enredo, mas também no pôster do filme.

Caso em questão: O que esperar quando você está esperando:

O elenco de estrelas de O Que Esperar Quando Você Está Esperando
O elenco de estrelas de O Que Esperar Quando Você Está Esperando. (Crédito da imagem: “O que esperar quando você está esperando” no IMDB) (visualização grande)

Se eu estivesse tropeçando neste pôster pela primeira vez, não saberia por onde começar.

O título estar no meio ajuda, mas as fotos concorrentes são esmagadoras. Além disso, se você olhar atentamente para a foto de cima, verá que cada uma das mulheres foi colocada individualmente em camadas na foto. Por que usar uma foto mal compilada ao lado de uma foto real do filme? Isso cria uma experiência muito desconexa.

Para mostrar a diferença que um foco singular pode fazer, vejamos o pôster do filme ET, o Extraterrestre:

O pôster de E.T. destaca a relação entre o menino e o alienígena
O pôster de ET destaca a relação entre o menino e o alienígena. (Crédito da imagem: “ET the Extra-Terrestrial” no IMDB) (Visualização grande)

Não é como se este filme não tivesse um grande elenco de estrelas. É só que a equipe que projetou isso reconheceu que há um foco real no coração do filme e é a relação entre Elliott (o menino) e ET (o alienígena).

Eu recomendo que você procure algo semelhante ao projetar sua imagem de herói - mesmo que seus clientes venham até você e digam que todos os seus serviços são igualmente importantes e eles querem que o PWA demonstre que podem fazer tudo para todos. Se você tentar traduzir esse tipo de mensagem em uma imagem, vai falhar. Então, encontre o seu foco.

4. Dê um aceno sutil para a cidade

Os filmes podem ocorrer em qualquer número de configurações. Dependendo do tipo de filme, você pode até achar que o cenário quase se torna um personagem dentro da história. Deixe-me explicar.

Richard Linklater filmou uma trilogia de filmes com Julie Delpy e Ethan Hawke.

O primeiro filme se chama Before Sunrise e se passa quando Delpy e Hawke decidem descer de um trem e passear pela cidade de Viena antes de partirem na manhã seguinte:

O pôster do filme Before Sunrise apresenta Viena ao fundo
O pôster do filme Before Sunrise apresenta Viena ao fundo. (Crédito da imagem: “Before Sunrise” no IMDB) (Visualização grande)

O segundo filme chama-se Before Sunset e se passa na cidade de Paris:

O pôster do filme Before Sunset apresenta Paris ao fundo
O pôster do filme Before Sunset apresenta Paris ao fundo. (Crédito da imagem: “Before Sunset” no IMDB) (Visualização grande)

O filme final chama-se Before Midnight e se passa na Grécia:

O pôster do filme Before Midnight apresenta uma ensolarada ilha grega ao fundo
O pôster do filme Before Midnight apresenta uma ensolarada ilha grega ao fundo. (Crédito da imagem: “Before Midnight” no IMDB) (Visualização grande)

Em cada um desses pôsteres, você pode ver que o pano de fundo da história influencia fortemente o design. E isso porque realmente não há história sem seu entorno geográfico.

Não são apenas filmes sobre duas pessoas conversando. É sobre duas pessoas se conhecendo enquanto exploram uma nova cidade – uma cidade que quase se torna como um terceiro personagem que o espectador conhece ao longo dos filmes.

Se a empresa para a qual você está projetando tem um forte vínculo com uma região geográfica específica, veja se você pode encontrar uma maneira de incorporá-la à imagem do herói de alguma forma. Não precisa ser tão explícito com a paisagem urbana real ao fundo. Mas pode haver outras maneiras de adicionar um toque especial que faça os visitantes locais pensarem: “Ei, é de onde eu sou!” ou "Eu estive lá!"

5. Seja criativo com espaço em branco

Você já sabe que o espaço em branco é uma parte importante do design, especialmente quando você está tentando transmitir uma grande mensagem acima da dobra em um PWA. Para não sobrecarregar os visitantes, você quer manter as coisas simples. Mas isso não significa que você não pode ser criativo com a forma como você preenche esse espaço em branco.

Veja, por exemplo, o cartaz do Dia da Independência:

O pôster do Dia da Independência preenche seu espaço em branco com uma nave espacial
O pôster do Dia da Independência preenche seu espaço em branco com uma nave espacial. (Crédito da imagem: “Independence Day” no IMDB) (Visualização grande)

Embora a nave espacial transmita uma sensação de pavor, também é uma maneira muito criativa de preencher todo o espaço em branco que de outra forma ocuparia o topo desta foto.

Outro exemplo divertido de brincar com espaço em branco pode ser visto no pôster de Scarface:

Os designers de pôsteres do filme Scarface provavelmente usaram simbolismo para criar esse espaço em branco
Os designers de pôsteres do filme Scarface provavelmente usaram simbolismo para criar esse espaço em branco. (Crédito da imagem: “Scarface” no IMDB) (Visualização grande)

À primeira vista, você pode considerar isso apenas pela imagem impressionante que é. No entanto, sabendo que Tony Montana é o chefe de um cartel de drogas e tem uma inclinação obscena para cheirar cocaína, o branco que o consome ganha outro significado aqui.

Este é um pouco difícil de fornecer orientação estrita, pois trata-se de ser criativo com o espaço que você tem. O que eu sugiro se você quiser seguir esse caminho, no entanto, é pensar em maneiras de brincar com o simbolismo sem ter que apresentá-los explicitamente na foto. Se você puder brincar com sombras, luz e espaço para fazer isso, isso teria um impacto muito maior.

6. Divirta-se com a tipografia

Na maioria das vezes, os designers de pôsteres de filmes tendem a ser muito conservadores quando se trata de tipografia. Eles escolhem uma única cor para a fonte e quase sempre é uma fonte grande sem serifa.

Mas por que não se divertir um pouco com isso? Assim como você pode imbuir a imagem com floreios criativos, não seria uma má ideia fazer o mesmo com o texto, desde que os dois se complementem.

Você encontrará um belo exemplo disso no pôster de John Wick:

A tipografia do pôster do filme John Wick tem uma vantagem única
A tipografia do pôster do filme John Wick tem uma vantagem única. (Crédito da imagem: “John Wick” no IMDB) (Visualização grande)

Se você olhasse rapidamente para a imagem, talvez não percebesse as sutilezas do design. Mas eles estão lá.

Para começar, o cano da arma substitui a letra “o”. Mas observe como a borda é tingida da mesma cor que o resto das letras? Isso é o que ajuda a misturar tão bem à primeira vista.

Então, você tem a aparência desequilibrada das próprias letras, onde elas são divididas e inclinadas no meio.

Para aqueles que não viram o filme, isso é essencialmente o que está acontecendo com o personagem de Keanu Reeves. Ele já foi um assassino, mas desistiu por amor. Quando sua esposa morre e os últimos restos dela são tirados dele, ele está dividido. Ele continua a vida de um homem normal? Ou ele desiste de tudo e vai em uma fúria assassina?

Eu sei que a coisa mais inteligente a se fazer ao projetar uma imagem de herói é deixar a imagem contar a história, mas acho que toques sutis no texto podem realmente aumentar o nível.

Empacotando

Então, o que aprendemos aqui? Bem, certamente há uma maneira certa e errada de projetar um pôster de filme e um PWA. Mas, mais do que isso, a coisa mais importante a fazer é pensar de verdade no que você quer que esses primeiros segundos transmitam aos seus espectadores.

Se você não conseguir capturar o que é o PWA ou fizer isso de uma maneira chata, sem originalidade, vaga ou brega, você perderá o interesse deles quase que imediatamente.

Mas…

Se você puder capturar perfeitamente o que é uma marca, juntamente com as nuances sutis que a tornam especial, você incentivará mais visitantes a rolar e clicar com uma única imagem.

Leitura recomendada no SmashingMag:

  • Um guia abrangente para aplicativos da Web progressivos
  • Os PWAs substituirão os aplicativos móveis nativos?
  • Você pode ganhar mais dinheiro com um aplicativo móvel ou um PWA?
  • Nativo e PWA: escolhas, não desafiadores!