universeTech 識別設計過程

需求

這個委託案的需求如下:

中文:天瀚科技
英文:universeTech
universe是宇宙的意思,有探索無窮無盡的含意
顏色:寶藍色
參考範例:TechOrange(圖01)、OctoCat Studio(圖02)


圖01 來源:TechOrange
圖02 來源:ZCOOL站酷


觀察以上兩個範例,我初步推測識別的形態若是文字型或是簡約圖案,整體線條明快、俐落,獲得青睞的機率較高。色系的話,採用單色或2個純色搭配,不要流於複雜、繽紛。

因為辦公室裝潢會先起跑,室內設計師需要色碼,所以這案子變成先選色,再發展設計稿,跟一般識別設計的流程不太一樣。


選色

公司名"universe"、"tech"直指宇宙、星際、衛星、科技等等科幻意象,一般人雖然沒去過太空,電視看多了,多少能想像太空是什麼模樣,所以我一開始選色不是打開繪圖軟體直接下手,而是先google外太空的影像。

因為設計需求已限定主色要用“寶藍”,搜尋時先用這個條件篩選圖片,因此找到的圖檔大多是冷色系,像是圖03,接著用繪圖軟體的滴管工具抓出色彩。至於哪種藍色才恰當?這沒有標準答案,得靠自己的美感經驗逐一過濾、微調出理想的主色。

圖03 來源:(上)ThoughtCo.;(下)Risk.net


圖04是最後整理出的六個主色方案,選定前我會特別切換到CMYK,確認總墨量不會過高,以免日後印刷碰上麻煩。圖05則是定案主色。

乍看之下,其中幾個藍色好像沒差別。其實這跟色面積有關,面積小的時候,兩個相近色看起來相同。一旦色面積加大,比方大到整個辦公室的牆面,這時相近色就會有顯著差異了。

正是這個道理,翻色票選色的結果,可能會跟期望值有誤差。若撇除色偏的因素,色票上每個色彩通常只佔據小小面積,缺少大面積的示範,這點足以影響判斷。

圖04 六種主色提案
圖05 最終主色



發展草圖

主色確定後,接下來才是發展構想。不可免俗,起頭階段要做功課,上網找尋更多概念相關的範例(圖06),一邊發散思考,從聯想關鍵詞開始,盡可能多想一些,再從中挑出可行的概念發展草圖,原則上一個概念發展結束再換下一個,圖案大致上從具象逐漸演變為抽象(圖07、08)。

這個階段是發散思考,所以我不會對提案稿的數量預設立場,原則上當然越多越好。會讓我結束這回合的條件只有一個,要嘛我累了,不然就是找到答案了。

圖06 更多參考案例 來源:藏標網
圖07 發散階段草圖
圖08 發散階段草圖


起頭的草圖都偏具象,也明顯受到圖06眾多參考案例的影響。圖09、10的視覺焦點都是太空梭,結合英文字“universe”或是運用圖案本身的特徵,變成一組識別。雖然覺得這個想法有趣,直覺告訴我,這類提案過關的機會不高,因為該公司的主力是開發網路應用程式,圖案卻容易被誤認為發展太空科技。

圖09 提案 01
圖10 提案 02


圖11、12則是文字型的提案。

畫出圖11的時候,心裡還沒有踏實的感覺,這是中規中矩的設計,不具備突出的特色,含義也不夠豐富。相當然爾可以推論,過關的機率偏低。

圖11 提案 03


圖12雖然圖案的特色鮮明,卻過於中國風,跟網路、軟體的意象相去甚遠,容易被聯想為宗教團體。直白畫出無限大的符號,冷靜一段時間後再來看稿,倒是看不出探索、無窮無盡的意味,比較像是簡化後的雲朵造型。

結論就是,要繼續發想。

圖12 提案 04


後來在發展抽象圖案的過程中,我突然從幾個圖形的規律性聯想到“幾何”這個關鍵詞。

幾何學是數學當中最視覺化的表達方式,也很適合表現無窮無盡的概念,碎形就是一例;數學,則是人類用以了解宇宙、探索未知的科學方法。如果沒有數學,也不會有之後軟體、網路的發展,所以這個上層概念也是重點。用規律性的幾何圖案帶出數學的意象,應該可行!

於是我開始嘗試繪製各種幾何圖形,探索線條之間的關聯性,試著在簡約美感與含義的豐富度之間達成平衡,最後產出圖13的方案。

圖形中包含了英文公司名縮寫的U、T;朝向四個方向的箭頭,意指向四面八方探索,任何一個方向都是可能,沒有設限;線條交集產生兩個無限大的符號,代表無窮無盡;最後是構成圖案的方法,從裡到外都是嚴謹、精確的幾何,意指思考、行事有邏輯、有章法。

這個圖案的含義遠比先前的方案豐富,整體風格也沒有問題。直覺告訴我,就是這個了!

圖13 提案 05



精稿

精稿階段就是將選定方案精緻化,主要耗時在細節的微調還有選字,必須不斷琢磨識別設計的形態、比例、配色、空間配置。這部分的工作沒有什麼秘訣,就是考量實際應用的狀況,憑藉耐心和經驗持續調整。

圖14是圖形含義的四個基本元素,這是未來發展輔助圖案的好素材。

圖14 圖形意義的四大重點


圖案確定後,再來是選字型。若要符合該公司的行業屬性,線條明快、俐落、現代感強烈的無襯線字體是首選。即使已經限縮範圍,還是有一堆粗黑體可供挑選。

仔細比較過現有無襯線字體的英文、數字字型後,我選擇了Lato(圖15)。主要原因有兩個,首先是Lato的家族字體齊全,從最粗體Black到最細的hairline都有,方便日後應用;其次是字體的細部特徵,如圖16,轉折處不是只有剛硬的直線,大角度的彎折帶有圓角,整體造型不會太過硬派,也適配主圖形的細節修飾。

字型確定後,將進入最後的微調。

圖15 英文字型
圖16 英文字型與圖案細節的對照


雖然整體樣式大致確定,也只是“大致”而已。從草圖走到這一步,即使識別設計的形態、色彩、字型一一定案,但這些元素的搭配還需要優化。比如圖17,是淘汰眾多微調方案後僅存的三個版本,光是比較這三版的差異,至少有配色、比例、對比、圖地的變因。最終定案的圖18,是以圖17中間的圖稿為基礎繼續微調。

只能說,最後一哩路看似簡單,對於龜毛人而言,過程中依然充滿掙扎。

圖17 樣式微調



圖18 最終定案


天瀚科技工商時間:

PHP Junior 後端工程師
月薪:40K – 50K
地點:台北

PHP Senior 後端工程師
月薪:60K – 100k
地點:台北




發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *