2010年12月11日 星期六

L'osier 餐廳














日本資生堂旗下的三星級法國餐廳L'osier的網站
進入網站後會看到手繪的等待頁面。












頁面完成後出現小短片,
像是親臨餐廳一樣,
從上樓到服務人員帶位,
透過鏡頭也進入了餐廳。












主頁部分背景使以高畫質的餐廳及餐點圖案切換,
navigation則在畫面下方,
畫面中下的最新消息級菜單、宣傳短片的空間可隱藏,
在關掉每個頁面的訊息後也可以把此部分叫出。
























最新消息及菜單的頁面是用照片作為背景,
米黃色的色塊裡放上訊息,
按下想要知道的消息後以切換紙張的方式到下一頁。












介紹食材用料的頁面也是如此,
左邊放上照片,右邊是文字。























餐廳簡介、餐廳歷史也是分別以彩色、黑白照片為底,
右邊的黑色透明框框內有文字。












主廚介紹方面也是相同手法,
讓主廚的風格和餐廳連結一起。












餐廳位置是以黑色透明色塊蓋在照片上的方式呈現。

整個網站以明亮、高畫質的照片為底,
帶位的短片加上優雅的背景音樂,
讓進入網站的觀眾像是置身餐廳,
雖然滑鼠滑過選單上的搭搭聲響有點擾人,
但整體上給人乾淨、大方的印象。

網站連結: L'osier

電影Inception官網












進入首頁不久就自動出現電影預告片段
 










首頁中間以切換呈現影評人及雜誌對此片的評語,
其他次首頁按下畫面左邊的MENU之後出現
等待切換頁面的時間軸部分則是用畫面最右手邊的紅色線條表示〈黃色框框〉,
頁和頁之間則是用動畫串聯起來。











電影介紹部份,
包括電影簡介、演員、工作團隊介紹
皆在畫面右邊建築物上的牆壁表現,
主視覺放上戲中角色,
頁面和電影帶給觀眾相同的感覺,
但有些資料因為位置限制有點難以閱讀。











有趣的是,
每個次首頁的MENU按鍵都用不同方向放置,
加上超現實的背景及緊張感的音樂,
種種將瀏覽網站的觀眾帶入電影所營造的氣氛裡

網站連結: Inception

2010年12月3日 星期五

monkey circus猴子馬戲團

這是設計團體猴子馬戲團的網站
裡面提供了他們的作品、資料。

整個網站用flash做成,黑色為底,
打造出地下城市的感覺,
其中霓虹燈的按鍵讓人有電影《艋舺》華麗復古的感覺。













前導頁用了簡單的黑底加上進入的按鍵,
不需要進入到網站裡面,
也能在此頁直接進入觀看設計師的作品及聯絡到猴子馬戲團。

按下進入按鍵後,出現類似地下商店的東西,
導覽按鈕在畫面最上方,只有寫單字,
滑鼠滑過後會在旁邊小方框上出現大字及完整名稱。
其實,也可以按畫面下方的「傳聞」、「聯」等按鍵

按下「關」或「傳聞」之後,
畫面出現了另一個類似倉庫的空間,
中間放的是他們的簡介及經歷。

「作」、「塗抹」區則是他們的平面作品,
作品在畫面中的小區域呈現,
右邊及下面的按鍵可以瀏覽到不同作品。


「鏈」及隱藏的「遠程」是其他網站的連結區,
用梯子的形象列出大串的網站連結。

整體網站用黑底及燈光的效果帶出氣氛,
按鍵的部份也用創意地表現出其團體的印象。

2010年10月30日 星期六

glico優格

glico所出的一款優格











本頁之前有一頁進入的頁面。

產品首頁是以白色優格滴下的畫面作為背景,用產品上的天空藍及深藍作為配色。
當游標指到下方索引的圖案時也會出現像優格滴下的形狀。













頁面切換時,之後畫面出現的所有物件都以動畫方式出現。













產品介紹是以兩種口味排開,按了口味之後,
畫面會往左邊或右邊走,之後出現產品的簡介。













再另一個寫產品秘密的頁面,是用優格滴入碗裡的畫面,
旁邊用了四個產品特點的對話框。













按下對話框後,會出現更多的解釋。













最後的介紹也是用小動畫帶出。


網站的設計幾乎全以白色、藍色分散於畫面上,
配合著產品的顏色及想要帶給消費者的感覺。

網站連結:glico 優格

2010年10月17日 星期日

want to be a hero?

一進入網站後,出現一段文字,
上面寫著要使用者觀看一段影片。










按下之後出現了一段頗像電影的片頭。










片頭播完後,
出現以前電視收不到訊號時會有的彩色背景,
可以將自己的照片置入。
之後網站就會將你的照片製成一段影片,
製作的時間有點小長,
期間以黑白雜訊畫面帶過。










影片開始!










主播報導著全世界都在尋找的英雄,
正是剛剛照片上的那個人。










影片還細心的把搜尋人員的小看板換成自己的照片。











警察先生身後的巴士上也貼上了照片。


之後媒體發現了你的樣子在稻田圈裡,
甚至從太空船上顯現出來。
最後在出現一個發光的妳。

雖然只是一個短片,
但從觀眾易輕忽掉的細節中也放上了照片,
還有其他演員的反應,
讓人感覺到網站的細心。

2010年10月10日 星期日

法國童書插畫家Philippe Jalbert












選擇語言的部份是以白色背景前放上作家的作品,
語言則是以小國旗呈現。











點選語言之後進入網站,
上圖是法語下圖則是英語,
兩者大致相同。

左邊是作者為網站做的動畫,
一點進網站後便出現悅耳的鳥叫聲﹝或許有點吵﹞,
右邊則是選單,
再選擇進另一頁面之前會閃動。

像是擺在書櫃上的書一樣,
作者的童書作品一字排開。

按下其中一本後,
會出現試讀頁面,
也是以書本的形象製作。
想看全本的內容,
得要連結到右下角的亞馬遜網路書店。


其他出版品方面則是用類似展示海報的方式呈現,
按下其中一張後出現放大圖。


網站設計的部份,
整齊的將圖片排列好,
點開之後也會出現放大圖,
可以看到作者對背景的設計。

作者介紹是以簡報方式表現,
包含作者的作品、報導等。

聯絡的網頁將一張相片放在中央,
底下有作者的部落格、電話和信箱,
用簡單、清楚的方式傳達重要訊息。

最後在問號網頁的部份,
放有桌面下載、舊網站的連結還有其他藝術家網站連結。
但這樣整理似乎有點雜亂。

雖然是童書的作者,
但除了網站插畫及動畫吸引兒童之外,
其他大多是給想要接洽的單位資訊。

網站連結: philippejalbert.com