視覺保質期——為什麼網頁設計插圖會過時

已發表: 2022-03-11

插圖是一種充滿活力和多樣化的視覺交流形式。 作為一門設計學科,它融合了平面設計的信息清晰度和美術的表達能力。 在巔峰時期,插圖做了一些攝影無法做到的事情。 它從人眼無法企及的角度描繪了熟悉的事物。

最近大量使用在線插圖的品牌是長期以來網絡上發生的最好的事情之一。 它為一系列商業主張帶來了活力、幽默和清晰,並使公司能夠更清楚地講述他們的故事。

網頁設計插圖
插圖以熟悉和意想不到的方式描繪了世界(Emaar EMR 應用程序)。

儘管有積極的一面,但也存在問題。 從本質上講,插圖是一種講故事的工具,但隨著其受歡迎程度的提高,它轉向了強制性。 我們有一個網站,所以我們必須有插圖

由於缺乏戰略眼光,插圖是裝飾,是獨創性的對立面。 故事被拋棄,想像力被拋棄。 個別網站失去了區別,所有圖示的產品和服務都融合在一起。

一位衣著光鮮的員工坐在整潔的辦公桌前,操作著一個與現實世界融為一體的抽象界面,文字和電子郵件在紙飛機上飛馳而過,紙飛機降落在一隻貓身上,在一棵綠葉植物旁邊打盹,一個人一邊喝康普茶一邊做瑜伽,一邊瀏覽應用程序中出現了一隻巨大的手,它與一支超大的鋼筆簽訂了合同

你肯定見過。

有四個罪魁禍首威脅著網絡插圖的長期生存能力。


罪魁禍首1:意象缺乏智慧

起源

插圖有著豐富的煽動歷史。 數百年來,它一直被用作一種社會評論形式。 為什麼? 因為它尖銳地闡明了人類事務的複雜性。 當人們自相矛盾時,當經歷令人困惑時,插圖讓一切變得顯而易見——在瞬間。

插圖的目的不是為了爭論本身。 相反,目標是讓人們停下來思考一個觀點,即使它與他們自己的觀點相衝突。 在最好的情況下,插圖是終極的 aha 時刻。

問題

今天對視覺內容的需求已經剝奪了當代網絡插圖的大部分闡釋能力。 網上,插畫很少煽動; 大多數情況下,它指導或修飾。

在許多網站上,插圖是與之配對的文本的一對一視覺表示。 試試我們獨特的日程安排功能! [插入日曆的單行插圖]

或者,由於購買的產品和服務,他們描繪了人們過著“最好的生活”的場景。 試試我們獨特的日程安排功能! [插入一個喝咖啡的筆記本電腦傢伙擊掌笑臉日曆的插圖]

這兩種方法都不足以防止網站插圖失去講故事的招搖。

補救措施

有些概念很難說明。 有些產品和服務並不令人興奮,也不容易與人類體驗相關聯。 在這裡,插畫師在概念創作過程中必須深入挖掘。 要發現一個主題最引人注目的角度,請探索它的陰暗面。

  • 最大的痛點是什麼,它們為什麼存在?
  • 誰在經濟、職業或情感上受到的影響最大?
  • 公司、客戶或專家之間是否存在衝突或有爭議的觀點?

此類問題適用於大多數在線銷售的商品。 作為插畫家,我們經常負責展示好的一面,但如果我們不了解壞的一面,我們就會去尋找疲憊的比喻。 事實上,這種正負平衡是講故事的一個關鍵方面。 沒有低點,說明性的高點就會失去影響。

幹得好:大卡特爾

網頁設計插圖
Big Cartel 的博客插圖幽默詼諧,就像這幅強調數字結賬及時性的三聯畫一樣。


罪魁禍首2:猖獗的模仿破壞了新奇

起源

模仿和創造力並不是截然相反的。 自從世界上最早的文明出現以來,藝術家和設計師就通過模仿來培養創造力。 引人注目的風格引人注目。 我們檢查它,解構它,並收集它的技術來增強我們自己的工作。 這就是成長。

