電影海報設計激發您的 PWA 英雄形象

已發表: 2022-03-10
快速總結↬您沒有太多時間來吸引訪問者對您的 PWA 的注意。 與其把時間浪費在過於擁擠的英雄形像上,或者更糟糕的是,用平淡無奇的設計讓他們失望,不如利用你在首屏的小空間來發揮創意。 最好的靈感來源之一? 電影海報。

上週末我訪問了 Fandango 網站,希望能找到一些可以讓我在有空調的電影院里呆上幾個小時的藉口。 這是我到達那裡時首先引起我注意的地方:

Fandango 主頁顯示一個帶有流行電影及其海報的滑塊
Fandango 主頁顯示一個帶有流行電影及其海報的滑塊。 (圖片來源:Fandango)(大預覽)

老實說,這些電影海報中的大多數完全沒有激勵我離開家。 除了具有如此醒目的調色板的《獅子王》《好萊塢往事》之外,它在排版方面做了一些很酷的事情。

以前有沒有其他人經歷過這種情況? 您有心情看電影,並且:

  • 瞥一眼您感興趣的電影海報,只是質疑它是否值得一看?
  • 瞥見一張你沒有多想的電影海報,然後改變了你的計劃,而是看到了那張海報?

而且我們甚至不在這裡談論電影預告片。 我們談論的是為宣傳一部電影並吸引人們觀看而設計的一張海報對你的認知有何影響。

如果你仔細想想,PWA 上的英雄形像對首次訪問者的影響力同樣巨大。

你只有幾秒鐘的時間給你的英雄形象留下深刻印象。 你想讓你的訪客感覺如何?

您的訪問者是否對他們將要找到的內容感到興奮? 還是因為第一張圖片引起的失望或困惑,他們會因此而憂心忡忡?

讓我們看一些好電影海報和壞電影海報的例子,看看我們可以使用哪些課程來幫助您設計 PWA 英雄:

跳躍後更多! 繼續往下看↓

1.盡可能避免庫存照片

在 PWA 的其他部分,從 Getty 或 iStock 等網站購買的高質量庫存照片可能就足夠了。 但是你的英雄形象呢?

我會說你應該非常小心,特別是如果使用易於識別的庫存照片。 即使這是一張吸引人的照片並且與品牌故事完美契合,你真的認為其他人的圖像屬於 PWA 的頂部嗎?

2018年海王問世時,他們發布了一系列電影海報來宣傳它。 然而,正是這張特別的海報在網上引起了軒然大波:

海王電影海報包括鯊魚的庫存照片
海王電影海報包括鯊魚的庫存照片。 (圖片來源:IMDB 上的“Aquaman”)(大預覽)

從本質上講,Twitter 上的投訴歸結為使用 Getty 的這張圖片:

推特用戶對海王電影海報一片嘩然
推特用戶對海王電影海報一片嘩然。 (圖片來源:Twitter)(大預覽)

現在,每當對超級英雄電影提出任何重大批評時,您都可以預料到會有爭論。 由於漫威電影和 DC 電影之間的陣營明顯劃分,當有人侮辱他們時,很難不想要捍衛你的超級英雄。 即使是因為鯊魚的庫存照片。

反對批評的人是有道理的。 這不像電影中真正的明星可以被活生生的鯊魚淹沒在水體中。 除了圖庫攝影或 CGI,海報設計師還有什麼選擇?

話雖如此,我認為真正的問題是,這是一部巨大的電影,工作室預算巨大,而且包含一張庫存照片會讓你懷疑他們是否在電影的其他任何地方偷工減料。

如果訪問者期望其背後的品牌提供端到端的優質體驗,那麼在主圖中使用可識別的庫存照片可能會向訪問者發送相同類型的信號。

2.讓它獨一無二

如果你和我一樣看電影,你一定會注意到電影海報的某些趨勢。 在 rom-com 類型中尤其如此,在這種類型中,設計師幾乎感覺不到原創或創意。

雖然電影海報的這種相似質量可以幫助某些類型的粉絲立即識別他們想要觀看的電影類型,但它也向他們發送了另一個信號。

如果你不知道尼古拉斯·斯帕克斯是誰,他是二十多本書的作者,其中大部分都有類似的情節。

