設計的目的

昨天在網路上看到一篇英文文章, 作者是位資深創意總監, 整體內容大概是在探討誰來定義畫作的目的好壞,以及設計的目的, 他舉例, 梵谷在他的年代被當作是瘋子, 死的時候身無分文, 但他過世後畫作價值卻飆漲, 誰來定義? 誰來定義設計或畫作的好壞及目的?

這篇文章裡有個論點是打從我踏入創意設計這一行就深信不疑的, 就是 – “如果設計沒有目的, 就沒有存在的必要”. 所謂的目的是很主觀的, 常常覺得只是為了好看而做設計毫無意意, 我也這樣告訴過去身邊的設計師, 設計必須去溝通事情, 也許是因為在網路廣告產業的關係, 總覺得從手中出去的設計必須, 一定要告訴消費者什麼, 產品訊息, 或品牌, 或什麼…但在這篇文章的後面, 這位創意總監分享了他朋友的一段話, 讓我對這一路自己深信不疑的設計理論產生了些許動搖…

他朋友說 : “a pleasing shape can also fulfill a purpose. Just by being pleasing“

為了取悅(好看)而設計也是一種目的, 目的就是取悅(好看), 大學畢業第一份工作的創意總監對我的影響很大, 他總是要求我們在畫面上每一個物件都要有溝通的意義, 就連一點一線都要有存在的目的, 如果我早點知道上面那句話, 也許就不用在那邊想半天畫面上那個為了平衡畫面的點線到底要溝通個什麼鬼訊息而苦惱著要怎麼說服他…

一定有人會說像平面廣告設計的目的一定就是溝通產品貨品排訊息, 因此”好看”或”取悅”就不應該是其中的目的, 但漂亮的設計人們會一定比較願意花時間看, 假設你近便利商店買一個你從未喝過的飲料, 你是否會先看到包裝設計? 這篇內容我自己沒有答案, 但是作者分享的這篇思考單純為了好看或取悅人的設計存在的必要性, 也讓我開始思考過去以來對設計目的的認知…well, just some thoughts…

ge smart grid

GE smart grid

GE奇異提出了一個新的能源概念, Smart Grid. 他的概念很簡單, 假設過去舊金山只能用舊金山當地的風力發電或是水力發電, Smart Grid的概念是能源可以跨越地域的限制, 紐澤西的水力發電所產出的能源可以被舊金山取用, 邁阿密的太陽能發電可以被西雅圖使用, 除了這個概念之外GE奇異還推出一個新產品叫Smart Meter, 這個能源測量表可以告訴你哪些時段最省電, 而且會告訴你省了多少. 而且他們還發明了一個新詞兒 – Ecomagination. 環保想像力. 歷史上許多很棒的產品一開始都是個被眾人取笑的想像, 像是帶著走的錄音機 walkman, 個人電腦, 比馬跑的更快的東西Ford汽車, 我想Smart Grid一開始應該也被打過很多槍說絕對做不到, 咳, 不好意思離題了…

這個網站的設計我只能用【聰明】兩個字形容, 除了GE本身的產品聰明之外, 網站也把能源共享的概念用圖說的方式變得很簡單, 例如告訴你省下的電等於多少量汽車的廢氣排放量, 可以節省多少錢等等, 全部都用互動圖表的方式呈現, 簡單易懂, 但我想這個網站的製作過程絕對不簡單.

Back button
過去Flash最為人詬病的就是瀏覽器上的back button, 過去Flash網站不管瀏覽到哪裡, 只要按下瀏覽器的back button, 你就會被帶到首頁或是上一個網站而不是上一頁, 這問題很早以前就被解決了, 這個網站中也有被運用, 因此你可以隨時放心的用力按下back button回到上一頁.

Navigation
除了主畫面透過左右的大箭頭可以逐一的看完內容展示之外, 下方提供了可以任意跳頁的選單, 這是很基本的功能, 但很容易被很多設計師忽略.

資訊呈現
英文有句諺語叫做A picture says a thousand word, 這網站晃了一下就聯想到這句話, 常使用圖文簡報的人可以參考一下這個網站說明數據的做法. 將複雜的數據跟概念用圖說明.

細節
這個網站大部份都是用3D表現, 小樹, 小房子, 河, 橋等等都很小, 但質感細節都很棒, God is in detail…evil as well.

Pre-loader
我太喜歡他的pre-loader了, neat! 也跟網站的內容有關 – meter, grid.

