Diseños de carteles de películas para inspirar tus imágenes de héroes de PWA

Publicado: 2022-03-10
Resumen rápido ↬ No tienes mucho tiempo para captar la atención de los visitantes de tu PWA. En lugar de perder ese tiempo con una imagen de héroe abarrotada o, peor aún, decepcionarlos con un diseño mediocre, sea creativo con el poco espacio que tiene en la parte superior de la página. ¿Una de las mejores fuentes de inspiración para esto? carteles de cine.

Visité el sitio web de Fandango el fin de semana pasado, con la esperanza de encontrar algo que me diera una excusa para pasar un par de horas dentro de una sala de cine con aire acondicionado. Esto fue lo primero que me llamó la atención cuando llegué allí:

La página de inicio de Fandango muestra un control deslizante con películas populares y sus carteles.
La página de inicio de Fandango muestra un control deslizante con películas populares y sus carteles. (Crédito de la imagen: Fandango) (Vista previa grande)

Para ser honesto, la mayoría de estos carteles de películas no hicieron absolutamente nada para motivarme a salir de casa. Excepto El Rey León, que tiene una paleta de colores tan llamativa, y Érase una vez en Hollywood, que hace algunas cosas geniales con la tipografía.

¿Alguien más ha experimentado esto antes? Tienes ganas de ver una película y:

  • Eche un vistazo al póster de la película que le interesaba, solo para preguntarse si vale la pena verlo o no.
  • ¿Echar un vistazo a un póster de película en el que no habías pensado mucho, pero luego cambiaste tu plan y viste ese en su lugar?

Y ni siquiera estamos hablando de avances de películas aquí. Estamos hablando de lo que un solo cartel diseñado para promocionar una película y atraer a la gente a verla puede hacer con su percepción de la misma.

Si lo piensa, la imagen del héroe en un PWA tiene tanta influencia sobre un visitante por primera vez.

Tienes solo unos segundos para impresionar con tu imagen de héroe. ¿Cómo quieres que el tuyo haga sentir a los visitantes?

¿Tus visitantes avanzan a través de la PWA con entusiasmo por lo que están a punto de encontrar? ¿O lo hacen con aprensión por la decepción o la confusión que les provoca la primera imagen?

Veamos algunos ejemplos de carteles de películas buenos y malos y veamos qué tipo de lecciones podemos usar para ayudarlo con su diseño de héroe de PWA:

¡Más después del salto! Continúe leyendo a continuación ↓

1. Evita las fotos de archivo cuando puedas

En otras partes de una PWA, las fotos de archivo de alta calidad compradas en sitios como Getty o iStock pueden ser suficientes. ¿Pero tu imagen de héroe?

Diría que debe tener mucho cuidado con esto, especialmente si usa una foto de archivo que sea fácilmente reconocible. Incluso si es una foto atractiva y se alinea perfectamente con la historia de la marca, ¿realmente crees que las imágenes de otra persona pertenecen a la parte superior de la PWA?

Cuando salió Aquaman en 2018, lanzaron una serie de carteles de películas para promocionarlo. Sin embargo, fue este póster en particular el que causó un gran revuelo en línea:

El póster de la película Aquaman incluye fotos de stock de tiburones
El póster de la película Aquaman incluye fotos de archivo de tiburones. (Crédito de la imagen: “Aquaman” en IMDB) (Vista previa grande)

Esencialmente, las quejas en Twitter se redujeron al uso de esta foto de archivo de Getty:

Los usuarios de Twitter estaban alborotados por el póster de la película Aquaman
Los usuarios de Twitter estaban alborotados por el póster de la película Aquaman. (Crédito de la imagen: Twitter) (Vista previa grande)

Ahora, puede esperar que haya discusiones cada vez que se haga una crítica importante de una película de superhéroes. Con campamentos claramente divididos entre las películas de Marvel y DC, es un poco difícil no querer defender a tus superhéroes con uñas y dientes cuando alguien los insulta. Incluso si es por una foto de archivo de un tiburón.

Sin embargo, la gente en contra de las críticas tiene un punto. No es como si las verdaderas estrellas de la película pudieran sumergirse en un cuerpo de agua con tiburones vivos. Aparte de la fotografía de archivo o CGI, ¿qué otra opción tenían realmente los diseñadores de carteles?

Dicho esto, creo que el verdadero problema es que esta es una película enorme con un gran presupuesto de estudio, y la inclusión de una foto de archivo hace que te preguntes si cortaron esquinas en algún otro lugar de la película.

El uso de fotos de archivo reconocibles en una imagen principal puede enviar el mismo tipo de señal a los visitantes si esperan una experiencia premium de extremo a extremo de la marca detrás de ella.

2. Hazlo único

Si ve tantas películas como yo, seguramente notará ciertas tendencias en lo que respecta a los carteles de películas. Esto es especialmente cierto en el género de las comedias románticas, donde casi parece que los diseñadores no se molestan en ser originales o creativos.

Si bien esta calidad similar de los carteles de películas puede ayudar a los fanáticos de ciertos géneros a identificar instantáneamente los tipos de películas que quieren ver, también les envía otra señal.

