2015年10月16日 星期五

另一種黑






                                                      網站鏈接:http://kenjiendo.com/

   上一篇文章結尾時我們留下了這樣的疑問:當我們希望自己的個人主頁以黑色為主色調,但能彰顯出科技感與現代感時該如何設計我們的網頁?今天為大家推薦的是日本DJ, KENJI ENDO的個人網站。

   


    整個網站以黑色作為背景色,網站中的主要文字內容均選擇了簡潔、現代感的字體,使網站在視覺上顯得利落有科技感。個人覺得文字方面唯一的遺憾是作者在個人介紹方面採用了大篇幅的文字敘述,黑底白字讓我在閱讀時易陷入視覺疲勞。也許我們在操作個人介紹時可以選用表格式或是畫出明確的時間軸,並搭配以這一時期的主要作品。分條敘述與適當配圖都更易引起讀者的閱讀興趣。


 過於密集的文字編排會讓讀者抓不到重點,產生厭煩情緒。適當簡化文字敘述,用圖表、時間軸等方式呈現能讓資訊更有條理。

                                                                          


   相比之下這四行文字醒目有氣勢,與文字內容想傳達的理念相符。




      

   作為一名DJ,KENJI ENDO的個人主頁上也充滿著音樂的律動感。整個網站雖然為單頁設計,但網站中偶許多有趣的互動式設計。例如,當我們將滑鼠滑到設計師的個人照片上時,照片周圍會出現用細線構成的倒三角形。同樣的設計思路體現在網站的字形變化上。


  
   當我們將滑鼠移到網站首頁DJ的名字上時,原本規矩的英文字母便如同四射的煙火般,向四周釋放出細線,這些線隨著滑鼠的移動改變方向。這樣的設計不僅大大提升了網站閱讀的趣味性,更能使原本黑色的網站視覺顯得活潑起來。當我們在設計以深色為背景色的網站時,除了適當點綴活潑、鮮亮的顏色外,互動式設計也是不錯的選擇。通過這一案例我們不難發現,以細線組成的幾何圖案在視覺上並不會顯得單薄,適當數量的線條、幾何圖案帶給我們的是現代、靈活的視覺體驗。



   網站另一特質便是操作簡便。當我們對KENJI ENDO的作品產生興趣想與他做更深一步的交流,或是有問題想請教他時,在網站的底端右方有一個Contact區,我們可以輸入我們的名字、email、相對KENJI ENDO說的話,點擊submit便可直接發送。這樣的設計也許可以運用在一些服務性質的網站。當我們有建議時無需大費周章從郵箱中寄信,在網站中便可完成反饋的操作。



   當我們想快速找到個類信息的菜單時我們可以點擊網頁左上角的icon,如何關閉這一頁面?我個人通常會在頁面右上角尋找關閉頁面的icon,但在KENJI ENDO的網站中,當我們想關閉這個畫面時只需要點擊頁面的任意一處即可。


   通過今天對日本DJ KENJI ENDO的個人網站能介紹,我們掌握了幾個處理黑色或是暗色調為背景色的網頁的技巧:通過互動體驗讓暗色調的網站不再沉悶;在內文的處理上盡量避免過多的文字;簡潔的無襯線字體,可以讓網站的視覺風格顯得有科技感;細線與幾何形的運用能讓畫面看上去更豐富、靈動,也能打破圖片規矩的四方造型。

2015年10月8日 星期四

一次告白——Yohji Yamamoto 官網設計分析



                                          http://www.yohjiyamamoto.co.jp/yy/

    選擇 Yohji Yamamoto 的官網作為本次網頁分析的主題,完全出自於我個人對這一品牌以及對山本耀司本人的強烈熱愛。簡單來說在 Yohji Yamamoto 這個以設計師本人名字命名的品牌中,我們能看到無窮的黑白以及強烈的紅,不規則的剪裁、無性別界限的時裝都是設計師本人的拿手好戲。
 
   也許這樣的網頁風格並不適用於你的個人主頁或是產品官網,但Yohji Yamamoto的官網上對於作品細節的呈現,在我看來最值得學習的。




  個人網站的主頁設計最關鍵的一點,在我看來便是個人風格。上圖是 Yohji Yamamoto 的官網主頁——滿版的底圖配上設計師本人的簽名,主頁上為數不多的幾個單詞均選擇了白色,並將一長條黑色的有透明度的色塊 作為菜單的底色。 即便是初次接觸這一品牌的人,也許也會被這樣的氣勢所震懾住吧。

   值得注意的是,在底圖的選擇上,網站設計者忽略了model的眼睛,將重點放在服裝上。讓我們能清晰地看到衣服的褶皺、肌理。這樣的設計不論是品牌官網或是個人網站上都是可以借鑒的。暗黑風格的主視覺並不是沉悶的,通過作品鮮亮的色彩為消費者製造視覺的焦點,使我們的眼睛不自覺的保被產品的細節所吸引。




   當一件作品以如此高清、滿版的形式展現在的眼前時,也許你們也會像我一樣因其中的細節而感動吧。
   