Twist
國外在拍廣告片或是自己在想創意點子的時候喜歡用這個字, give it a little twist, 一個意想不到的結尾, 一個爆點, 一點小東西可以讓一個廣告片或創意更有爆發力或更容易被記住, 這網站裡把滑鼠移到下方的時候, 右邊會出現一個三插頭式的插座, 也許有很多人注意到這插座看起來很像一個哭臉, 但當你將滑鼠移過去的時候插座就笑起來了(當然, 因為滑鼠滑過去你就成了使用GE產品的潛在用戶, GE小臉當然會笑), 網站運用了跟主題的關連給了這個插座一個全新的詮釋跟生命, 個人覺得很棒

跳出滑鼠的互動
不只是用滑鼠得互動, 網站中用了一個叫做PaperVision 3D的技術, 網友只要將網站中的一張文件印出來, 放在webcam前面, 就會看到魔術…透過webcam看, 那張印出來的紙會變成立體的, 很多網站都用過這個技術, GE的運用是將風力發電塔以3D的方式透過webcam在那張紙呈現出來, 網友透過吹電腦的麥克風產生風力就能讓那個虛擬的鋒利發電塔轉動.

anyways, 值得花點時間看看GE如何將硬邦邦的資訊用好玩的方式呈現. enjoy.

  


  

pretty loaded

pretty loaded

preloader, hey web designers out there, 這東西一定不陌生吧? 當Flash content出現不久, 大家還在用56k上網的年代, preloader是多麼重要的東西, 網友在等網站下載的同時, 螢幕上唯一能幫他們解悶的大概就是設計過的preloader了, 過去網頁設計師們花很多時間在製作preloader上面, 而且load完之後還要跟網站的內容銜接的天衣無縫. 且越做越花俏, 已經很少看到最basic的橫條bat式preloader了.

顧名思義【pretty】loaded, 網站整理出過去的一些經典網站中, 像是達文西密碼的電影網站, Nike, Coke, Walkman, 300壯士的電影網站等等的優良設計preloader, 網站中沒有什麼別的, 就是無止境的讓你欣賞一些經典的preloader, 左下角會出現相關資訊. 是由一家知名的online creative agency BIG SPACESHIP製作整理.

網站中出現的preloader, 個人覺得有幾個重要的觀念可以分享

功能性 : 不管preloader設計的是否再花俏, 它的功能畢竟是個為了告知網友目前的下載進度, it should work as a preloader, not the main content. 常常會有rookie designers把preloader當成整個設計的重點, 本末導致造成設計過度的preloader檔案太大反而變成下載網站的障礙.

連貫性 : 這些preloader在演繹的過程都會提示網站裡的內容(或產品的特性), 像coke是以曲線瓶, 達文西密碼是以電影中出現的密碼捲軸等, 這樣可以加強網友對網站的印象以及視覺上的連貫性.

preloader可說是Macromedia(現Adobe)在製做Flash這套軟體時為自己想到在Usability上的退路, 因為如果沒有preloader這東西, 很多人在56k的網路石器時代對Flash想必是敬而遠之. 當然現在光纖, ADSL這麼普遍, 也許有人會說preloader不在重要, 但我覺得它還是有存在的必要性, 因為就算連線速度變快, 網站的內容確從過去分【k】必爭變成【Heavy weight】, 多了影像, 影片, 聲音等等的重量及content, 而且我必須說台灣的網路連線真的沒有想像中的穩定…因此…all hail prelaoder!! enojy the show!

    

15 Below – 流浪漢經濟學

15 Below

這個網站是一家加拿大的online creative agency – TAXI所發起的活動, 義賣一些上面有名人簽名的多功能保暖外套, 並募款發外套給路邊可能會凍死的流浪漢, 為什麼要發外套而不是食物是因為就像標題寫的, 只要溫度下降致攝氏-15度(Below 15C)的時候, 流浪漢凍死的機率就會暴增, 因此他們用這個溫度的臨界點作為整個義賣的主題.

其中參與這個義賣活動的名人包括名模Heidi Klum, 音樂家馬友友, 歌手Sr. Elton John等等一堆人. 這些義賣的外套被她們的簽名加持過後價值變暴增, 用賣出去募得的款項來將大量的外套捐給流浪漢.

我想有些人可能知道, 報紙對流浪漢來說非常重要, 不是因為他們要了解時事(飯都沒得吃了誰還管時事), 而是報紙有保暖功能(街頭求生101), 因此這件薄薄的外套裡外設計了一堆口袋, 可以讓他們塞一堆報紙進去保暖, 不用的時候也可以摺的小小的帶著走…不用說流浪漢, 一般登山客或是探險家應該也都可以拿來用…