我打算讓這個名利場電影海報彙編證明我的觀點:

《名利場》的一篇文章展示了尼古拉斯·斯帕克斯電影的各種封面
《名利場》的一篇文章展示了尼古拉斯·斯帕克斯電影的各種封面。 (圖片來源:名利場)(大預覽)

如果您要與某人談論其中一部電影,則可以概括為:

“你知道這部電影……一開始並不真正喜歡對方的男孩和女孩,但後來他們瘋狂地墜入愛河,無法忍受分開? 哦,是的,還有那個人最後死了。”

這描述了這些故事中大約 80% 的故事,這就是為什麼每個故事的電影海報看起來如此相似也就不足為奇了。

就像我說的那樣,如果他們試圖吸引非常特定的電影觀眾,那麼設計類似的海報可能對他們有利。 但它不適用於 PWA。

除非您正在構建 PWA 以直接補充另一個品牌,否則沒有理由將您的英雄形象設計成與其他人的形象相似。 當訪問者發現相似之處時,它只會引起混亂。 或者他們會想知道為什麼他們要費心查看 PWA,假設不僅僅是看起來相同的圖像,而且其中的服務和產品也是如此。

如果你想讓你的 PWA 脫穎而出,你的英雄形象應該是獨一無二的。

3. 在一件事上歸零

用全明星陣容製作電影的問題之一是不可能只關註一個人——不僅在情節中,在電影海報中也是如此。

恰當的例子:當您期待時會期待什麼:

期待時期待什麼的全明星陣容
當你期待時,你會期待什麼的全明星陣容。 (圖片來源:IMDB 上的“你期待什麼”)(大預覽)

如果我只是第一次偶然發現這張海報,我不知道從哪裡開始。

中間的標題有幫助,但競爭照片是壓倒性的。 另外,如果你仔細看上面的照片,你會發現每個女人都是單獨分層的。 為什麼要在電影中的實際鏡頭旁邊使用編輯不佳的照片? 它創造了一種非常脫節的體驗。

為了向您展示一個單一的焦點可以產生什麼不同,讓我們看一下 ET the Extra-Terrestrial 的電影海報:

E.T.的海報突出男孩和外星人之間的關係
ET 的海報突出了男孩和外星人之間的關係。 (圖片來源:IMDB 上的“ET the Extra-Terrestrial”)(大預覽)

這部電影並不是沒有偉大的明星陣容。 只是設計這個的團隊認識到電影的核心有一個真正的焦點,那就是 Elliott(男孩)和 ET(外星人)之間的關係。

我敦促你在設計你的英雄形象時尋找類似的東西——即使你的客戶來找你並說他們所有的服務都同樣重要,並且他們希望 PWA 證明他們可以為每個人做所有事情。 如果您嘗試將此類消息轉換為圖像,它將失敗。 所以,找到你的重點。

4.給城市一個微妙的點頭

電影可以在任意數量的設置中進行。 根據它是什麼類型的電影,你甚至可能會發現場景幾乎變成了故事中的一個角色。 讓我解釋。

理查德林克萊特與朱莉德爾比和伊桑霍克一起拍攝了電影三部曲。

第一部電影叫做《日出之前》,發生在德爾比和霍克決定在第二天早上分開之前下火車並在維也納市內散步時:

日出前的電影海報以維也納為背景
日出前的電影海報以維也納為背景。 (圖片來源:IMDB 上的“Before Sunrise”)(大預覽)

第二部電影叫做日落之前,它發生在巴黎市周圍:

日落前的電影海報以巴黎為背景
日落之前的電影海報以巴黎為背景。 (圖片來源:IMDB 上的“日落之前”)(大預覽)

最後一部電影叫做午夜之前,它發生在希臘:

午夜之前的電影海報以陽光明媚的希臘島嶼為背景
午夜之前的電影海報以陽光明媚的希臘島嶼為背景。 (圖片來源:IMDB 上的“午夜之前”)(大預覽)

在每張海報中,您都可以看到故事的背景在設計中發揮了重要作用。 那是因為沒有他們的地理環境就沒有故事。

它們不僅僅是關於兩個人互相交談的電影。 這是關於兩個人在探索一座新城市時相互了解的故事——這座城市幾乎變成了觀眾在整部電影中熟悉的第三個角色。