http://www.comme-des-garcons.com/index.html

   這兩張看似有些無厘頭、視覺衝擊力極強的畫面來自川久保玲的官方網站。這位與山本耀司齊名的服裝設計大師以荒誕、前衛的風格著稱。同樣出生與與20世紀四十年代的日本,截然不同的表現風格在官網設計中體現得淋漓盡致。不論是頂尖設計師或是初學者,我們推銷自己、推銷自己的作品,在設計個人主頁時必須以最強烈、震撼的視覺效果留住我們的消費者。

   

   
   在Yohji Yamamoto 官網選單中加入的當季新作品,不僅讓我們對設計師的作品產生深刻印象,還點綴了暗黑風格的主色調。這種小小的“自戀”並不令人討厭,當我們在經意自己的主頁時也許能摒棄一些規矩、死板的icon,代之以有個人風格的手繪icon、個人的得意之作,不僅能讓網站有統一的視覺形象,更能加深我們對作品的印象。




   當我們把滑鼠移到頁面底部時,當季整個系列的作品直觀地呈現在了我們眼前。





    山本耀司以剪裁、不對稱見長,反思我們的作品,我們的特色在哪裡?我們作品中有什麼經得起不斷放大、聚焦的亮點?

    從以上兩張圖片中我們看到,在Yohji Yamamoto 的網站設計中均採用了整體+細節的呈現方式,讓我們很難不注意到作品的細節。整個頁面文字只有幾個常規選單例如主頁、女裝、男裝、前幾季作品回顧。這樣的設計先前提到的主頁設計思路相同:我們的作品本身能代替我們說出我們的設計理念,太多的語言反而減弱了作品本身的視覺語言。也許我們的電子作品集或是個人主頁並不適合類似的滿版設計,但如何呈現作品細節的方式值得我們借鑒。


   

   
   也許就一個網頁設計師而言,Yohji Yamamoto 的官網設計並沒有什麼太多花哨的技巧,或是新奇的互動式設計,但對於一個享譽世界的服裝設計師而言,這樣的品牌官網無疑是大氣、符合其市場定位的。當我們的目標客戶群是較高消費水平的客戶,這樣的網頁設計是極具吸引力的。而當我們的客戶群是年輕人,或者我們的作品更趨向數位化、科技感時,我們該如何打造我們的網站?下週我會為大家帶來又一個人主頁設計的典型案例。



2015年10月3日 星期六

星巴克官網的奧秘



    

   說到咖啡品牌,我們首先想到的也許就是星巴克。而提到星巴克我們腦海中出現的關鍵詞是什麼?美式生活?美人魚logo?小資生活?環保設計?今天我們通過星巴克這家全球最大的連鎖咖啡店的官網設計,了解星巴克特有的品牌魅力。



http://www.starbucks.com/
   
   在官網首頁最吸引我們目光的也許就是“Raise a cup , and a million trees , in celebration of coffee." . 比較星巴克的競爭對手之一的咖世家(Costa Coffee ),星巴克的環保概念讓消費者對品牌產生好感與信任,為品牌樹立了良好形象。


http://www.costa.co.uk/


   從視覺設計上來看,星巴克的官網以綠色、白色、深咖啡色為主色調,凸顯了品牌的自然,更我們清新、健康的視覺體驗。網站中的配圖色調明快,尤其是食物,在網站白色的底色襯托下讓我們更有購買欲。網站在視覺上呈現的對健康飲食、品質生活的追求反映了品牌的目標客戶群不是普通大眾,而是一群注重享受、休閒、崇尚知識尊重人本位的富有小資情調的城市白領。
   

   品牌差異化並不是一味地追求包裝等外觀的標新立異,而是有著明確的定位,有針對性的打造品牌形象。當我們在打造品牌形象的時候應該學習星巴克的營銷策略:不一味地討好所有消費者,力求滿足所有人的愛好;相反地,故意製造衝突有時能讓消費者對產品產生好奇與嚮往。

    



   信息化時代智能手機的氾濫與網路消費的普及,導致現今的商家爭先恐後為其品牌創建官網。通過官網我們看到的不僅是商品信息,更重要的是官網是商家與消費者間的互動。星巴克在與消費者互動、溝通這方面值得我麼借鑒。不論是有關咖啡口味的小測試或是多種搭配的選擇,這些互動式設計讓消費者感受到的是商家的親和力。






   信息化時代的另一產物便是越來越多的社交軟體、溝通平台。我們通過星巴克官網學習到的另一經驗便是:善於利用各種社交媒介。

   
  



   星巴克官網除了向消費者傳達品牌理念、商品種類等基本概念外,通過多種社交軟件與消費者進行溝通與互動 ,為市場營造了一種星巴克文化氛圍。我們在星巴克官方Instagram 上看到許多和星巴克外帶杯有關的繪畫、攝影作品,這些精美的圖片為消費者營造的是一種令人嚮往的生活態度,在我們心中樹立了“建立喝星巴克就意味著有品質地生活”的概念。

   不同於保守的宣傳方式,我們的品牌需要與消費者拉近距離,最好的方式便是用消費者的語言說話。



https://www.pinterest.com/starbucks/




https://instagram.com/starbucks/




   從整體色調、視覺風格,到服務種類、商品訊息,延伸到商家與消費者的溝通、互動,我們通過星巴克官網中這些成功的營銷方式,我們能得到的也許是這樣的經驗:一個成功的官網是將品牌精髓具體化,將品牌精神通過多樣的互動、溝通方式滲透到消費者的生活中,滿足的不僅是實體體驗更是虛擬的體驗。我們在設計網頁時向消費者提供的不僅僅是一種理念,更是一種感覺,一種對品牌、產品的體驗。