過去我在舊金山的時候常常會有人問我, 舊金山的特色是甚麼? 我想很多人期待的答案應該是”金門大橋”, “惡魔島”, “同性戀街”, “美國最大的中國城”…但我的回答往往是”流浪漢”. 去過舊金山市區的人應該知道, 路邊很多流浪漢, 致於為什麼舊金山有那麼多流浪漢, 曾經聽過很多說法, 有人說很久以前東岸的議員付機票把所有的流浪漢都騙到西岸, 也有人說因為舊金山的天氣四季都適合在路邊不會凍死, 也有人說舊金山的居民容忍度比較高, anyways, 總之流浪漢很多就對了, 這邊我想講的卻是流浪漢跟商機的關係…

話說流浪漢之所以沒有辦法改善, 是因為他們的存在造就了許多人的就業機會, 舊金山有很多服務流浪漢的機構, 供們住, 吃, 領救濟金, 政府也能借此提高稅金, 當然, 也造就了像15 Below這種義賣活動的產生, 流浪漢儼然已經成為社會機器運作的重要一環, 如果他們哪天突然消失, 可能會有一堆人失業, 政府也沒有理由提高稅金了…我想這問題應該可以放在蘋果橘子經濟學這本書裡, 或可以寫篇論文之類的吧我想…anyways, 回歸主題, 這外套設計的還不賴, 我都想買一件, 而且網站的設計也很簡單乾淨, 還教你如何使用…我有個問題…流浪漢…會上網嗎?…

   
  

girl effect

Girl Effect

這是Nike基金會為協助開發中國家的貧窮女性所作的宣導網站, 在一些偏遠的開發中國家, 像伊索比亞, 孟加拉等等的地方, 女性沒有機會融入社會, 她們大部份到了一定的年紀就得嫁人, 生小孩, 無止境的做工, 變成文盲, 還有可能因為免疫力不夠而染上愛滋, 且永遠沒有機會脫離貧困.

剛開始看到這個網站的時候只看到標題【Girl Effect】, 本來以為是某個女性產品想要造成話題所創造的新名詞, 但瀏覽了之後才知道網站的目的是要去協助開發中國家的貧困女性, 讓他們有機會受到教育, 以及得到良好的資源. 剛開始很納悶為什麼只協助女性, 後來基金會的網站中也解釋原因, 經過四年的觀察後發現, 女性得到資源後比較會回饋家庭甚至延伸致社會, 所產生的漣漪較廣, 效益較大, 當然, 公益也要看ROI(投資報酬率), 最小的投資產生最大的效益.

常常聽到有人說 : “女性的韌性比男性強”, 我沒有懷疑過, 光講到生小孩這件事我想大部份的男性就都沒得反駁了, 還聽過女性在生小孩的痛, 有如將手指頭切下來般的痛(某位醫生形容的), 當有小孩的女性身邊出現危險時, 她們第一個想到的往往也都是小孩及先生. 女性的身段可剛可柔, 在現代社會中的適存性已經勝過男性, NIKE基金會看到了女性的潛力, 並希望藉由協助更多的女性為位社會帶來更多更正面的力量.

撇開這個公益網站是由NIKE贊助的品牌形象不講, 公益網站往往都做的枯燥乏味, 但這個網站從一開頭就吸引我注意, 整個流程簡單的運用了Who, Where, Why, How. 網站從一個簡單的故事開始, 一個假想女生A Girl的故事, 告訴妳誰需要幫助, 故事丟出一個問題讓你去思考, 思考為什麼要幫助他們, 哪裡需要幫助,她們得到幫助之後可能的結果是什麼. 故事結束後也用簡單的三個大選項串聯整個網站 – Learn(了解更多), Change(如何幫助他們), Share(分享給更多人知道), 簡單明瞭的Navigation讓整個網站的目的一目了然. 這網站是第二個讓我願意花些時間去瀏覽的公益網站. 另一個是Invisible Children, 有興趣可以看看.

公益其實就是積少成多, 常常覺得一個人做不了什麼改變, 但一個連一個, 當力量慢慢累積起來改變就會默默的發生, 網站中提供了捐錢的管道, 如果沒有捐錢的感動, 還提供了貼紙聯署, 桌布等等的下載, 讓你用精神去支持…take a look, make the change.