2011年6月19日 星期日

COACH台灣官網













進入COACH官網一映入眼簾的是最近主打系列的圖片抽換
整個網站以白色為底
色彩單純卻不單調













品牌故事方面先以文字、圖片淡出淡入的短片呈現
進入頁面後將經典產品依年代用相片的方式傳達
內容有圖片也有影片












我們的皮革頁面以黑白照片及簡單的文字組成
固定的影像呈現純淨和經典的感覺












歷史影像則是以佈滿整頁的影片呈現












品牌系列的頁面設計大致上已左邊文字、右邊大圖片為主
按下左邊數字即可瀏覽圖片












點下播放影片即在視窗中間出現高清影片












最新消息以區塊的方式呈現
也可直接連結到相關網頁上












像是時尚雜誌一般
SPOTTED的頁面以好萊塢明星穿戴自家商品的相片排列
加上白底黑字的名字標籤
給消費者穿著上的參考












媒體報導部分用圖片拼接
下方灰色桿桿拖移後可檢視圖片












商品型錄以電子書方式表現
亦可放大及換到下一頁












在有些頁面上會讓使用者覺得在看電子書
而這些頁面的設計又沒有其中商品型錄來的排版精美

但網站設計大致上延續了品牌給人的感覺
留白及多彩產品的組合也給人輕鬆、清晰的意象

網站連結:COACH台灣官網

2011年6月18日 星期六

masterpiece collection

這是日本品牌masterpiece的官方網站
背景以黑色為基礎
簡單、大方












不過其中更吸引人的是網路型錄頁面的設計












2011年春夏型錄
照片一張張排列
滑鼠指到之處 相片變的清晰
整個頁面隨著滑鼠相對移動
並且有小音效
也可按slide show直接播放相片











也可以在photo catogory裡選擇相片的分類
更直覺的看到想查詢的影像












進入所選擇的影像後
出現像一般瀏覽照片的頁面
特別的是
不像其他品牌以模特兒作為主角
反而以街拍素人的方式呈現












2010-2011秋冬型錄以及可拍的概念呈現
以綠草地為背景
上頭放了照片及一些小玩意











按住滑鼠左右移動即可拖移畫面












產品目錄部份以類似破地圖的感覺
按下下方的小圖即可連結到購物網站












2009-2010秋冬主打與各界設計師的設計包款
型錄的部份以城市為意象
滑動下方的黃色桿桿即可瀏覽畫面











滑入萊姆色加號時出現小圖











按下後出現設計師及所設計的包款











按下右邊選單後出現設計師的簡介及包款的介紹

型錄設計帶出整個品牌年輕、活力的形象
但在其他頁面走的是實用方面的設計
互相平衡 
讓瀏覽者在使用上沒有太大的壓力

                master-piece首頁

2011年5月14日 星期六

多喝水15歲影展















多喝水於15周年「15歲影展」的活動網站
網站一開始用學生活動的小短片進入













接著輸入姓名和性別後
出現了男學生或女學生
校徽上還繡著你的姓名
右下角一直出現多喝水的瓶子






















首頁用教室牆壁為背景
上面則貼上照片
照片中的同學、老師有一些小動畫
滑鼠滑過同學的頭後
會各自出現這次影展的15個小短片
右邊有活動的LOGO和SLOGAN












這是其中一支短片[我的夢想]












MENU間的轉換是向鏡頭一樣的滑動
關於15影展裡有片單和導演的介紹
選單在左手邊
中間是文字及圖片介紹












導演介紹較影片介紹多字
滑鼠移入文章下方便會向下顯示文章












預告&主題曲也是用照片方式呈現











網站用了教室的牆壁、黑板、佈置甚至是電源開關等意象
配合上影片的調性
讓觀賞網站及影片的人
都回到了15歲那時的陽光還有汗水的味道

網站連結:多喝水15影展

2011年4月20日 星期三

COCO壹番屋

↓日本咖哩店在台的網頁首頁













網站以咖啡色系為主
上下皆為menu
形象區、最新消息位在中間













↑關於我們
形象區用動畫方式出現
並放上三個分頁的連結
用圖片和少量文字說明
看起來整潔清楚

























↑特色介紹
點下形象區上的動畫就可以大致了解此頁內容
呈現菜色為客人量身訂做的特色
也模擬了點餐時的順序
網頁下方附上人氣菜色
供點餐時參考













↑菜色介紹
咖哩太多種類了
用下拉選單分類所有的咖哩菜色





































↑店面資訊
以三家店為一排整齊排開
地圖是以照片方式呈現













↑徵人求才












整個網站多以大圖片、少量文字
及鮮明的色彩給視覺上清楚、明瞭的特點
適量的動畫也讓人有活潑的感覺

網站連結:COCO壹番屋

2011年3月19日 星期六

男前豆腐

男前豆腐是日本的豆腐品牌,
以獨特的包裝及命名方式打響在市場上的名號。











進入網站後
畫面中間出現「男」字並旋轉著













首頁由黑白漫畫人物構成
menu放置於上方
並由開關的手把呈現











最新消息用電視為外框﹝字是亂碼﹞
訊息用拉霸形式分則閱讀


人物介紹是男前豆腐特別的地方,
他把產品搭配人物的特性,
賦予產品另一種感覺。
mouse over到右上角的雙箭頭後
會出現所有人物的關係圖。
按下人物的大頭照後會出現有關人物身高、體重、血型、年齡等資料
 

storyg是男前豆腐為他的漫畫人物們所編的故事
左邊是日文、右邊是英文
總共洋洋灑灑19集


公司資訊用名片方式排列
按下map後出現左邊名片、右邊地圖的畫面


他們還發展了服飾等周邊商品
畫面則是像街頭流行雜誌的方式排列商品












還出了單曲
可以線上試聽











產品方面男前豆腐做了很多新嘗試
用瀟灑江湖味的名稱包裝了帆船形狀的豆腐
畫面則是以黑色背景配上白色框框裡的豆腐











下載區則是用槍準星的形象
滑鼠經過的地方以圓圈方式呈現黑背景下的內容


用黑白色調再加上漫畫人物
讓消費者在網站上容易和商品結合
雖然menu上的分項很多是連外網站
但每個分頁的設計都有小小的差異
讓人對整個品牌的形象統一













網站連結:男前豆腐