在一個完美的世界裡,模仿將僅限於學習和評論。 複製的樣式將在視覺和概念上發生變化。 它很少以這種方式工作。

問題

模仿拒絕進化。 當我們遇到一種流行的風格並依附於它的軌道時,我們就像舊世界的學徒,有著陰險的轉折。 我們濫用我們“追隨”的插畫家的風格屬性,並將結果宣傳為我們自己的。

品牌是同謀。 X 公司想要 Y 公司的插畫風格,所以他們委託製作了仿製品。 它一遍又一遍地發生,一個站點接一個站點,每次迭代都會引入新的熵層。 最終,整個行業都採用了一系列退化的克隆,例如Multiplicity中的 Michael Keaton。

只需看看 SaaS 領域的主要插圖風格。 很尷尬的同質化。

補救措施

模仿之外的路數不勝數。 沒有一個需要創造性天才或排除外部靈感。 恰恰相反; 插圖畫家需要充分接觸參考資料。 我們看到和儲存的越多,我們就越能重新解釋。 可以進行許多探索性練習:

  • 歷史混搭。 通過成功藝術家的眼光重新構想鼓舞人心的插圖風格。
  • 快速重繪。 在參考其他插畫家的風格的同時仔細繪製一個對象。 然後,在沒有參考樣式的情況下快速重繪同一個對象 7-10 次,並接受出現的怪癖。
  • 添加規則。 創建一個影響插圖過程的約束。 例如:我只能畫直線。 它們可以是任何長度或角度,但它們必須是直的。
  • 工具開關。 使用不適合該工作的繪圖工具模仿插圖風格。 例如,如果樣式依賴於精確的線條,請用墨水和軟毛刷複製它。
  • 盲讀。 彙編 3-4 種引人注目的插圖風格,並請同事以書面形式描述其中一種。 丟棄所有原始參考樣式,並使用書面描述來告知創意選擇。

工作做得很好:切換

網站上的插圖
憑藉其 3D 風格和諷刺感,Toggle 顛覆了當前 2D 的趨勢,感覺良好的網頁設計插圖。


罪魁禍首 3:插圖系統變得陳舊而僵硬

起源

我們是一個痴迷於設計系統的時代,源於需要在多個品牌接觸點保持一致的體驗。 並不是說設計系統是新的。 編輯系統已經存在了一個多世紀,但考慮到品牌現在使用的數字渠道的數量,系統思考是緊迫的。

同樣,品牌幾十年來一直採用不同的插圖風格,但現代設計系統引入了一個新的考慮:我們如何使我們的插圖風格系統化?

顏色、紋理、縱橫比和身體類型都經過仔細定義。 結果被大張旗鼓地展示出來。 時間揭示了一個缺陷。

問題

插圖和界面設計不一樣。 當設計系統告知界面的風格時,結果是一種幸福的凝聚力,將用戶引導到他們的數字環境中。 信息架構是一個里程碑。 導航是一種習慣。 但以系統為主導的說明風格會扼殺創作衝動——即突然點燃被瘋狂捕捉和提煉的新想法。

並不是說系統天生就不好。 當系統支持圖像概念時,插圖畫家實際上可能會發現約束解放了。 但是,當圖像是通過系統的鏡頭構想時,想法就會減弱,因為插畫家會陷入對凝聚力的錯誤信心:它適合系統,所以它有效!

逐漸地,更多的精力集中在系統維護上。 線寬和服裝物品推翻了引人注目的概念。 最後,插畫的風格和講故事的能力消亡了。

補救措施

插圖翻譯了人類智慧和情感的複雜性。 它邀請局外人欣賞他們可能不習慣的經歷。 插圖作為品牌識別工具的能力是次要的。 這些不能顛倒過來。