Si no sabes quién es Nicholas Sparks, es autor de más de veinte libros, la mayoría de los cuales tienen tramas similares.

Voy a dejar que esta compilación de carteles de películas de Vanity Fair demuestre mi punto:

Un artículo de Vanity Fair muestra varias portadas de películas de Nicholas Sparks
Un artículo de Vanity Fair muestra varias portadas de películas de Nicholas Sparks. (Crédito de la imagen: Vanity Fair) (Vista previa grande)

Si tuviera que hablar con alguien sobre una de estas películas, podría resumirse así:

“¿Conoces la película… La del chico y la chica que no se gustan mucho al principio, pero luego se enamoran locamente y no soportan estar separados? Ah, sí, y está esa persona que muere al final”.

Eso describe alrededor del 80% de estas historias, por lo que no es tan sorprendente que los carteles de las películas de cada uno se vean tan similares.

Como dije, un póster diseñado de manera similar podría funcionar a su favor si estuvieran tratando de atraer a un subconjunto muy específico de cinéfilos. Pero no funciona así con las PWA.

A menos que esté creando una PWA para complementar directamente otra marca, no hay razón para diseñar su imagen de héroe para que se parezca a la de los demás. Solo causará confusión cuando los visitantes se den cuenta de las similitudes. O se preguntarán por qué se molestan en mirar la PWA, suponiendo que no son solo las imágenes las que tienen el mismo aspecto, sino también los servicios y productos que contiene.

Si desea que su PWA se destaque entre la multitud, su imagen de héroe debe ser única.

3. Concéntrate en una cosa

Uno de los problemas de hacer una película con un elenco de estrellas es que es imposible concentrarse en una sola persona, no solo dentro de la trama, sino también en el póster de la película.

Caso en cuestión: Qué esperar cuando estás esperando:

El elenco estelar de What to Expect When You're Expecting
El elenco estelar de What to Expect When You're Expecting. (Crédito de la imagen: "Qué esperar cuando estás esperando" en IMDB) (Vista previa grande)

Si me estuviera tropezando con este póster por primera vez, no sabría por dónde empezar.

El título en el medio ayuda, pero las fotos de la competencia son abrumadoras. Además, si miras de cerca la foto superior, verás que cada una de las mujeres se superpuso individualmente en la imagen. ¿Por qué usar una foto mal compilada junto a una toma real de la película? Crea una experiencia muy inconexa.

Para mostrarle la diferencia que puede hacer un enfoque singular, veamos el póster de la película ET el extraterrestre:

El cartel de E.T. destaca la relación entre el niño y el extraterrestre
El póster de ET destaca la relación entre el niño y el extraterrestre. (Crédito de la imagen: "ET the Extra-Terrestrial" en IMDB) (Vista previa grande)

No es que esta película no tenga un gran elenco de estrellas. Es solo que el equipo que diseñó esto reconoció que hay un enfoque real en el corazón de la película y es la relación entre Elliott (el niño) y ET (el extraterrestre).

Le insto a que busque algo similar cuando diseñe su imagen de héroe, incluso si sus clientes acuden a usted y le dicen que todos sus servicios son igualmente importantes y quieren que la PWA demuestre que pueden hacer todo por todos. Si intenta traducir ese tipo de mensaje en una imagen, fallará. Entonces, encuentra tu enfoque.

4. Dale a la ciudad un guiño sutil

Las películas pueden tener lugar en cualquier número de escenarios. Dependiendo del tipo de película que sea, es posible que incluso descubras que el escenario casi se convierte en un personaje dentro de la historia. Dejame explicar.

Richard Linklater filmó una trilogía de películas con Julie Delpy y Ethan Hawke.

La primera película se llama Before Sunrise y tiene lugar cuando Delpy y Hawke deciden bajarse de un tren y caminar por la ciudad de Viena antes de partir a la mañana siguiente:

El póster de la película Antes del amanecer muestra Viena de fondo
El póster de la película Antes del amanecer presenta a Viena de fondo. (Crédito de la imagen: "Antes del amanecer" en IMDB) (Vista previa grande)

La segunda película se llama Before Sunset y tiene lugar en la ciudad de París:

El póster de la película Before Sunset muestra a París de fondo
El póster de la película Before Sunset presenta a París de fondo. (Crédito de la imagen: "Antes del atardecer" en IMDB) (Vista previa grande)

La película final se llama Before Midnight y tiene lugar en Grecia:

El póster de la película Before Midnight presenta una soleada isla griega de fondo
El póster de la película Before Midnight presenta una soleada isla griega de fondo. (Crédito de la imagen: "Before Midnight" en IMDB) (Vista previa grande)

En cada uno de estos carteles, puede ver que el telón de fondo de la historia juega un papel importante en el diseño. Y eso es porque realmente no hay historia sin su entorno geográfico.

No son solo películas sobre dos personas hablando entre sí. Se trata de dos personas que se conocen mientras exploran una nueva ciudad, una ciudad que casi se convierte en un tercer personaje con el que el espectador se familiariza a lo largo de las películas.

