Re: [作業00] 網頁設計課前準備與基本認識

第一週須完成的任務：

1. 安裝軟體

安裝必備軟體

[hr]

1. FileZilla

免費好用的FTP軟體

https://filezilla-project.org/

FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體，內建44種語言的多國語系介面，且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外，還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式，是個相當穩定而好用的免費軟體。

安裝說明：http://blog.xuite.net/yh96301/blog/30931988-%E5%85%8D%E8%B2%BBFTP%E9%80%A3%E7%B7%9A%E8%BB%9F%E9%AB%94FileZilla+Client%E4%B8%8B%E8%BC%89%E8%88%87%E5%AE%89%E8%A3%9D

[hr]

2. Notepad++

http://notepad-plus-plus.org/

實用的免費文字編輯軟體 - Notepad++，是旅法台灣人作品，體積輕巧不佔系統記憶體，支援多分頁功能，是一套用來取代Windows記事本的工具，他的操作方式與記事本完全相同。

具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能，支援ANSI、UTF-8（支援檔首無BOM）、UCS-2...等格式的編譯及轉換，是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色，而且還有半透明視窗的效果，是撰寫程式的好幫手。

[hr]

3. Dreamweaver

視覺設計師常用的網頁設計軟體，不過不宜太依賴內建的功能，先了解網頁背後的結構與語法才是王道。

[hr]

2. 閱讀關於html、css相關書籍，建立網頁設計基本概念

請多多利用圖書館或網路資源

[hr]

3. 教學網站註冊

http://mepopedia.com/forum/register.php?851
註冊完畢後，請至右上角『設定』→『個人資訊（編輯）』至少填寫學號
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。

4. 認識瀏覽器

安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器。

http://gs.statcounter.com/

1. Internet Explorer (IE)

特色：是目前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，也因為最多人使用，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。 。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home

[hr]

2. Google Chrome

快速啟動Google Chrome 瞬間即可啟動。
迅速載入Google Chrome 的網頁載入速度飛快。
高速搜尋直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW

[hr]

3. Firefox

Mozilla Firefox是目前市占率第三名的瀏覽器，它有著豐富的擴充套件，可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版，最大的特色在於新設計的界面以及方便的網路同步功能，能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中，比前一版(28.0)更加美觀、直覺、好用
下載FireFox
http://moztw.org/

[hr]

5. 多觀摩與紀錄優良網站

1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異<
2.多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考

3.請將瀏覽過不錯及值得推薦的網站，網站名稱及網址列出，並試著說明及分析。

回覆完畢請註明學號。

範例：

[hr]
網站名稱：Foodsense食品感官
網址：http://foodsense.is/
說明：
1.符合響應式設計，為最新的網頁設計技術，符合不同的行動裝置使用。
2.風格清新簡潔，明確的表現出健康蔬食網站的氣質。

補出說明：
1.響應式網頁設計(Responsive Web Design)

