這次我要介紹網站是Kick My Habits，一個非常精緻又有互動性的網站，
這個網站主要是讓你看看你一個星期的花費都花在什麼地方，勸你把有些不好的習慣踢掉。
http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/

喜歡就去點進去玩一玩，裡面的手繪也很可愛

首頁是說明這個網站的目的，然後就可以點GET STARTED開始。

click了進來就會看飲食類，左邊點 I EAT 設定花費，之後click右邊繼續。

填完全部步驟，就會看到一隻腳讓你踢掉全部東西。

最後就會看到你一年和一個禮拜的花費計算。

使用單頁面網站設計手法可以作為一個產品、專題的宣傳頁，也可以作為一整個網站。單頁的好處很多，比如能快速的讓訪客直觀明了的查看你想表達的內容，其次製作成本減少，效率提高，特別是做專題頁，時間是很寶貴的。

从酿酒术汲取灵感的NAORA限量咖啡

今天我要介紹一個出名的NAORA限量咖啡網站 ( http://www.nespresso.com/naora/#/front )
首先我是被他的首頁的flash動畫設計手法吸引住了，之後看下去覺得他的網站很有趣，雖然簡單但是動畫方面增加了視覺感受效果。

精选哥伦比亚Arabicas咖啡是制造Naora的原料, 因为它是唯一可以在树上持续成熟的品种。在这个成熟过程中，Arabicas咖啡的果实密度增高颗粒变大，同时它们最大程度的吸收营养成份，使得Naora最终的芳香达到极致。設計概念應該是以高原山上的風景為主，讓我們容易投入近畫面裡面和了解Naora的原料由來。

首頁是用flash做成的，現在上面這4張圖是連著一整大張的圖片加上小小的動畫，當滑鼠往右邊移動你就可以看到新的場景，而且他們還配上了森林的自然鳥鳴的聲音。在圖片裡面紫色的格子是按鈕，當你一點它下面的紫色按鈕也會同時顯示你現在的位置。當然訂購按鈕是不可以缺乏的東西，就設計了明顯的顏色放在右下角。最下面一列就是分享按鈕區以及音響鈕，如果你想分享或不想聽到聲音就可以點它們。

點進了THE LATE HARVEST，裡面是一段短片介紹。

點進了THE AROMATIC PROFILE，出現的畫面是整頁的咖啡豆短片介紹

點進去THE COFFEE，就可以看到了新品Naora采用紫粉色胶囊包装，寓意其呈现出紫红色的野生浆果和晚采收樱桃天然风味，還有另一個產品Naora咖啡弥漫野生黑加仑和蓝莓香调。

點進去THE CHALLENGE，也是一個短片講解他們遇到的難度以及挑戰。

這個網站雖然框架不多，可是我覺得完成度已經達到了，視覺效果也表現的很精彩，讓人印象深刻以及高貴時尚。

HTML5 動態網站

網站設計目前已走向移動終端平台，估計未來的網站建設都會以HTML5為主要設計方向因為HTML5不僅是動態網站，而且又能完美結合IPAD 、 IPHONE與所有移動終端，不僅像移動終端那樣的觸摸屏的流覽方式，而且檔案小又具有動態效果，正好彌補了FLASH網站的足。

————————————————————————————————————————
什麼是 HTML5 ？
HTML5 是 HTML (HYPERTEXT MARKUP LANGUAGE 超文件標示語言) 的下一波重大改革，它新增了許多重要的功能，最主要目的是要減少網頁設計中外掛程式 (PLUG-IN-BASED) 的使用，像是 ADOBE FLASH、MICROSOFT SILVERLIGHT、APACHE PIVOT 和 SUN JAVAFX 等。
————————————————————————————————————————



我覺得這個smokey bones餐廳動態網站做的很好，簡單又完美結合了所有移動終端。
http://smokeybones.com

這是電腦版，首頁以整面大圖來吸引顧客眼光，排版是分兩欄，左邊是選單然後右邊就是餐廳資料設計。右邊做了一個SEE THE FULL MENU的格子主打Late Night Menu，讓我們可以直接點進去看。右上角是網上訂購的小按鈕，很明顯又直接想訂購就直接click進去。這個整個網站給我的感覺是走簡潔易明的路線。

平板版的時候，選單會自動縮小成簡易版，全部資料以及圖案也
會配合銀幕大小而改變。

手機版

平板以及手機的簡易選單

（電腦版）click一下menu，就可以看到餐廳裡面在賣的西式料理以及其他分類，想了解哪一個西式料理就直接click進去看就可以了。

平板版和手機版的menu就會自動變成1欄，
圖片也會自動縮小以及掩蓋來配合銀幕尺寸。

（電腦版）click進去隨便一種料理就會直接看到料理的介紹以及詳細資料。

（平板版和手機版）裡面的料理的介紹以及詳細資料排版也會自動改變來遷就銀幕尺寸。

smokey bones餐廳網站運用了這樣的手法，可見他們的消費者範圍是很廣大，消費者可以不管在任何時候都可以上網訂購或看到他們的網站，而且不會因銀幕尺寸的問題讓消費者有所困擾。

HTML5創造出了新潮流以及新技術，有一些網站讓我對他們的創意十分驚喜。

這裡還有一個網站( http://www.annasafroncik.it/ )，他也是讓我深深被HTML5的魅力征服了的原因之一。

今天要介紹我最近都會找時間上去看看的網站For Print Only在這裡大家可以看到許多設計師的作品甚至是完成品，網站裡面很清楚的介紹印刷手法，
一些市場上的印刷公司的用詞，用的材料，花多長時間生產以及價錢等等的。
http://www.underconsideration.com/fpo/


For Print Only要挑戰的是數位內容即將完全取代印刷內容的誑語。For Print Only在這個數位設計漸趨主流的時代中，提醒設計師平面設計基本功的重要，以及印刷不同於數位媒介獨有的經典、復刻質感（有趣的是，裡面的內容仍然是以數位形式呈現）。這個blog策展的內容是各方讀者提交而來的作品，只有高手中的高手才能過關。若你有能滿足極端挑剔肉眼的印刷作品，不妨交給FPO，讓它們表揚你吧！

首頁很簡單又明確的排版方式，上面也有黃色一行選區分類，你可以選以產品或產品生產手法search出你要的產品。

之後你可以看到的就是產品照片在左邊，產品資料都會在右邊，以系列性手法排版這樣讓讀者不會混亂。

點進隨便一個產品，就可以看到很詳細的介紹以及完成品的照片，全部都是以大張照片讓大家可以很詳細的看出印刷的品質，下面還有一個討論區讓大家發表意見。

網站是看起來好像很簡單，其實我認為要做出一個很有規律又整齊的網站也是很不容易，這個時候css真的發揮了他的功能，可以把一個網站控制到那麼好。