在2008年，我開始在那里工作的時候，Facebook的視覺形象已經值得我們去做了。他們選擇了一個大膽的并且簡單的配色方案，有一個簡單的精心設計的文字商標，并謝天謝地避免了在當時很盛行的光滑的web 2.0的審美。不過，我認為有很大的需要改進的機會。這樣的機會，再加上自身的使命和企業文化，就是為什么我想在那里工作的一大原因。
不幸的是，提煉一個似乎工作正常的視覺形象并沒有在優先級列表中排在靠前位置。在我們努力跟上Facebook快速增長的過程中，設計師經常做一些新產品或舉措的一次性設計。這種低效率的使用時間也導致了非常零散的視覺景觀。
最初解決這個問題的努力中，有一個是在2009年的一個黑客馬拉松，當同行設計師Everett Katigbak和Mark Bixby在一個練習中加入我們，一起重新思考Facebook的文字商標。我通過寫Facebook的形象準則，說明指南和設計資源wiki來跟上這件事的步伐。
Everett Katigbak，Mark Bixby和我在2009年黑客馬拉松思考Facebook的文字商標
來自黑客馬拉松，這是我在重繪文字商標的首次嘗試
測繪Facebook品牌的早期嘗試
多年來我在這個系統上的各個部分有一定的進展，倡導任何愿意的人來聽，并且也有過數次失敗。我始終認為，更有意義的努力是有必要的。Facebook擁有項目被組織內充滿熱情的個體自發完成的悠久歷史，并在2012年我決定制定一個全面的并且有凝聚力的視覺形象系統。
2012——我怎么根據觀眾和情境來考慮Facebook的視覺景觀
相機應用
我第一個大的機會嘗試其中一些想法是在2012年的時候，當時我注意到一些實體模型用于即將到來的傳播在Pixel Cloud（Facebook分享模型的內部工具）上的相機應用。該產品設計師們建議使用字體Klavika用于相機的文字商標。雖然Klavika確實有良好的質量，但我一直覺得它用作Facebook的商標太僵硬、機械。尋找一個機會，我接觸它們，盡管距離推出還有幾天，它們笑看我。我很快就開始重繪用于相機文字商標的Klavika字體，使其多一點人文主義。
未修改的Klavika——由Jorn van Dijk設計的應用程序圖標
Ben重繪的Klavika
最終應用程序的文字商標
字體
盡管相機應用程序的成果有限，自定義類型收到很好的內部評價。再次修改自己其他項目的Klavika之后，我們決定委托Eric Olson（Klavika的初始設計者）采取辦法制定完整的字樣。目前字樣有兩種——常規和半黑體，并支持超過75種語言。
Facebook常規字體
實體模型實現字體
圖標
在相機與字體開發之后，我就開始把相同的理念應用于形象的其余部分。盡管有完整的文字商標，圖標已經變成了Facebook的主要形象標志，并且有些正在進行的努力在用圖標替換產品的文字商標。Facebook此前在提供這些資源給公眾方面做得很差，結果導致很多人常常自己做自己的。即使他們沒有找到官方的，雙色的設計也導致很多人修改圖標。所有這一切，你可以想象，導致了有些不成體系。
谷歌圖片搜索到的Facebook圖標
這種分化不會一直如此糟糕，但即使Facebook本身也存在不一致。下面顯示的是它主要使用的兩個圖標設計，當然還有其他的。
舊的圖標
嘗試解決這個問題，我們創建了一個新的圖標，它足夠強大、靈活，能在任何情況下工作。和Aaron Sittig（最初的圖標設計者）進行合作，我們的做法是重繪“F”、調整比例、取出底部高亮條等等，這樣新圖標的核心是一個簡單的單一顏色字形。
新圖標
之前圖標存在的一個問題是它們只在某些背景或在某些情況下使用。單一顏色字形的一個明顯的優點是，它可以作為一個積極或消極形態的工作。
我與設計師Jorn van Dijk和Brandon Walkin一起工作，為產品界面所有需要的各種尺寸探索新的圖標。
新圖標的另一個重要的考慮因素是設計時考慮到模塊化的邊界半徑。只要有可能，我們使用默認半徑，但為了容納某些界面或背景，像IOS的，其中不同的半徑是理想的，該圖標可以調整。
最后，新圖標的設計也充分考慮不同的視覺風格。而形狀和比例不應該被改變，除了邊界半徑，圖標本身可以改變樣式以匹配特定界面或背景的視覺美感。這里展示的是由Jorn van Dijk設計的iOS和Android的圖標。
所有這一切都有望使第三方更容易整合和設計的字形的界面，而無需改變形狀或比例。下面是一些實體模型結合了新的圖標。
之前的iPhoto
之后的iPhoto
之前的Windows 8
之后的Windows 8
之前的Instagram
之后的Instagram
子品牌
基本完成字體和新圖標的開發后，我為創建新的子品牌開發標準和模板。子品牌只是從屬的任何產品，服務、團隊、組、網頁等。多年來，子品牌已經開發了一個一次性的做法——每個設計師都一遍又一遍地解決同樣的問題。這不僅導致了非常混亂的視覺設計，而且它也是一個令人難以置信的設計時間的低效率使用。
Facebook子品牌現有的視覺標識示例
對于整個系統，我的方法可以概括為使用工具而不是規則。與其創造一堆規則告訴人們“不”，我試圖盡可能地創造一個靈活的、詳細記錄的資源系統，它比替代品更容易使用。有一個規則我確實覺得有必要實行，永遠不要為一個子品牌而納入圖標到一個新的標志。叫第三方不能修改我們的圖標然后我們轉身自己做，這是虛偽的。
考慮到這一點，Jorn van Dijk和我開發了指南，用于為子品牌創建新圖標。每個基本水平的圖標需要用作單色字形，但它也可以以全色說明性型式呈現。
在對現有的Facebook子品牌做詳盡調查后，我試圖創建一個廣泛的系統，它能鎖死各種想要使用子品牌的人。與其試圖變得非常嚴格，我想嘗試在推動我們走向一致的同時適應過去。
這些子品牌公開展示的其中一個地方是在Facebook上運行的網頁，所以設計師Kris Brady和我曾與在新系統中運行頁面更新圖標的隊伍合作過。這些簡單的單一顏色字形在執行產品界面所需的所有尺寸時要更好。
文字商標
雖然它不被那么頻繁的使用，為相機和字體申請相同的方法制定、重繪Facebook文字商標依然重要。這是合理的，但遺憾的是自從我從Facebook辭職后一直沒有實施。
舊的Facebook文字商標，由古巴議會Joe Kral設計
新的Facebook文字商標，核準但尚未執行
在此之前，Facebook關于它的文字商標為數不多的規則之一是，它應該永遠是白色逆轉淘汰較暗的顏色。這種往往打破的規則終于在這一制度中廢除了。
Like圖標
原來的16×16像素的在界面中使用的Like圖標是Soleio Curvo繪制的。我負責調整所有的像素圖標移入更大的矢量插圖在營銷材料中使用。在這個視覺形象的重新設計中，我趁機簡化我以前繪制的圖標，并且與國際化團隊一起打造翻譯Like按鈕的圖形圖標。
文檔
這個項目中最重要并且費時的方面是寫文檔和創建途徑來把資源輕松地分發到每個人。在內部，我建立、編寫、維持內部wiki上的設計資源中心網頁。我還與設計師Kris Brady以及營銷團隊建立一個外部面臨的品牌資源中心。
訪問facebookbrand.com下載Facebook官方的資源
系統使用
2014年離開Facebook后，我非常興奮能看到這個系統被Facebook正在使用。該圖標的第三方實現也是一個巨大的進步。下面是我沒有設計的系統的使用。
最后的思考
Facebook作為一個產品和組織，發展速度非常快，并且設計一個可以在許多媒體和背景中靈活使用的系統極具挑戰。從視覺設計工作中獨立出來，難以置信的任務是創造意識、獲得支持、并最終建立一個跨職能的團隊來批準和實施這些變革。即使沒有系統是完美的，我為我們的成就感到自豪，并期待看到Facebook繼續發展他們的視覺形象。
京公網安備 11010502049343號