Si la empresa para la que está diseñando tiene un fuerte vínculo con una región geográfica específica, vea si puede encontrar una manera de incorporarla a la imagen del héroe de alguna manera. No tiene que ser tan explícito con el paisaje urbano real en el fondo. Pero puede haber otras formas de agregar un toque especial que haga que los visitantes locales piensen: "¡Oye, de ahí soy yo!" o "¡He estado allí!"

5. Sea creativo con el espacio en blanco

Ya sabe que el espacio en blanco es una parte importante del diseño, especialmente cuando intenta transmitir un gran mensaje en la parte superior de la página en un PWA. Para no abrumar a los visitantes, debe mantener las cosas simples. Pero eso no significa que no puedas ser creativo con la forma en que llenas ese espacio en blanco.

Tomemos, por ejemplo, el cartel del Día de la Independencia:

El cartel del Día de la Independencia llena su espacio en blanco con una nave espacial
El cartel del Día de la Independencia llena su espacio en blanco con una nave espacial. (Crédito de la imagen: "Día de la Independencia" en IMDB) (Vista previa grande)

Aunque la nave espacial transmite una sensación de temor, también es una forma muy creativa de llenar todo el espacio en blanco que de otro modo ocuparía la parte superior de esta foto.

Otro ejemplo divertido de jugar con espacios en blanco se puede ver en el póster de Scarface:

Los diseñadores de carteles de la película Scarface probablemente usaron simbolismo para crear este espacio en blanco
Los diseñadores de carteles de la película Scarface probablemente usaron simbolismo para crear este espacio en blanco. (Crédito de la imagen: "Scarface" en IMDB) (Vista previa grande)

A primera vista, podría tomar esto por la imagen llamativa que es. Sin embargo, sabiendo que Tony Montana es el jefe de un cartel de la droga y tiene una inclinación obscena por inhalar coca, el blanco que lo consume adquiere aquí otro significado.

Es un poco difícil darle una guía estricta sobre este, ya que se trata de ser creativo con el espacio que tiene. Sin embargo, lo que sugeriría si quieres seguir este camino es pensar en formas de jugar con el simbolismo sin tener que presentarlo explícitamente dentro de la foto. Si puedes jugar con las sombras, la luz y el espacio para hacerlo, eso tendría un impacto mucho mayor.

6. Juega con la tipografía

En su mayor parte, los diseñadores de carteles de películas tienden a ser muy conservadores en lo que respecta a la tipografía. Eligen un solo color para la fuente y casi siempre es una fuente sans serif con bloques grandes.

Pero, ¿por qué no divertirse un poco con él? Así como puedes imbuir la imagen con florituras creativas, no sería tan mala idea hacer lo mismo con el texto, siempre que los dos se complementen entre sí.

Encontrarás un hermoso ejemplo de esto en el póster de John Wick:

La tipografía del póster de la película John Wick tiene un toque único
La tipografía del póster de la película John Wick tiene un toque único. (Crédito de la imagen: “John Wick” en IMDB) (Vista previa grande)

Si echara un vistazo rápido a la imagen, es posible que no se dé cuenta de las sutilezas del diseño. Pero están ahí.

Para empezar, el cañón del arma ocupa el lugar de la letra “o”. Pero, ¿observa cómo el borde está teñido del mismo color que el resto de las letras? Esto es lo que ayuda a que se mezcle tan bien a primera vista.

Luego, tienes el aspecto desquiciado de las letras mismas, donde están divididas e inclinadas por la mitad.

Para aquellos de ustedes que no han visto la película, esto es esencialmente lo que le está pasando al personaje de Keanu Reeves. Una vez fue un asesino, pero lo abandonó por amor. Cuando su esposa muere y le quitan los últimos restos de ella, se siente desgarrado. ¿Continúa la vida de un hombre normal? ¿O se da por vencido y emprende un alboroto asesino?

Sé que lo más inteligente que se puede hacer al diseñar una imagen de héroe es dejar que la imagen cuente la historia, pero creo que los toques sutiles en el texto realmente pueden mejorarlo.

Terminando

¿Entonces que hemos aprendido aquí? Bueno, ciertamente hay una forma correcta e incorrecta de diseñar un póster de película y PWA. Pero, más que eso, lo más importante que debe hacer es pensar bien en lo que quiere que esos primeros segundos transmitan a sus espectadores.

Si no capta de qué se trata la PWA o lo hace de una manera aburrida, poco original, vaga o cursi, perderá su interés casi de inmediato.

Pero…

Si puede capturar perfectamente de qué se trata una marca junto con los sutiles matices que la hacen especial, alentará a más visitantes a desplazarse y hacer clic con una sola imagen.

Lectura recomendada en SmashingMag:

  • Una guía extensa para aplicaciones web progresivas
  • ¿Las PWA reemplazarán las aplicaciones móviles nativas?
  • ¿Se puede ganar más dinero con una aplicación móvil o una PWA?
  • Native y PWA: ¡Opciones, no retadores!