Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

[作業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/



Edited 3 time(s). Last edit at 09/16/2014 08:51PM by JinJin.
(編輯記錄)

網站名稱:網頁設計- 沃德網頁設計公司( World Design )
網址:http://www.world-d.tw/
說明:
1.風格以典雅為主,灰色系為主色,明確的表現出設計的氣質。
2.字體的設計加深了設計的氣質。
3.用簡單的編排讓人看的時候覺得舒服且明瞭。

1025445073 陳冠穎

網站名稱:coffee
網址:http://www.vermontcoffeeworks.com/
說明:
1.簡單的編排的手法,方便使用者閱讀。
2.flash的應用,讓網頁多了趣味。


網站名稱:TOBI'S STORY
網址:http://tobisstory.lesavignons.com/#future
說明:
1.有趣的動畫,使網頁顯得生動活潑,讓閱讀網頁不乏悶。
2.2014 年的趨勢還有 HTML5 被廣泛使用來呈現網站不同部分的動畫。Tobi’s Story 網站就是以很棒的方式將很酷的東西作了最佳的使用,滾動距離的次標題與動畫良好的結合,是未來的趨勢。

網站名稱:Realtii
網址:http://realtii.com/
說明:
1.使用用大圖作為主視覺,只有少量的文字,放置在網頁的最頂端。
2.大面積圖像區塊已經慢慢取代滑動區塊(sliders),掌握人們的視線。

網站名稱: UIkit
網址:http://getuikit.com/
說明:
1.配色簡單只用白、黑,兩者之間的顏色都相當流行,再加入一點點的顏色作為小小的點綴。

網站名稱:Cider Co西雅圖
網址:http://www.seattlecidercompany.com/
說明:
1.將一張照片編修放在大面積圖像區域,塑造成一種仿古和質樸的感覺,以符合網站的整體風格。
2.不用側邊欄,整合所有選單、內容至網頁,只要下拉滾輪即可看見的趨勢正流行。

1025445040 王淑瑜



Edited 3 time(s). Last edit at 09/18/2014 08:20PM by MoMi.
(編輯記錄)

網站名稱:台北市素食餐廳– Su蔬食法式料理
網址:[url=http://www.su-veges.com/]http://www.su-veges.com/[/url]
說明:
1.風格典雅,頁面整潔,不會造成瀏覽者視覺上的負擔。
2.網站上有幾道料理的圖片,看起來十分漂亮、美味可口,符合蔬食法式料理視覺、味覺,以及健康的理念。

1025445133 林哲立

網站名稱:MADAME TUSSAUDS
網址:http://www.madametussauds.com/hollywood/
說明:
1.它有符合現代最新網頁設計技術,給各種不同行動裝置使用。
2.風格華麗,符合它想表達的內容。
3.背景的顏色讓文字清晰明瞭 ,文字編排分明。

1025445049



Edited 1 time(s). Last edit at 09/18/2014 09:56PM by Angelina.
(編輯記錄)

網站名稱:IDN設計雜誌
網址:http://cn.idnworld.com/
說明:
1.畫面的排版和顏色,乾淨俐落 ,閱讀容易,網頁的設計區塊清楚.
2.每期的雜誌,在圖片下方都有詳細的介紹,如果要閱讀當期的月刊,從主頁點進去即可瀏覽


網站名稱:dior
網址:http://www.dior.com/home/zh_tw
說明:

1.同樣採用響應式設計,在不同解析度下改變網頁頁面的佈局排版,
讓不同的設備都可以正常瀏覽同一網站

2.配色採用簡約的灰色白色,不使用滾輪,以滑鼠點擊想要看的區塊就可
每一個區塊都有圖片當底作為介紹相當明瞭

1025445178 張祐寧

[size=x-small]網站名稱:台東区でウェブ制作なら 株式会社LIG [リグ]
網址:http://liginc.co.jp/
說明:
1.灰白色調及簡單的排版,以利閱讀。
2.首頁以顯眼的大圖標題為頂端。
3.超級有趣的動畫,請拉到最底再按top。

網站名稱:台東区上野にあるシェアオフィス&コワーキングスペース「いいオフィス」
網址:https://iioffice.liginc.co.jp/
說明:
1.響應式設計的趨勢,為上方所介紹的設計公司所設計辦公室出租網頁。
2.以簡單的色調及排版來呈現。
3.利用大型字體及照片來傳達此網頁的主要目的。
4.網頁下拉時,利用手繪感的小動畫,感覺很有親切感。

網站名稱:Subskill Digital
網址:http://subskill.com/#/works/hsbc
說明:
1.響應式設計的趨勢
2.首頁一樣以大圖為主視覺,但是在每換一個主題,下方的內容也會跟著變化。
3.以黑白為主軸,並以點線面為主要的指標。

網站名稱:Garden
網址:http://gardenestudio.com.br/
說明:
1.響應式設計的趨勢
2.向下滑動都有不同的小動畫,以紅綠對比色呈現花園。
3.捨棄了以往的排版方式,以中間為主軸,抓住閱讀者的感官。

1025445001 蘇柔羽[/size]

網站名稱:ㄇㄞˋ MYDESY
網址:http://www.mydesy.com/
說明:
1. 以黑白色調相互搭配,簡單明瞭又有著舒適感。
2. 網站名稱是以活潑逗趣的方式呈現,有著創意又不失風趣。
3. 網站更新訊息速度很快,幾乎每天都有著不錯得設計在等著去挖掘。


網站名稱:FE'CHA
網址:http://www.fecha.tw/
說明:
1. 以白底黑字做為基底,有簡單素雅的感覺。
2. 這個網站是一個歐美服裝的網站,因為衣服的豐富顏色,以黑白基底來稱托出網站的質感。
3. 用雜誌的方式來表現,用些許的顏色來營造整個視覺,更加強多次遊覽的慾望。


1005445196 張靜怡

網站名稱:胖達咖啡輕時生活館
網址:http://www.pandahouse.com.tw/index.html
說明:
1.以簡單的黑白色來呈現整個網頁。
2.字體以黑白讓閱讀更容易。
3.品項區分得很明瞭 讓人容易找。


網站名稱:法雅 法式花園甜點
網址:http://www.fayalife.com.tw/new-products.htm
說明:
1.以典雅的紫色來呈現現整個網頁。
2.有些添加一些小插畫 讓畫面更活潑。
3.品項區分得很明瞭 讓人容易找。


網站名稱:MENU
網址:http://www.trastevere.com.tw/menu/
說明:
1.以墨綠色來呈現現整個網頁。
2.以簡單的分隔但不知格調。
3.內容分隔清楚一區一區容易找。

網站名稱:HTC
網址:http://www.htc.com/tw/
說明:
1.採用響應式設計,在不同解析度下改變網頁頁面的佈局排版, 讓不管在pc或行動裝置都可以正常瀏覽同一網站
2主網頁頁面以影像為主引導進入不同產品頁面
3.部份產品頁面有影片播放及可互動的設計
4.白色為底不複雜的頁面編排,美觀且方便操作


網站名稱:Kipling
網址:http://www.kipling.com.br/
說明:
1.一進入網站就會看到類似windows phone動態磚的動態區塊,活潑吸引人且方便觀看資訊
2.網頁頁面以白色為底搭配高明度低彩度的色塊區分區域,使頁面美觀不呆版又兼顧了舒適,配色也十分搭調品牌風格
3.有像雜誌般的標題提醒,讓頁面不會出現過多的文字
4.網頁頁面簡單適合PC也適合行動裝置只須左右滑動就能觀看全部的頁面,點選區塊面積大也方便觸控點選


網站名稱:Tokyo Skytree
網址:http://www.tokyo-skytree.jp/
說明:
1.在上下滑動頁面時會出現吉祥物跟著一起滑動,吉祥物設計可愛外在頁面滑到不同位置它也會給於指引提示的功能
2.背景會自動左右滑動讓人有身歷其境觀看夜景的感受,在頁面底部也設有可操作的按鍵控制背景的變化
3.將頁面向下滑動會發現一個很大的影像區塊,只需將頁面滑動就可以看到清楚的樓層介紹及簡介聯結,方便前往現場前能對skytree能有基本的認識

視傳2A1025445043 金家任

網站名稱:'Neb aaran do' by ネバアランド
網址:http://neverneverland-catalogue.info/
說明:
1.設計雖然很普通簡單、但風格很有個人特色
2.左方的按鈕,特別的是帳號密碼的地方不是文字敘述而是圖案;FB和twitter連結按鈕不同於別人

網站名稱:Orisinal Morning Sunshine
網址:http://www.ferryhalim.com/orisinal/
說明:
1.版面乾淨簡單

網站名稱:Pinkoi - 設計商品購物網站
網址:http://www.pinkoi.com/
說明:
1.顏色粉粉嫩嫩,版面乾淨簡單
2.小插圖讓人一目了然
3.比起別的購物網站,看起來比較舒服


1005445193 徐芯儀

1025445064
網站名稱:CCSclip
http://www.cssclip.com/
說明:我覺得他最特別的地方是座上角那個顏色軸可以調,而這網站就是照顏色來分類的,只要移動色軸就會跑出分類

網站名稱:CCS Galleries
http://www.cssmania.com/
說明: 我覺得他版面很整齊,顏色不會太過鮮豔,讓人看得很舒服;標題烈也是綠色的,讓眼睛可放鬆:也採用響應式設計
這網站裡頭有幾個網站也做得很好
http://restomeson.com/#photos 他也是採響應式設計,整體感讓網站看起來是很舒服的
http://www.gmgweb.com.au/這個網站也是,讓販賣的商品用手機也能好好閱讀:
http://humoristas.com/這個網頁 配色很單純,搭上網頁的flash效果,感覺就很可愛
這些都是使用響應式設計得好網站~~



Edited 2 time(s). Last edit at 09/23/2014 11:50PM by 枯葉.
(編輯記錄)

網站名稱:CSS Princess
網址:http://cssprincess.com/index.php
說明:
1.此網站的宗旨是: 支持與宣揚女性的網頁設計師。
2.版面的配色粉色系,帶有女孩的感覺。
3.提供了許多女性網頁設計師所設計的網頁,點進去會看到許多編排很不錯的網頁,值得推薦!


網站名稱:13 CREATIVE
網址:http://www.13creative.com/
說明:
1.整體顏色搭配讓人看了很舒服。
2.圖與文字的編排簡單明瞭,不會讓人感覺雜亂。


網站名稱:Ali Felski
網址:http://www.alifelski.com/
說明:
1.頁面有插畫的感覺,有個人風格。
2.文字大小適中,整體的視覺感佳。


1025445058 楊舒涵



Edited 1 time(s). Last edit at 09/23/2014 01:18PM by 1025445058.
(編輯記錄)

網站名稱:CSS禪意花園



Edited 2 time(s). Last edit at 05/12/2022 03:09PM by 衛生綿.
(編輯記錄)

網站名稱:Fixed Digital Agency
網址:http://fixedagency.com/
說明:
1. 顏色繽紛,吸引人
2.隨著滑鼠滾輪滾動,顏色會一層一層改變介紹出網站的特色


網站名稱:Daniel Sternlicht - Web Designer, Front End Developer
網址:http://danielsternlicht.com/
說明:
1.廣業設計師的網站,打開網頁適用遊戲的方式讓大家了解他與他的作品,很有特色令人映象深刻

網站名稱:THE (4)FOUR Solo Exhibitions @ TOKYO PATER’S Shop and Gallery
網址:http://suhama.net/the4/
說明:
1.一開始的插畫很吸引人,網頁風格很可愛
2.是4個設計師的個展和畫廊

網站名稱:Fontwalk
網址:http://www.fontwalk.de/03/
說明:
1.前衛的設計
2.會讓人不自主一直往下滾

1025445124

網站名稱:Soleil Noir
網址:http://www.soleilnoir.net/believein/#/start
說明:
1.大膽的選擇色彩搭配,順間抓住覽者的目光
2.用簡單的插畫風格表現,會把再嚴肅的話題都趣味化
3.使用了響應式設計,給予各種不相同的行動裝置去使用

網站名稱:Krystalrae
網址:http://krystalrae.com/#collection
說明:
1.以黑白兩色作為主體色,再配上單一的有色彩,使畫面能更加的強烈與突出
2.這是一家國外的衣服網站,裡面有個可以與客戶互動的換裝功能,能與客戶更加的親近
3.同樣是用了響應式設計,給予各種不相同的行動裝置去使用

1025445067視傳2A黃筱軒



Edited 2 time(s). Last edit at 09/23/2014 02:28PM by 1025445067.
(編輯記錄)

網站名稱:The Official Site of the WWE Universe | WWE.com (世界摔角娛樂官方網站)
網址:www.wwe.com
說明:(1)網頁以響應式設計,在智慧型手機上也可以明確地找到標籤。
(2)翻頁圖文方式呈現內容與文章,互動性高。
(3)網頁的主要色系皆使用LOGO的顏色(黑、白、紅),與品牌有極佳的關聯性。

1005445189趙秋瑋

網站名稱:PSGB服飾
網址:http://psgb.com.tw/
說明:
1.全網頁使用無彩色背景、彩色商品圖的方式,凸顯傷絣鮮艷的顏色計多樣的設計。
2.選項清楚大小標題位置分配得宜,方便使用者閱覽。

網站名稱:LISA精品婚紗
網址:http://www.lisa.net.tw/
說明:
1.使用新技術響應式設計,能配合閱覽者當下的裝置呈現最佳瀏覽版面。
2.主題明顯、版面乾淨容易閱覽、配色溫和粉嫩。

網站名稱:MAXMA Printing 玖印實業
網址:http://www.maxmaok.com/zh/
說明:
1.同樣使用新技術響應式設計,能配合閱覽者當下的裝置呈現最佳瀏覽版面。
2.色調偏冷有科技感,游標滑到色塊上時選項馬上滑動出來,使用點腦閱覽此網頁操作便利。


學號:1025445082

網站名稱:Design made in Germany
網址:http://www.designmadeingermany.de/
說明:
1.符合響應式網頁設計
2.簡潔灰色色調,圖片跟字體不會令人不舒服而且第一時間就可以看見他的說明
3.而點進圖片,左方由上排列到下的圖片,而文字說明在圖片的右方,不會在圖片中間夾雜著文字還要不時瞇著眼盯著
4.短片會先放在內容的正上方,寬是隨著頁面改變的大小而改變,看完之後下方左右放著圖片跟說明,感到貼心


1025445151 王仁盈

網站名稱:2014台灣設計展 Taiwan Design Expo

網址:[url=http://designexpo.org.tw/]http://designexpo.org.tw/[/url]

說明:
1.整個版面運用照片播放的方式,使人如身歷其境般
2.每張照片的滑動方式,凸顯規模的龐大
3.整個版面與選項介面都隔上半透明的漸層,使網站看起來更有質感

1025445136 劉志彥

網站名稱:網頁設計專頁

網址:http://www.eztrust.com.tw/html/works/search.aspx

說明: 1.上面擺滿書但是卻以不同的手法表現
2.有分專區這樣比較好找
3.以暗色系為主題給人有種酷酷感

網站名稱:band

網址:http://pl.cyclopaedia.net/wiki/Magazine_(band)

說明:1.背景以曲線的方式來呈現
2.給人有種神秘感
3.你要找的都放在最上面的頁面上不用一直找

網站名稱:cooL

網址:http://www.cool-style.com.tw/wd/

說明: 1.它是個雜誌網頁把所有熱門的以動圖來呈現
2.也是以暗色系為主,給人一種酷感
3.分區分得很清楚 找起來較輕鬆

1025445106

網站名稱:阿舅ㄟ牛軋糖
網址:http://59.125.95.45/~fuhrman/index.php
說明:
1.背景的顏色跟牛軋糖圖片搭配得很好,讓人一看再看。
2.字體以及字體顏色的安排,都搭配得剛剛好,不會太小也不會太大
3.利用水墨來呈現懷念的古早味。

網站名稱:穗科
網址:http://www.hoshina.com.tw/
說明:
1.有FB的連結,現在網路很發達,點進去可以看到更多的圖片,還有打卡人推薦的美食。
2.把所有的圖片製作成動畫,放在首頁很清楚地看到他賣的是什麼。
3.字體與背景搭配得剛剛好,讓人一目了然。

網站名稱:煙波大飯店
網址:http://www.lakeshore.com.tw/home.html
說明:
1.圖片的裁切分隔與動畫,讓人一目了然、簡潔舒適。
2.背景以灰白色調,不會模糊了圖片的焦點。
3.每個連結都有不同的顏色能清楚分辨。

1025445199

網站名稱:President Starbucks Coffee Corp.
網址:http://www.starbucks.com.tw/home/index.jspx
說明:
1.風格典雅簡單,看起來很舒服
2.顏色配置很舒服,很符合咖啡給人的感覺
3.排版.按鈕都很清楚,不會讓人搞不清楚要按哪個按鈕

網站名稱:lowdi
網址:http://lowdi.com/
說明:
1.顏色配置很協調,看了感覺很繽紛
2.排版乾淨俐落,圖片一目瞭然


1025445079葉書羽

網站名稱: Build a Wedsite
網址:https://www.squarespace.com/#stores
說明:
1.首頁以3C產品做為顯眼的主題,左右點擊雖然背景變了,但是中間還是維持一個螢幕樣子,相當有趣。
2.點擊GET STARTED進去到的另個頁面設計的雖然很簡約,但顏色和編排讓人看得很舒適。


網站名稱: SWAN DESIGN STUDIO
網址:http://wearetheswan.com/
說明:
1.以碩大的日期抓住了觀賞者的目光,滑鼠滾輪往下還可以觀賞這間工作室曾接過的案子,是個很獨特的設計。
2.雖然這網頁顏色的飽和度偏低,但卻不影響整個網站的設計。
3.分別點擊進去後,還可以個別看這些案子的詳細資訊,可以讓人更進一步瞭解這些資訊。


網站名稱: Sagmeister&Walsh
網址:http://www.sagmeisterwalsh.com/
說明:
1.首頁的畫面雖然是一張照片,但仔細一看照片裡地板上的字全是連結,感覺很不錯。
2.網站裡面以很簡單的黑白兩色做了設計,不會讓畫面感覺亂亂的。
3.文字和圖片的一些相關資訊,用一排排的方式來做為編排,有種井然有序的味道。


1025445070 邱薏如

網站名稱:Apple

網址:http://www.apple.com/tw/

說明:

1 風格簡單俐落,看起來舒適大方
2 配色以白色為主搭配一些灰色,高貴又單純
3 畫面排列簡單不混亂,方便讀者找尋想要的東西


1025443064

網站名稱:Remixtaipei
網址:http://www.remixtaipei.com/#home
說明:
1.風格以低調黑白灰色系為主色,設計的很有自己的時尚特色。
2.網頁的風格滑鼠滾輪向下滾動就能把所有網頁裡的頁面看完非常的方便。
3.商品介紹的方法也很特別,採用上下退場的方式讓下個商品出現,很有吸引力

1025461015

網站名稱:Dmig 5
網址:http://www.designmadeingermany.de/magazin/5/
說明:
1.一開始的畫面是黑白灰色調相互搭配,簡單畫面風趣,隨著用戶往下拉而開始出現blog彩色之圖片。
2.運用了半透明效果,背景隨著用戶滑鼠滾輪向下滾動而改變畫面,了解一開始畫面圖案的意義。



網站名稱:One Bit Increment
網址:http://www.onebitincrement.com/#/home
說明:
1.整個畫面所呈現的景物都是用剪紙手工做成的,可以看出細膩度。
2.這是一個 Flash 遊戲式的網站,畫面做成遊戲闖關的方式,讓人會想再停留在這網站。
3.版面看起來很自在,有種身在其境的感覺。



網站名稱:Google App Galaxy 使用指南
網址:http://www.guidetotheappgalaxy.com/#/developersguide/
說明:
1.畫面一開始游標就是在下方,利用游標往上或方向鍵之移動,像遊戲一般,從地球到外太空,每一站都有不同的感受。
2.內容除了介紹app,還可因不同的app軟體,變換不同的火箭,相當有趣,並且吸引人注意。
3.整個版面配置相當有程序,內容也分析得很清楚。


1025445046

網站名稱:Yilan美食生活玩家
網址: http://www.yilan.com.tw/html/
說明:
1.        符合現代人的需求以及流暢的網頁導覽.
2.        簡潔的介面表達出遊客們的需求

1025445109田家翎

網站名稱:360° Langstrasse Zürich
網址:http://www.viabusstop.com/museum.html
說明:
1採第一人稱的角度呈現畫面外,程式在Loading圖片也是相當流暢。
2.試著把畫面捲到任一個場景上,然後停下來幾秒鐘,留意看看有什麼特殊之處?
他把動態模糊帶到畫面上了,既不突兀也能讓畫面多了預留讀取的時間。
[img]http://1.bp.blogspot.com/-mz3k59yKCbg/To3azKbZ8kI/AAAAAAAAAQs/Rlhap4Mz_7U/s1600/viabusstop.jpg[/img]

網站名稱:New Zealand 100% Pure
網址:http://www.newzealand.com/int/
說明:採上下捲動的方式,右方的Google Map也會同步定位。
[img]http://4.bp.blogspot.com/-zX_v6rfJkhw/To3aNLjQ1bI/AAAAAAAAAQk/AOA1KUSl6kM/s1600/newzealand_pure.jpg[/img]

網站名稱:C.C.I教育學院形像入口網站
網址:http://www.cciedu.com.tw/
說明:以獨立特有的復刻風格完成設計;右邊旋轉式選項,好比來到懷舊理容店門口的旋轉招牌,現代科技融入懷舊交錯光影的巧思創造出 C.C.I 教育學院特有的風格。
[img]http://www.iknow.com.tw/web_photo/cci.jpg[/img]

網站名稱:tinke
網址:http://www.zensorium.com/tinke/
說明:以拉動的方式順便介紹產品的使用方式,讓整個網業很順暢的往下進行閱讀
又不必額外點產品說明就可以看到所有該知道的資訊。
[img]https://blog.kissmetrics.com/wp-content/uploads/2012/10/tinke.jpg[/img]



Edited 1 time(s). Last edit at 09/24/2014 12:36AM by nightsky18.
(編輯記錄)

網站名稱:嗶哩嗶哩
網址:http://www.bilibili.com/
說明:
1.分類一目了然,能直接點進自己想看的專區
2,.首頁每天根據點擊率改變推薦視頻,沒事逛逛的時候也可能發現自己感興趣的東西
3.簡潔的設計讓人們能專注看視頻

1025445223 王芷漪

網站名稱:HELLO MAY
網址:http://hellomay.com.au/contact/
說明:這是一家婚紗公司的網頁,白底,頁面很清新,顏色以淡色粉色調為主,給人唯美溫馨的感覺。

1025445148

網站名稱:日月潭五船民宿
網址:http://www.5boat.com.tw/
說明:
這是一家民宿的網站,不但有多語言支援,項目分類清楚找尋容易,該有的資訊整理的井井有條,頁面簡單明瞭以親近自然為主題設計簡單大方。


1025445139 呂鍰慈

網站名稱:Daily Bear
網址:http://www.jaredrippy.com/dont-be-a-bear/

說明:
1.符合響應式設計,為最新的網頁設計技術
2.編排簡單 每一張圖經過都有創作日期

補充說明:這個設計師很酷 他每天都畫一張熊 但是熊的風格卻都不一樣 所以我覺得他很厲害

1025445130 楊淯婷

網站名稱: 優衣庫官方網站
網址: http://www.uniqlo.com/tw/
說明:
1.分類清楚,容易找到自己的需求
2.重點商品或特價商品有用跑動方式讓人更注意到
3.排版簡單 一目了然

1025445076 葉珈妤

網站名稱:MEL KMDEL

網址:http://melkadel.com/
說明:
1. 以插畫邊修在大面積上,風格清新簡潔。
2.按左右鍵及可切換圖片,會有小動畫的標題浮現。
3.點圖片就可以查看詳細的資料,這個網站很特別一般的網站都從上看到下,而這個網頁是由左到右。

網站名稱:heather sloane illurtnation

網址:http://heathersloane.com/#/ministry-of-stories/
說明:
1. 是個手繪風格的網頁,字邊排在左上角,圖編排在右下角,很簡潔的排版方式。
2.網站下方有需多圖片連結,可以方便大家查看相關的內容。
3.圖片的擺放方式是以一張有邊的插畫和一張無邊的插畫穿插而成的。

網站名稱:à la sha官網
網址:http://alasha.com.tw/news.php?s=111

說明: 裡面是可愛的繪畫風格
指標明確,簡單
還有阿財的可愛動畫


網站名稱:etude house台灣網頁官網
網址:http://www.etudehouse.com.tw/

說明:粉紅色的夢幻,給人溫馨的感覺
就是女孩美妝的店
標示明確清楚,資訊豐富
還有一些小巧思

1025445169視傳2A古佳綺

網站名稱:宜蘭民宿水岸森林
網址:http://www.river-forest.com.tw/
說明:
1.頁面開頭動畫很精緻也介紹清楚
2.字體大小適中,排版也讓人看了相當舒適
3.以白色、藍色為基調,很符合水岸森林的感覺

網站名稱:I love Stage I 台灣
網址:http://www.ilovestage.com.tw/news.php
說明:
1.簡單的使用黑白配色,卻讓網頁變得相當有質感
2.當游標移到選項時的動畫雖然不起眼,卻十分精緻
3.東西標名清楚,不會讓畫面變得太複雜

視傳二A 1025445175 張怡萱

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

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

1025445097 陳慶芳

網站名稱:vimeo
網址:https://vimeo.com/
說明:
1.觀看,上傳和分享視頻
2.簡潔明瞭 色彩鮮艷 有吸引力
會讓人想把連結網址都按進去觀賞

網站名稱:SXSW 藝術季 2011 的 BeerCamp 活動網站
網址:http://2011.beercamp.com/
說明:
1.乍看之下好像沒有什麼特別,但要實際點進去滾動滑鼠滾輪,才會發現它的設計精巧之處
2.也可以直接按上面的標籤來看到重點,相當特別的一個網站

1025445160吳羽筑

網站名稱:ZZZ飲料網站
網址:http://zzz.drinkzzz.com/
說明:
1.國外的飲料互動網站,風格很簡約,每個點擊選項都很有趣。
2.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。

網站名稱:白兔餐廳
網址:http://www.thewhiterabbit.com.sg/
說明:
1.打開這個網頁就像打開一本童話故事書,每一頁都有小驚奇。
2.隱藏式的小標籤,當游標滑過去時,就可以連結到們的相關網頁。
3..符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。

學號 1025445187

網站名稱:lativ
網址:http://www.lativ.com.tw/
說明:
1.畫面的排版和簡單設計 排版工整 簡單明瞭
2.從主頁點進去就可以清楚的了解到商品的資訊


網站名稱:zara
網址:http://www.zara.com/
說明:
1.網頁的配色很有時尚感 讓看的人覺得自己會想要購買
2.點進去GO之後 已產品照片為背景很有ZARA獨特的風格


1025445103 張秀安

網站名稱:無印良品
網址:http://www.muji.com/tw/
說明:1.設計很簡單明瞭
2.清晰品質好
網站名稱:7-11
網址:http://www.7-11.com.tw/
說明:1.簡單的3色橘.綠.紅
2.logo讓人印象深刻

1025445181 徐鄀凡

網站名稱:Apple-iPhone
網址:https://www.apple.com/tw/iphone/
說明:
1.以簡單的素色調來做呈現(偏向冷色系),看似普通卻不失質感,整體感看起來非常舒適。
2.網站定位明確,明確的服務項目及公司簡介,讓需求者一目了然,構動線清晰明朗。
3.多用了一些小特效來產生畫面質感,與互動感。

網站名稱:文化部兒童文化館
網址:http://children.moc.gov.tw/
說明:

1. 用生動活潑的動畫作開場,讓小朋友一看到就喜歡,以繽紛的色調及排版來呈現,既可愛又有趣味性。
2.一進入網頁就有明顯的故事跑馬燈可以選擇,區分清楚,不易混淆。
3.整個網頁都很動態,有互動的效果,可清楚知道是為兒童設計的網頁

1025445085 楊婷淵

網站名稱: 網頁設計-藝誠網頁設計公司
網站網址: http://www.eztrust.com.tw/
說明: 雖然這網站讓人感受,不像其他網站般的簡單易解,但因他的色票豐富多姿,又能提供許多的資訊,如網頁設計、網站建置、網路行銷、及網站租用平台等相關服務,因此而推薦。

視傳二a1025445214蘇子玲

網站名稱:YOUTUBE
網址:https://www.youtube.com/
說明:
1.整個網頁一目了然,感淨利落,利用白底來顯現出影片的主題性
2.排版方面適合一般大眾閱覽

網站名稱:台北薇閣
網址:http://www.we-go.com.tw/index.aspx
說明:
1.字體用了鑽石的造型,而字體是從左邊滑出來
2.整個版面都是走暗色調,感覺高尚,精緻



1025445163 曾國鼎

網站名稱:中華平面設計協會專屬網站
網址:http://www.tgda.org.tw/menu.asp
說明:
1.整個網頁一目了然,感淨利落,利用白底來顯現出內文的主題性。
2.灰白紅色調及簡單的排版,以利閱讀。

網站名稱:Facebook
網址:https://www.facebook.com/
說明:
1.以白底藍框作為基本色,不失風格,以及極高的辨識度。
2.畫面排列簡單不混亂,方便使用者找尋想要的東西 。

1025445052 鄭博宇