[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計，這是一項被公認在2014年網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗，是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣，絕對是未來網頁設計的一個重要方向

http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design

2.其他響應式設計網站：
http://mediaqueri.es/
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/

3.其他推薦網站：
http://www.morphix.si/#portfolio
http://www.thefwa.com/



(編輯記錄)

網站名稱：TED─Ideas worth spreading
網址： http://www.ted.com/
說明：
1.聚集了世界各地的想法及創意，開放式的論壇。
2.用色極為簡潔俐落(紅、白、黑)，還有拉式選單，字體大小精心安排。

補出說明：
TED 在 2009 年開放品牌授權 (open licensing)，讓全世界有心有能力的人用 TED 的模式和在其品牌準則下，來經營一個 TED 大會。這個由會員自行策劃，TED 官方認可的會議叫做 TEDx。



網站名稱：7headlines
網址： http://www.7headlines.com/
說明：1.剪貼簿網站，有別於其他網站的格式及功能，獨樹一格的風格令人印象深刻。
2.一樣因為用色青褚、簡單、明瞭，加上功能性極佳，所以大推！！

補出說明：※使用者請注意─最好具備極佳的資訊篩選能力

1025445138 梁奕堯

網站名稱：IKEA 台灣官方網站
網址： http://www.ikea.com/tw/zh/
說明：
1.介紹他門公司所賣的商品，主要是賣家具類的商品
2.顏色以IKEA他們主要的LOGO 藍色以及黃色為主做成的網頁
3.網頁的整個設計簡單 簡潔，一目了然能讓消費者找得到想要的商品的樣子以及商品價位不會花太多的時間去找。


網站名稱：APPLE 台灣官方網站
網址： http://www.apple.com/tw/
說明：
1.主要是介紹他門公司所賣的APPLE所有的商品以及最新資訊
2.網頁的格調以簡潔大方 多以白色調為主


1025445102 邱筱惠



(編輯記錄)

網站名稱：Mercer Tavern
網址：http://mercertavern.com/
說明：
1.由方塊組成，簡單有調理，給人感覺舒適
2.響應式設計

網站名稱：Colonia Verde
網址：http://coloniaverdenyc.com/#/
說明：
1.響應式設計
2.極簡的設計，只有單一方塊，裡面有照片跟動圖，不會讓人覺得單調


1025445069 古珮儒

網站名稱：上引水產
網址：http://www.addiction.com.tw/#
說明：
1.整體豐富
2.把該店家好的東西都呈現得很完美

網站名稱：Monte Re
網址：http://www.montere.it/?lang=en
說明：
1.符合響應式設計
2.翻轉特效，讓網頁不會過於單調

網站名稱：Black house
網址：http://blackhouse.uk.com/
說明：
1.符合響應式設計
2.以白色來做文字按鈕，風格簡單乾淨


1025445072 王人永

網站名稱：huxtaburger
網址：http://www.huxtaburger.com.au/
說明：
1.符合響應式設計
2.簡單單明瞭的設計

網站名稱：lorentina-events
網址：http://www.florentina-events.com/
說明：
1.符合響應式設計
2.白色為底的清新簡單設計


1025445120

網站名稱：iKey
網址：http://www.ikey.com/
說明：
1.符合不同行動裝置使用。
2.網站的設計表達出商品的耐用性。
補充說明:iKey的是一個家族擁有和經營的產業，已經完善了優質鍵盤的設計和製造。在企業的iKey的第一年專注於製造行業，並為客戶提供了可靠的解決方案。iKey製造了世界上最完整的堅固耐用的電腦外設，包括鍵盤，指點設備，顯示器，平板電腦案件和手機配件行。

網站名稱：ホテル日航東京
網址：http://www.hnt.co.jp/
說明：
1.符合不同行動裝置使用。
2.使用白底、淡褐色邊顯得簡約、乾淨的設計風格，符合現在秋季旅遊。
3.有可直接預約訂房系統、入住服務與附近好玩景點....等 ，視覺上使閱讀者一目了然。



(編輯記錄)

網站名稱：iKey
網址：http://www.ikey.com/
說明：
1.符合不同行動裝置使用。
2.網站的設計表達出商品的耐用性。
補充說明:iKey的是一個家族擁有和經營的產業，已經完善了優質鍵盤的設計和製造。在企業的iKey的第一年專注於製造行業，並為客戶提供了可靠的解決方案。iKey製造了世界上最完整的堅固耐用的電腦外設，包括鍵盤，指點設備，顯示器，平板電腦案件和手機配件行。

網站名稱：ホテル日航東京
網址：http://www.hnt.co.jp/
說明：
1.符合不同行動裝置使用。
2.使用白底、淡褐色邊顯得簡約、乾淨的設計風格，符合現在秋季旅遊。
3.有可直接預約訂房系統、入住服務與附近好玩景點....等 ，視覺上使閱讀者一目了然。

1025445192 黃婷萱



(編輯記錄)

網站名稱：l'unita
網址：[url=http://lunita.ca/]http://lunita.ca/[/url]
說明：網站設計得很有趣，配色也很鮮艷，讓人看了很想大吃一頓


網站名稱：Tiny Footprint Coffee
網址：[url=http://www.tinyfootprintcoffee.com/story/]http://www.tinyfootprintcoffee.com/story/[/url]
說明：顏色搭配得很棒，很舒適，不影響觀看


1025445090 鍾婷玟

網站名稱：七點半的太空人
網址：http://first-launch.com/
說明：
1.由台灣的Bigcat Studio 大貓工作室 所製作的動畫<七點半的太空人>的官方網站
2.閱覽網站的方式就像在看一部動畫片，用滾輪往下滑就會像動畫一樣很順暢地播放的感覺

網站名稱：嘖嘖 zeczec
網址：http://www.zeczec.com/
說明：
1.是響應式設計的網站
2.「嘖嘖」是一個群眾集資平台，當有想完成的計畫卻需要資助者時，這個平台是很好展示計畫的地方，
若有資助者感興趣便會加入並且贊助的平台


1025445165 陳文晴

網站名稱：Dfy
網址：http://www.dfy.co.kr/#!/en/
說明：
1. 具備響應式設計，方便各種類型的瀏覽工具規格需求。
2. 風格簡單強烈搭配上該企業所要傳達的一些概念影片，讓人可以很迅速的理解。

補出說明： 此為韓國企業公司網站設計。



網站名稱：Baemin
網址：http://www.baemin.com/
說明：
1. 也具備了響應式設計，且用電腦縮放查看十分順暢。
2. 解結的白色背景設計搭配上設計成圓盤狀的實際美食拍攝，增添食慾。
3. 同時搭配上各種一目了然的手繪風格。

補出說明： 此為韓國飲食網站設計。



網站名稱：Coffeemama
網址：http://www.coffeemama.co.kr/main/main.php?ism=&OV_REFFER=http://www.krwz.com/kr/file/url/2014-4/201442221253896.htm
說明：
1. 互動式的設計概念，使網路頁面不再單調、索然無味。
2. 配色線活潑且配合符合該店氣氛的音樂。

補出說明： 如名稱可以明顯所見，為販售咖啡的網站。





1005445188 姜翊萱

網站名稱:華研國際音樂
網址: http://www.him.com.tw/forum_1.asp?fid=56398&sid=2
說明: 1.白底加上簡單的編排營造出乾淨舒服的畫面
2.畫面不會錯綜複雜 閱讀上能明確找到需要的資訊

網站名稱: 很好設計 GOOD DESIGN
網址:http://www.goods-design.com.tw/
說明:1.此網站以黑底為主 走的風格是歐洲風 呈現男仕時尚的精神
2.因為背景簡單 所以畫面上照片的顏色較為飽和搶眼 閱讀起來有凝聚力


1025445099 陳盛倫

http://www.wix.com/
1.不錯用的部落格
2.頁面樣式能自己挑選不會太單調

網站名稱：SILK
網址：http://weavesilk.com/
說明：
1.主要是繪畫網頁不需要任何繪畫技巧就可以畫出獨特的風格
2.網頁的格調多以暗色調為主襯托出科技的冰冷感

網站名稱： MRY
網址：http://mry.com/work/
說明：
1. 最主要是做一些創意、設計的網頁，整體很吸引目光
2. 設計上有不同的小細節


網站名稱：Tattly
網址：http://tattly.com/collections/all
1.設計刺青小圖的網頁，比起一般刺青圖示網頁較為不一樣。
2. 簡單具有設計感的網頁。


1005445191 陳佳雯

網站名稱：FLiPER 潮流藝文誌
網址：http://flipermag.com/
說明：
1. 進網頁第一眼就可以左右滑的方式看這次設計重點
2.網頁頁面背景為白色 整個乾淨整潔 展現每篇文章的重點



網站名稱：ㄇㄞˋ 點子靈感創意誌
網址： http://www.mydesy.com/
說明：
1.文章排列順序整齊好看 畫面整潔乾淨



網站名稱：ELLE
網址：http://www.elle.com.tw/
說明：
1. 變換大小頁面時 商品跟文章介紹都排列整齊好看
2.整體看來很清爽整潔


1025445063 洪筠真

網站名稱：LOVFEE服飾
網址：http://www.lovfee.com/
說明：
1. 版面顏色只有黑跟白，再搭配簡單的圖示及插畫，非常簡單可愛。
2. 這家店賣的衣服都是以簡單樸素為主，所以網站風格也顯現出服飾特色。



網站名稱：WooCommerce有機商店
網址：http://themeforest.net/item/-organic-shop-responsive-woocommerce-theme/full_screen_preview/2931436?ref=eastevil&ref=eastevil&clickthrough_id=269788403&redirect_back=true
說明：
1. 屬於響應式網站設計，網頁主要色以綠色白色為主色，黑色灰色做為小字搭配。
2. 網站是跟販售有機相關的商品，配色看起來明亮、清新舒適。


1025445015陳曉琪

PAZZO服飾

http://www.pazzo.com.tw/Shop/

1.運用簡單風格沒有過多的裝飾，簡單俐落呈現，以咖啡色為主色系
2.符合響應式設計，與商品販售有關，使用手機平板方便觀看!


1025445006
鄭喬薰

網站名稱：lovfee
網址：http://www.lovfee.com/
說明：
1.符合響應式設計，為最新的網頁設計技術，符合不同的行動裝置使用，並且字體清晰明瞭
2.風格清新簡潔，讓人一目了然，觀看起來很清爽
3.採用必較淡的顏色讓人看了舒適


推薦其他網站
https://www.joyce-shop.com/
http://www.gracegift.com.tw/
http://www.zara.com/tw/
http://www.lativ.com.tw/

網站名稱：Style Me Pretty Living
網址：http://www.stylemepretty.com/living/
說明：
1.符合響應式設計，符合不同的行動裝置使用。
2.設計乾淨簡潔 分類詳細 ，這個網站是把自己生活上的事物分享在上面，不管是食譜、居家、婚禮等
裡面拍攝的照片也是簡單明瞭，在看的時候不會覺得疲勞。

網站名稱：Style.com
網址：http://www.style.com/
說明：
1.符合響應式設計，符合不同的行動裝置使用。
2.以黑白為主的一個時尚設計網站，這網站的重點在於它的選單都會在於最上方，不會說還要拉到最上方
網頁編排也很像看雜誌，不會看得很乏味。

1025445054 許雅筑

網站名稱：marcjacobs
網址：http://www.marcjacobs.com/
說明：
1.符合響應式設計
2.整體版面黑色簡單突顯重點，首頁還有一些小動畫，吸睛。



網站名稱：shiner
網址：http://www.shiner.com/
說明：
1.畫面簡單，整體很豐富，每張背景圖片都會動!
2.網頁顏色營造很歡樂的氛圍，以圖片進入說明很生動。


1025445111 莊于萱

網站名稱：橙‧設計

網頁：http://www.orangedesign.com.tw/

說明：

1.是一間設計公司的網站，版面簡單舒服清晰
2.凸顯出設計公司的自有風格，顏色搭配也符合設計公司的形象。
3.響應式設計




網站名稱：星巴克

網頁：http://www.starbucks.com.tw/home/index.jspx
說明：

1.簡單的設計，符合形象，版面清晰，用大色塊來做網頁區分

1025445060 黃淯婷

網站名稱： chic
網址： http://www.chictw.com.tw/
說明：
1.聲音特效讓人印象深刻，有他們做主要的品牌。
2.點進去會有輕音樂跟乾乾淨淨的排版，看上去感覺很舒暢。
3.符合響應式設計。

網站名稱：Taiwan Design Expo
網址：http://designexpo.org.tw/
說明：
1.他們設計的設計開門，我覺得很有趣。
2.在點進去有很清楚的內容，還有旁邊可以下拉式的選項。

1025445153廖敏君

網站名稱MUGMUG
網址:http://www.smugmug.com/
說明:主要是一個漂亮的圖片網
顏色以灰黑色為背景
網頁的設計簡潔,清楚明瞭,有穩重感!!

網站名稱:JOIN ABTA
網址:http://abta.com/join-abta
說明:以藍天空為背景,給人輕鬆愉快的感覺!!
網站的設計也很乾淨,簡單

網站名稱：BeautyBay.com
網址：http://www.beautybay.com/
說明:
1.簡潔美感設計
2.上面方框相片會拖移
3.畫面一致

1025445087 陳盈君



(編輯記錄)

網站名稱：FRUCTUS.JP
網址：http://fructus.jp/
說明：
1.為響應式設計
2.頁面簡潔明瞭.色調運用柔和非常適合此網頁的產品讓人不會有負擔感
補充說明:
FRUCTUS.JP是一個販售養生食材.器具的網頁.目標是達到真實良好的生活品質.顧客族群為重視美和健康的顧客和高敏感性兒童及老人

網站名稱：sagaform
網址http://www.sagaform.com/
說明：
1.為響應式設計
2.主色調黑白灰搭配色彩鮮明的圖片讓整體很活潑
補充說明:
sagaform是一家設計公司，公司的目標是成為市場的領導者.使其產品無國界.公司的客戶群跨越所有年齡範圍和文化背景，並在全世界不斷成長，持續設計開發新產品，以滿足顧客提出的創新需求，舉凡功能性的廚房設備、晚餐服務、各種新奇的禮物等都可為顧客開發設計.不論是在倫敦的百貨公司或在紐約的小專屬設計商店許多國家都有Sagaform的設計足跡

網站名稱：cresyn
網址： http://www.cresyn.com/main.php
說明：
1.色彩鮮豔
2.隨著網頁網下滑 運用形狀與顏色的變動顯得更加有趣

網站名稱：kineticV5
網址： http://kinetic.com.sg/main.html
說明：
1.有趣的插畫風格
2.隨著網頁往下滑每頁都有不同的驚喜


1025445126宋映萱

網站名稱：Friday`s
網址：https://www.tgifridays.com/
說明：
1.符合響應式網頁設計
2. 網站整畫面放大縮小有食物跟著



網站名稱：The Restaurant: Classic Edition
網址：http://www.redfactory.nl/themes/therestaurantclassic/
說明：
1.符合響應式網頁設計
2. 排版簡單明瞭



1025445045 饒文欣

網站名稱：sweethatclub
網址：http://sweethatclub.org/
說明：
1.符合響應式設計
2.該網站是那些誰喜歡戴帽子的在線俱樂部。
3.裡面的配色跟名稱一樣 sweet 如馬卡龍的顏色。

網站名稱：forefathersgroup
網址：http://forefathersgroup.com/
說明：
1.符合響應式設計
2.有著復古風格的字體，夢幻般的手繪插畫，紋理背景，以及令人驚嘆的圖形。

1025445123 姚育慈

網站名稱：Stephen Caver
網址：http://stephencaver.com/
說明：
1.符合響應式設計 。
2.這個網站的畫面非常簡單，但卻非常有設計感，看久了還是讓人覺得很舒服。
3.配色與文字也用得非常適當，簡潔易懂，視覺效果非常耐看很棒的獨特排版風格。

網站名稱：Havoc Inspired Ltd
網址：http://havocinspired.co.uk/
說明：
1.符合響應式設計 。
2.使用了簡單的幾何形設計，顏色也是使用了較少人會用的對比配色，有獨特的設計感。
3.有淡淡的復古風格，畫面移動時會發現小小的變化，但卻非常吸引人。

1025445018 陳怡融

網站名稱:MARCO VICCI VISIT
網址：http://www.goods-design.com.tw/marcovicci/
1.是一家鞋店以黑色為底，圖片大部分為攝影照片
2.介紹很多不同男生的穿搭方式
3.首頁以single page方式帶動整體形象瀏覽，一直慢慢由滑鼠往下scroll時會發現，中間兩邊由collection及loobook慢慢滑進來，有步進效果，在使用上跟使用者有互動之小感受。瀏覽鞋款時則設計以理性為主之頁面，格狀排列回歸最佳使用經驗的設計方式。

網站名稱：SIIDCHA吾穀茶糧
網址：http://www.siidcha.com/index.php
說明：
1.是一家保留客家本味「舊食」的人情味，整體由美可特操刀品牌規劃
2.網頁以黑色為底，有日式風格，還添加了一些小插畫

王嬿婷1025445129

網站名稱：johnny's net
網址： http://www.johnnys-net.jp/
說明：
1.介紹傑尼斯事務所所有藝人的活動及專輯
2.用接近白色的顏色來當作主色，既簡潔又乾淨

網站名稱：LYLI FEI
網址：http://www.lilyfei.com/
說明：
1.台灣設計師飾品品牌
2.用動態效果來呈現自創飾品，讓預覽人更想了解

1025445147 張 郁

網站名稱 : 品墨良行
網址 : http://pinmo.com.tw/
說明 : 他們賣的東西幾乎都是自己設計的小物，而商品上的插圖也都是他們自己畫的。
所以可以感覺到這網站有童趣的感覺，而且還帶點清新舒服感。

網站名稱 : 植物生活文具
網址 : http://plain.tw/
說明 : 他們賣的是文具，所以可以感受到他的網站是帶點可愛的感覺。

1025445036 李易達

網站名稱：ㄇㄞˋ點子
網址：http://www.mydesy.com/
說明：
1.結合各種設計，包含攝影、插畫、創意商品設計，尋找靈感的時候可以從這個網站快速搜尋到自己能參考的。
2.這個網站把各個領域不同的設計清楚分類出來，有許多選擇以及新的設計商品讓人觀賞。

網站名稱：pinkoi手作商品
網址：http://www.pinkoi.com/
說明：
1.在這個網站裡所有賣的商品，都是台灣比較默默無聞的小設計師，雖然很多都沒聽過，但全都是他們手工自己做的商品，包含衣服、鞋子、速口包、皮夾、居家用品…等，全部都是設計師自己買材料製作，很多商品都是市面上買不到也沒看過的，有自己的獨特性。
2.不僅可以買設計，這個網站還會不時更新每個月所流行的商品，整個網站設計得很簡單、但是商品看起來卻都不平凡。

1025445097 陳慶芳

網站名稱：TAI CHANG COLORFUL PRESS
網址：http://www.tcpfilm.com.tw/
說明：
他是介紹材質的網站，從首頁點進去之後就會有很多小本子
，一頁一頁的翻給我們看材質

網站名稱：Gonzalves
網址：http://www.gonzelvis.com/
說明：
他要讓我們進入主頁的放事就像燈的開關鈕一樣，很有趣，
而且設計也很簡單乾淨

1025445009 蔡宜庭

網站名稱：A higher plain
網址：http://builtbybuffalo.com/work
說明：
1.響應式設計的網站
2.利用幾何的圖示來呈現


網站名稱：earsonified
網址：http://carsonified.com/
說明：
1.畫面簡單整體的顏色也很可愛活潑
2.整體的畫面也給人的感覺舒適


1025445180 謝芷寧

網站名稱 : Form Follows Function
網址 : http://fff.cmiscm.com/
說明 :被裡面的交互式效果吸引。色彩搭配很舒服！

這個網站的交互式體驗非常棒，設計形式服從功能設定，是互動式設计的體驗理念。每個都有其獨特的設計和功能。所有的設計作品都在HTML5中創建，該網站的作品精美展現在桌面和平板電腦上。
作者是一名韓國設計師。

1025445003 潘相逸



(編輯記錄)

網站名稱：RedBull

網址：http://www.redbull.com/tw/zh

說明：
1.介紹各種極限運動相關比賽報導以及最新資訊
2.整體風格融入自然，明確的表現出健康人生正面網站的性質。
3.符合響應式設計，為最新的網頁設計技術，符合全球不同的行動裝置使用。

1025445030 王泰然

網站名稱：viviennewestwood
網址：http://www.viviennewestwood-tokyo.com/top/CSfIndex.jsp
說明：
1.響應式設計
2.簡單明瞭不會過於複雜

網站名稱：citysuper
網址：http://www.citysuper.com.tw/motion.asp?siteid=100407
說明：
1.符合響應式設計
2.風格簡單乾淨

1025445177吳永婷

網站名稱：Cargo-Gallery
網址：http://cargocollective.com/
說明：
1.很多人會把自己的創作放在上面分享，是個很不錯的網站。
2.畫面簡單乾淨。


1035445051 陳薇安