如果您正在為其設計的公司與特定地理區域有很強的聯繫,那麼看看您是否可以找到一種方法以某種方式將其合併到英雄形像中。 背景中的實際城市景觀不必如此明確。 但可能還有其他方法可以添加特殊的觸感,讓當地遊客認為,“嘿,我就是從那裡來的!” 或“我去過那裡!”

5.留白有創意

你已經知道留白是設計的重要組成部分,尤其是當你試圖在 PWA 上傳達重要信息時。 為了不讓訪客不知所措,你想讓事情變得簡單。 但這並不意味著您無法在如何填充空白空間方面發揮創造力。

以獨立日的海報為例:

獨立日海報用宇宙飛船填滿了它的空白
獨立日海報用宇宙飛船填充其空白區域。 (圖片來源:IMDB 上的“獨立日”)(大預覽)

雖然太空船確實傳達了一種恐懼感,但它也是一種非常有創意的方式來填滿所有原本會佔據這張照片頂部的空白空間。

另一個使用空白的有趣例子可以在 Scarface 的海報中看到:

Scarface電影海報設計師可能使用象徵主義來創造這個空白空間
Scarface電影海報設計師可能使用象徵主義來創造這個空白空間。 (圖片來源:IMDB 上的“Scarface”)(大預覽)

乍一看,你可能會認為它是一個引人注目的圖像。 然而,知道托尼·蒙塔納是販毒集團的頭目,並且對吸食可樂有下流的嗜好,吞噬他的白人在這裡有了另一個意義。

這個有點難以給你嚴格的指導,因為這一切都是關於你所擁有的空間的創造性。 不過,如果你想走這條路,我的建議是想辦法玩象徵主義,而不必在照片中明確展示它們。 如果你可以使用陰影、光線和空間來做到這一點,那將產生更大的影響。

6. 玩轉排版

在大多數情況下,電影海報的設計師在排版方面往往非常保守。 他們為字體選擇單一顏色,幾乎總是一個大塊的無襯線字體。

但為什麼不玩得開心一點呢? 就像您可以在圖像中註入創意一樣,只要兩者相輔相成,對文本做同樣的事情也不會是一個壞主意。

你會在約翰威克海報中找到一個很好的例子:

約翰威克電影海報排版具有獨特的優勢
約翰威克電影海報排版具有獨特的優勢。 (圖片來源:IMDB 上的“John Wick”)(大預覽)

如果您快速瀏覽圖像,您可能無法了解設計的微妙之處。 但他們在那裡。

對於初學者來說,槍管代替了字母“o”。 但是請注意邊緣是如何與其餘字母的顏色相同的? 乍一看,這就是幫助它很好地融合的原因。

然後,您會看到字母本身的精神錯亂的外觀,它們被分開並從中間傾斜。

對於那些沒有看過這部電影的人來說,這基本上就是基努·里維斯這個角色所發生的事情。 他曾經是一名刺客,但為了愛情放棄了。 當他的妻子死去,她最後的遺體被帶走時,他被撕裂了。 他會繼續一個正常人的生活嗎? 還是他放棄了一切,繼續殺戮橫衝直撞?

我知道設計英雄形象時最明智的做法是讓形象講述故事,但我認為對文本的細微觸動確實可以將其提升一個檔次。

包起來

那麼,我們在這裡學到了什麼? 好吧,設計電影海報和 PWA 肯定有正確和錯誤的方式。 但是,更重要的是,要做的最重要的事情是對您希望在最初幾秒鐘傳達給觀眾的內容進行一些真正的思考。

如果你未能捕捉到 PWA 的內容,或者你以一種無聊、非原創、模糊或俗氣的方式進行捕捉,你幾乎會立即失去他們的興趣。

但…

如果您可以完美地捕捉品牌的全部含義以及使其與眾不同的細微差別,您將鼓勵更多訪問者滾動並單擊單個圖像。

SmashingMag推薦閱讀

  • 漸進式 Web 應用程序的詳盡指南
  • PWA 會取代原生移動應用嗎?
  • 您可以通過移動應用程序或 PWA 賺更多的錢嗎?
  • Native 和 PWA:選擇,而不是挑戰者!