為了防止圖像變得僵硬,請根據主題原則構建插圖系統。 品牌的聲音和價值觀不僅僅是風格決策的來源。 它們是講故事的策略,可以從客戶、公司和競爭對手的多個角度進行查看、解釋和重述。

有一些實用步驟可以指導插圖系統的開發和長期相關性:

  • 不要沉迷於普通觀眾不會注意到的規則和細節。
  • 避免以破壞創造性直覺的方式執行系統指南。
  • 不要將系統鎖定在與其所代表的品牌相同的調色板中。
  • 偶爾打破系統,通過邀請外部插畫師貢獻自己獨特的風格來挑戰觀眾。
  • 計劃系統的發展,並允許進行增量實驗——即使當前的風格很受歡迎。

幹得好: Notion.so

網頁插圖樣式
許多插圖系統都過於風格化,並且充滿了規則。 相反,Notion 的單色插圖系統簡單、一致且富有表現力。


罪魁禍首 4:庫存插圖被過度使用

起源

許多公司需要在其網站上提供大量視覺內容,但時間和預算限制限制了可以委託的自定義圖形的數量。 為了滿足需求,公司轉向他們購買主題插圖集的庫存網站。

不幸的是,很難找到原創、高質量和未充分利用的插圖(更不用說品牌上的插圖了)。

問題

股票插圖的世界出現了一個令人不安的趨勢。 在可能只能被描述為對剪貼畫時代的錯誤致敬中,現在有混合搭配的插圖網站通過允許用戶定義性別、膚色和服裝等變量來立即生成“自定義”圖像。 由此產生的插圖是使用它們的公司的創意可信度的污點。

補救措施

對於資源有限的公司,有兩種方法可以規避與庫存圖像相關的虛假氛圍。 第一個可能是一個驚喜。 全心全意地擁抱庫存插圖。 全力以赴。毫無保留地使用庫存圖像,但要找到自定義它們的方法。 如何?

  • 使用數字拼貼混合和匹配不同的庫存樣式。
  • 將圖庫插圖與攝影(甚至圖庫攝影)結合起來。
  • 覆蓋手繪元素,如 Sharpie 標記或油漆筆觸。
  • 跟踪數字扭曲和扭曲的庫存樣本。
  • 將庫存轉換為灰度,並使用數字繪製的圖形注入品牌色彩。

在預算工作時避免庫存的第二種方法是優先考慮最需要哪些插圖並訂購一小組。 也許這意味著委託五個主頁插圖。 在短期內,它們將提供視覺衝擊力,稍後,它們可用於為其他頻道提供更大的插圖集。

幹得好:彭博商業周刊

網頁插圖趨勢
彭博社的印刷封面長期以來一直使用庫存圖像來產生戲劇性(和搞笑)的效果。 在網上,這一傳統仍在繼續,這幅巧妙的照片拼貼就是證明。


有目的地創建網頁設計插圖

在網絡上,插圖使服務更相關,產品更受歡迎。 它加強了品牌故事的講述,並幫助網站訪問者理解他們每天遇到的永無止境的信息流。 但僅僅在網站上有插圖是不夠的。

未能超越其相應文本的一對一表示的插圖是浪費了參與機會。 同樣,插圖中的價值很小,可能會被誤認為屬於數百個其他品牌之一。

插圖必須以獨特的觀點吸引觀眾——無論是風格上還是概念上。 它們不必復雜、逼真或充滿色彩才能引起注意,但它們確實需要以文字、照片和圖表無法做到的方式闡明主題的有趣之處。

插圖留在這裡。 它的溝通能力太有說服力了,不能被拋棄。 但對於未能探索插圖表達潛力的公司和插畫家來說,它的價值將被證明是短暫的。

• • •

進一步閱讀 Toptal 設計博客:

  • 品牌插圖 101:可視化敘事
  • 無需任何繪畫技巧即可設計自定義插圖的分步指南
  • 探索完形設計原則
  • 2019 年用戶體驗設計趨勢回顧展
  • 設計原則及其重要性