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

Advanced

Re: [作業04]網頁排版設計 -以Photoshop製作Mockup與Prototype

1. 網頁美感排版設計參考講義


請參考[講義] 網頁美感排版設計:http://mepopedia.com/forum/read.php?804,75770


[講義] 網頁設計的美學原則:http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型:http://mepopedia.com/forum/read.php?804,43354

[hr]

2. 設計目的


1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧

3. 設計主題


1.請選擇一需要修改的網站,並列出需要修改的原因
2.蒐集優良參考範例,並提出修改方案
3.以photoshop製作:
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁,文章頁或活動頁等)


[hr]

4. 製作步驟


1.請分析欲製作主題網站風格與元素,並加以整理。
2.搜尋相關資料及網站,參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象,截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊,重新以photoshop設計,包含標題文字、圖片、色彩。
6.將製作好之圖檔,置入dreamweaver,製作連結提案模擬
7.存成html,並上傳至FTP,於hw05中

8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案PSD及JPG
上傳至Adobe Creative Cloud

6.上傳
(1)首頁,(2)滑鼠移過的效果,(3)進入後的至少其中一子頁。
並請回覆:

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445XXX

(1)網站網站網址及主題:
(2)參考網站網址與網站名稱:
(3)色彩計畫:
(4)風格特色:
(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:


[hr]

5. 注意事項


1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主,一般設定建議以微軟正黑為主,較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示,[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業,逾期不後。

[hr]

6. Adobe Creative Cloud


請至http://www.adobe.com/tw/
註冊帳號

將完成的檔案PSD及JPG
上傳至Adobe Creative Cloud

體驗雲端共享PSD的便利。

[hr]

7. 作業繳交


1.將製作好之圖檔,置入dreamweaver,製作連結提案模擬,上傳網址為
http://mepopedia.com/~css105-2c/hw05/hw05-1045445XXX


2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案PSD及JPG,上傳至Adobe Creative Cloud


[hr]
以Photoshop製作網頁版型Mockup與Prototype
範例:http://mepopedia.com/~jinjin/TaiwanMuseum/

作業參考
(1)
(1)原網站名稱及網址: 高雄市教育部網站-英文版
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱: OK-Studios http://www.ok-studios.de/home/

(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址:http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱: http://www.organic-restaurant.com.tw/

(3)
作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址:http://www.taiwancoffee.org/index.asp

(4)
作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址:http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱: http://www.devildessert.com/


作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題:中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱:http://www.u-tokyo.ac.jp/en/index.html


作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題: 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱: 歐嬤德式美食 http://www.oma-de.com/

[hr]

8. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

截圖軟體
Awesome Screenshot


[hr]



Edited 4 time(s). Last edit at 04/10/2017 12:19AM by JinJin.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445117/

(1)不優良網站名稱及網址:花世界花店/http://www.fasuje.com.tw/520new/new-(1).htm

欲修改地方:一時說不上來...有許多地方需要進行統合,因配色較為大膽,整體稍顯雜亂
●網頁無明顯主視覺及主配色,顯得沒有主題,可加以整合。
●網頁整體偏左,可調整置中,較為平衡。
●導覽列顏色可重新統整,或用相近色彩做成延續的概念,較有一致性。
●超連結底線可清除,字體較美觀。
●商品介紹頁面顏色可統一,不同列商品可分明的更詳細,或使用一頁式,分門別類逐步
展開。
●商品介紹頁面可直接使用圖片超連結,文字超連結可不用重複。
●商品圖片可統一尺寸,以免畫面雜亂。
●頑皮豹、多啦A夢以及跳跳小女人可以擇一,甚至發展屬於網頁本身的象徵物(吉祥物)。
●連絡我們及留言板可獨立一個版面,較為明顯。
●整體需有一個主配色,不同頁面色彩可因應不同商品而有所變化。

(2)優良網站名稱及網址:

薰衣草森林/http://www.lavendercottage.com.tw/

●有個明確的主色系,整體色彩圍繞在薰衣草紫,畫面清新。
●畫面逐步引導觀看,清晰明瞭。
●曲線形導覽列搭配小動畫增添畫面活潑性,營造隨興自然的感覺。

花寶愛花園(協和園藝)/http://shop.igarden.com.tw/

●商品導覽列皆於上方,以至於左右側乾淨清爽,也方便及時點選相關連結。
●以一頁式做為網頁板型,瀏覽順暢。
●當季熱門花卉主題使用大圖及文字排版,並連結到相關頁面,主題明確,並增添季節
感,使網頁色彩豐富。

頂戴格拉斯-清境民宿/http://www.dingdai.com.tw/about/

●導覽列隨時保持在上方位置,可隨時點閱其他連結。
●使用幻燈片效果介紹環境,可套用在當季花卉商品中,清楚了解近況優惠商品資訊。



Edited 11 time(s). Last edit at 04/13/2017 11:18AM by 松本.豪.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445036/index.html
[u](目前只有會員登入跟臉書IG連結可以點而已sad smiley
[/u]


1.須修改網站:http://www.ijysheng.com.tw/index.php

*配色稍亂,太多種顏色,也不相似,不統一
*滑鼠移到導覽列上沒有分類可以選,要點進去到左邊才有可以選,不方便
*背景那朵花雖然是logo,but真的很礙眼angry smiley
*底下營業據點那個框框沒設好,整個字跑掉跑出來
*整體配色不平均,過亮,眼睛會不舒服eye popping smiley
*我不懂為什麼Footer要有一條粉色的線在中間sad smiley
*top可以用滑動比較舒服


2.優良網站名稱及網址: http://www.kakiyama.com/

*雖然是日文網站,但我可以知道她明確分類類別
*導覽列整齊且分類齊全,方便又好找
*配色舒服不刺激grinning smiley
*產品推銷的主題明確,產品也很清楚明瞭



Edited 2 time(s). Last edit at 06/15/2017 02:26AM by Peiwei.
(編輯記錄)

1.須修改網站 : http://www.superdelivery.com/en/
修改地方:
有點雜亂
東西太擠
導覽列字有點小

2.優良網站名稱及網址:https://us.benetton.com/
畫面乾淨整潔
標示清楚
很快找到想看的

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445162

1.請選擇需要修改的網站:http://crystalpalace.poempalace.org/big5/index.htm
>>修改原因
▲整個頁面偏左,視覺整體來說不好看。
▲主頁標題不明確,太白。
▲左邊導覽列配置太多太雜,也沒有設定一個舒適的間距,圖片跟文字擠在一起。
▲內文跟導覽列字體大小沒有做出明顯區隔。
▲一開始會注意到這個網站是想找花語,結果跳回主頁後找不到回去花語部分的分頁→導覽列標示及分頁錯綜雜亂。
▲內文圖片大小不一、顏色配置不舒服、文字連結沒有做其他設計、說明文太小和不統一。
▲底下空了很大一格白色部分→放贊助廣告?
▲footer又放了一些連結,讓人暈頭轉向。
▲版面自己認為整個網頁太白、很空洞,如果是有設計風格的就算了但、嗯(?

2.蒐集優良參考範例,並提出修改方案
雖然他最主要是介紹很多珠寶首飾的網站,但還是希望不要顯得太過俗氣。
>>優良網站

△ http://ollymoss.com/ △
▲想取用他圖片配置的擺法,可能點進去圖片裡就是跳進另一個分頁做商品的詳細介紹,不需要再主頁多打說明文字;或是只在圖片下方打小小的三~五字的小標。
▲整體滿版也不錯,省去設計底圖或填色,俐落大方、尤其當商品很五顏六色的時候。

△ http://bito.tv/ △
▲頂端導覽列主標的放置,雖然原網站沒LOGO,但可以把頂端的頂圖拿來用一下吧XD

△ http://www.fashionwaltz.com/?p=33332 △
▲導覽列的下拉式導覽列,可以套用在很多很雜需要再行小分類的網站,點擊圖片進入連結跟上方下拉式導覽列的方式我覺得都可行!
▲廣告的部分覺得可以在最右邊留小空間作贊助畫面。
▲旁邊的TOP鍵

△ http://aaroncampbell.ca/ △
▲最下方的JavaScript跟瀏覽方式我覺得也不錯,像河道瀏覽的方式也想嘗試看看><!



Edited 1 time(s). Last edit at 06/09/2017 08:40PM by j29927381.
(編輯記錄)

1.須修改網站:http://www.boss33.com/
修改地方:
●廣告太多太雜,沒有統一性
●廣告地方顏色都太鮮明,使眼睛看了很吃力
●首頁沒有重點
●編排字太小
●沒有主視覺以及只要配色
●圖片的地方沒有統一性

2.優良網站名稱及網址:
http://www.elle.com.tw/
可以參考導覽列,簡單明瞭一下就抓到重點
整理畫面乾淨不雜亂,字的大小也很剛好

http://www.gq.com.tw/gqtv/cover/index.asp?iPage=4
廣告通一在右邊,不會跟內文打到

1.須修改網站:http://www.cakeking.com.tw/front/bin/ptlist.phtml?Category=259257
修改地方:
●圖示雜亂,看了眼花繚亂
●沒有統一性
●沒有設計感,視覺看起來不舒服
●顏色太過豐富,沒有一個主要色調
●可以放上店裡LOGO,而不是毫無設計過的字體
●首頁看起來只是把圖片丟上去,圖片大小也不一
●首頁動圖太多,讓眼睛很花
●圖片不夠精美

2.優良網站名稱及網址:
http://www.louisacoffee.com.tw/club_show1
●畫面乾淨簡約,看了很舒服
●有統一性,也有主要配色
●可參考首頁,很有設計感

http://www.chizup.com/collections/cheesecake
●左邊導覽簡單明瞭可參考
●圖片精美

1.須修改網站:https://www.sugar.com.tw/tw/product/category-1
修改地方:
●配色有點問題
● 字形不好看
●導覽烈可以做得有質感一點


2.優良網站名稱及網址:
http://www.grasshill.net/contact/contact.html
●清楚明瞭。
●簡單配色,有一致性。


http://www.beautimode.com/
●圖片導覽清晰明瞭
●劃分簡單



Edited 1 time(s). Last edit at 04/12/2017 07:19PM by 1045445102.
(編輯記錄)

1.須修改網站 : http://event.ezfly.com/outbound/japan/okinawa/
圖檔太多,讓人感覺很雜亂。

2.優良網站名稱及網址:http://www.calvinklein.com/tw/?gclid=COn8n6qXstMCFUiAvQodiegETQ
標示清楚,若要找商品能一目瞭然。

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445189/

1.須修改網站: http://www.adasoap.com.tw/
我覺得這個網站其實很漂亮,不過我想給它一種新的感覺,所以我參考了日本的網站,想讓它更有職人的效果。
2.優良網站名稱及網址:
http://japan-leather-pride.com/#top
色彩計畫:底圖是淡淡的藍色、字的話是比較深的藍綠色,圖的彩度沒有那麼高、帶有質感
風格特色:因為有比較多的留白,圖也是有修改過的所以帶有職人造物的感覺
3.製作心得:
這次總共有16個檔案,好多喔!不過看起來真的很像一個網頁呢



Edited 1 time(s). Last edit at 04/13/2017 11:18AM by 1045445189.
(編輯記錄)

(1)不優良網站名稱及網址:https://websitesfromhell.net/add/

欲修改地方:
●網頁主視覺及主配色不搭
●網頁整體較為混亂
●導覽列顏色沒有一致性。
●超連結設置圖片使人不舒服
●分門別類的方式過於花俏展開。
●商品介紹文字過多,可不用重複。

(2)優良網站名稱及網址:

pixiv http://www.pixiv.net/

●主色系令人舒服,整體色彩分為清新。
●畫面資訊清晰明瞭。
●設置貼心,經營得相當便利。

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445212/profile.html

1.須修改網站:

2.優良網站名稱及網址:
http://www.meierq.com/
色彩計畫:底圖是白色、字的話是比較較淺的顏色,
風格特色:整個排版很有質感,色系也以淡為主
3.製作心得:
這次做了三頁,只覺得用ps很麻煩



Edited 1 time(s). Last edit at 04/13/2017 12:05PM by 1045445212.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445033/hw04-1045445033.html

1.須修改網站:http://www.dark.com.tw/page.aspx?id=1
修改地方:
●東西雖然棒,但版面大大降低質感
●字體稍微有點大,看起來很吃力
●首頁讓人感覺雜亂...
●整體看不到統一性....
●太直白,有點強迫堆銷的感覺,讓人有些畏懼
●最後...其實圖片拍的還不賴XD

2.優良網站名稱及網址:
http://www.diehlgroup.com/
風格明確,時尚不失格調,讓人覺得有點帥XD基本都以幾何以及線條表現,非常的乾淨不多餘。

https://www.kentisburygrange.com/
個人都偏愛這種的,各個不分明確且優美,簡單歸簡單的版型卻給人龐大的吸引力。

https://www.designweekportland.com/#
這款讓人感覺有點點夢幻,很有意思的沒有主色調,這樣不論甚麼圖放上都不會讓人覺得排斥,十分有意思。

https://www.wallercreek.org/about/
【清新自然】這4個字幾乎就代表了他的全部,這是在我選的網站之中最平凡的,但不是很差的那種,一種麻雀雖小五臟俱全非常有內涵的網站。



Edited 2 time(s). Last edit at 06/14/2017 12:54AM by Hus,Ching-Chiech.
(編輯記錄)

1.須修改網站 : http://shopping.pchome.com.tw/index/
修改地方:
非常雜亂
看到最後會眼睛疲勞
有些地方字有點小

2.優良網站名稱及網址:https://moba.garena.tw/
畫面很有震撼力
高畫質看了很舒服
標題大又明顯

作業網址: http://mepopedia.com/~css105-2c/hw04/hw04-1045445135


1.須修改網站:http://www.koreapalace.com.tw/main.php

感覺整體上的感覺普通 文字的配色不怎麼好

有一些細節需要加強

希望編排樣式可以更好

2.優良網站名稱及網址: http://www.homiecafe.com/

logo設計得很精美 整體看起來好看

排版簡單不會雜亂 令人感覺食物好吃

顏色不錯



Edited 4 time(s). Last edit at 06/15/2017 03:16AM by 廖芳如.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445015



1.須修改網站:https://tw.creema.net/listing/332
版面設計的配置 有做分類 但整體看起來少許的雜亂
希望可以更簡單 舒適的閱讀
也會使消費著比較容易賞析。

2.優良網站名稱及網址: http://www.foodandcompany.co.jp/events/

這是日本的網站 想說參考不同國家的設計來做
以發想~

整體編排讓人閱讀起來很舒適
顏色配色也覺得很文青

看起來也不會很擁擠
雖然我覺得他內頁的文字小了點 但整體的設計感我覺得還不錯!

3.製作心得:
這次在PS做圖層真的超多的! 不過做完會很有成就感 也看起來是一個網頁了呢~~~~!!!



Edited 3 time(s). Last edit at 06/11/2017 01:26PM by 王宜雯.
(編輯記錄)

需修改網站:http://tianzicake.com/
◎沒有甚麼設計感
◎產品介紹照片拍得很好看,可是沒有吸引人買的感覺
◎整個版面偏左,可是footer又偏右

優良網站名稱及網址:https://maremare.jp/
◎設計得很可愛
◎商品的排版價格排的很清新
◎就算不懂日文也因為大多是圖片,很清楚明瞭

需修改網站:http://www.ukiyoeproject.com/
色彩計畫需要好好調整一番啊,上面一排感覺太繽紛不適合
圖片像跑馬燈一樣一直跑讓人很躁鬱呢,還是只有我是這樣
下方資訊及外部連結稍嫌擁擠

優良網站名稱及網址:http://tf-corp.co.jp/hiiki
操作及效果都很流暢
資訊清楚
看完真的餓
很餓

1.須修改網站 : http://www.kfcclub.com.tw/
修改地方:
左側導覽列下面太空
2.優良網站名稱及網址:http://www.pizzahut.com.tw/
導覽列很清楚
顏色讓人看了很有食慾

1.須修改網站:https://www.slsmusic.net/home
一、照片拍得不錯但太複雜影響內文。
二、有些背景是白色同時內文字也是白色,字體太細易讀性差,嚴重影響閱讀。
三、連結的圖片只是單純排列有甚麼就放甚麼,沒有設計感。



2.優良網站名稱及網址: https://www.kkbox.com/tw/tc/index.html

一、網頁構造和須修改的網站類似很適合改良。
二、排版乾淨整潔,資訊清楚,簡潔有力。
三、字體選用合適,粗細適中,易讀性高。
四、下拉的過程中頁面會跟著做些動作,增加了點趣味性。

http://mepopedia.com/~css105-2c/hw04/hw04-1045445042/index.html
1.須修改網站: http://www.uniqlo.com/tw/

整體排版較為普通,色調較為生硬,個人不是很喜歡。
但是整體來說看起來還是舒適的!


2.優良網站網址:https://www.pinkoi.com/

這是一個原創設計品牌的網站,裡面除了商品也有關於設計的資訊。
整體色調舒適,排版清晰明瞭,也不會太壅擠。



Edited 3 time(s). Last edit at 06/15/2017 11:30AM by 1045445042.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445138


1.須修改網站:http://www.ijysheng.com.tw/index.php
雖然是博物館網站但是看起來
很廉價
很古板
很沒質感
有種過時感
排版很無趣、普通、無聊


2.優良網站名稱及網址: http://www.louvre.fr/
同業是博物館的網站,但排版較有質感
配色乾淨純粹





(1)網站網站網址及主題:故宮博物院
(2)參考網站網址與網站名稱: Musée du Louvre
(3)色彩計畫: 黑色、妃色、艾綠
(4)風格特色: 以黑色為主,配上中國傳統色,想營造低調又能襯托中國古文物價值精神的感覺
(5)製作心得: 排版要多練習,排得有點醜但又不知道能改哪裡

1.須修改網站 : http://www.mk2000.com.tw/product.php?tb=1&cid=5
修改地方:
一. 排版雜亂
二. 資訊不清晰

2.優良網站名稱及網址:https://shop.thesecretcake.com.tw/
一. 主題鮮明
二. 配色搶眼好看
三. 有搜尋功能
四. 字型整齊



Edited 3 time(s). Last edit at 05/23/2017 10:01PM by 1045445174.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445186

(1)不優良網站名稱及網址:https://fruits.wwww.com.tw/

欲修改地方:
●網頁主視覺及主配色搭配太統一
●網頁整體較為複雜
●導覽列顏色沒有一致性。
●超連結設置圖片使人不舒服
●分類的方式過於凌亂。


(2)優良網站名稱及網址:

http://www.wix.com/website-template/view/html/1585?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fphotography%2F1&bookName=create-master-new&galleryDocIndex=11&category=photography&metaSiteId=

●簡單明瞭,導覽列清楚,圖片清晰明瞭。



Edited 3 time(s). Last edit at 06/14/2017 12:20AM by loveelise1021.
(編輯記錄)

一.須修改網站:https://tw.bid.yahoo.com/

1.整體網站視覺上畫面太雜亂缺乏統一性
2.廣告太多會影響到內容的閱讀
3.文字顏色太多太雜亂


二.優良網站名稱及網址: https://kygolife.com/

1.整體顏色統一看起來比較舒適協調
2.導覽列規畫得很清楚明瞭
3.有互動式的按鈕感覺蠻有趣的

1.須修改網站 :http://iguang.tw/

>沒有統一性
>沒有設計感,視覺看起來不舒服
>網頁整體較為混亂
>分門別類的方式過於花俏展開


2.優良網站名稱及網址:http://tw.istayreal.com/

>以低調色系的背景來襯托出色彩繽紛的圖案


http://www.elenakalisphoto.com/

>主色調以白色與藍色為主,呈現出慵懶具有孤獨設計感的味道

1.須修改網站:https://momoco.me/momocoshopping/

● 雖然說是懶人包,但太長了吧!!!我拉的好辛苦滑的也好辛苦啊!
圖片跟文字之間的排版也看得很吃力...


2.優良網站名稱及網址: http://www.stunden.org/category/portfolios/

● 我自己滿喜歡的一個網站,看起來簡潔,要找圖的話也好找。
一眼看過去就知道每個畫家的風格差異。
因為是繪圖的網站,我覺得簡單是最好的,
因為如果網站花俏、顏色複雜多樣的話,跟畫搭在一起會顯得很亂。
所以我覺得他設計得不錯,不會搶掉彼此的風采。

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445009


1.須修改網站網址:
http://www.decor99.com/catalog/index.php?cPath=396_205&gclid=CjwKEAjwgtTJBRDRmd6ZtLrGyxwSJAA7Fy-hAKGBJ4iCeTD5Lx_ZvoocwKCiT6jtbGaA6SezrvURERoCSEzw_wcB
*一個版面東西放太多太雜
*文字太多太小眼睛痛
*版面整體的感覺太擠
*版面太長觀看不便

2.優良網站名稱及網址: http://www.lovfee.com/
*能清楚的看到他想要告訴觀眾的主題
*導覽列整齊且分類齊全
*版面配置較不會搞人壓迫感
*產品推銷的主題明確,產品也很清楚明瞭
*他有top,方便瀏覽,較好操作

(6)製作心得:



Edited 1 time(s). Last edit at 06/08/2017 08:41AM by 1045445009.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445030

1.須修改網站:https://www.sugar.com.tw/tw/product/category-1
修改地方:
●畫面簡單但不好看沒有設計感
●沒有主要LOGO
●首頁看起來只是把圖片放上去
●字型挑選不佳

2.優良網站名稱及網址: https://www.cupetit.com/
●有統一性,也有主要配色
●圖片拍攝美麗吸引人
●可以參考首頁,很有設計感

https://www.eyescream.com.tw/
●可以參考圖片點選樣式



Edited 1 time(s). Last edit at 06/08/2017 04:31AM by 呂子綺.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445057

1.須修改網站:https://www.lorealparis.com.tw/index.aspx?gclid=CjwKEAjwvYPKBRCYr5GLgNCJ_jsSJABqwfw7XmPHB52CAhmOUmDLj0iA8vIgl9NRedj2_hfmsSH9-RoCZS_w_wcB

>>字體略小,閱讀比較困難
>>右邊有個最新消息,上面還有捲軸一堆沒必要的東西
>>最下面的資訊已經多到滿出來了 很難看

2.優良網站名稱及網址: http://www.muji.com/tw/
>>顏色一致
>>導覽列清楚的把東西分類
>>商品分類有圖片 而且處理得很好 整個看上去整齊又舒服



Edited 2 time(s). Last edit at 06/14/2017 09:22PM by weiwei.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445054
1.須修改網站 : http://newcaps.com.tw/sport.htm
修改地方:
有點看不懂


2.優良網站名稱及網址:http://www.wix.com/website-template/view/html/1585?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fphotography%2F1&bookName=create-master-new&galleryDocIndex=11&category=photography&metaSiteId=
畫面乾淨
標示清楚
很快找到想看的



Edited 2 time(s). Last edit at 06/15/2017 04:28PM by 蔡薰緯.
(編輯記錄)

1.須修改網站 : https://shwoo.gov.taipei/shwoo/home/home00/index
修改地方:




2.優良網站名稱及網址:http://prado-living.com/cat/%E5%93%81%E7%89%8C%E5%88%86%E9%A1%9E/living/shearer-candles/?gclid=Cj0KEQjwyN7JBRCZn7LKgb3ki8kBEiQAaLEsqtzcY0t64gqPPOn9OkgOxUUUQ2YxLBvtuHN709Sf474aAvMi8P8HAQ
畫面整潔 清楚

1.須修改網站:http://www.toyking.com.tw/shop/main3.asp
早年網站 太過簡單 初級網頁設計水準

2.優良網站名稱及網址: http://www.academy.co.kr/eng/1p/1p_main.asp
簡單明瞭 不失美感

1.須修改網站:http://bat.baibao.tw/
*畫面由圖片組合,沒調整過大小
*滑動頁面看起來很暈
*一張圖要滑三次才看得完
*沒辦法找到其他商品


2.優良網站名稱及網址: http://mkup.91app.com/
*導覽列整齊且分類齊全,方便又好找
*配色簡單又清楚
*產品推銷的主題明確,搭配方式也清楚

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445105

1.須修改網站:http://www.thefaceshop.com.tw/

文字的部分跟主題非常不搭
版面單調缺少活潑性
背景顏色太暗但跟主題不搭
購物區與網站是分開的感覺缺少統一性
整體缺乏吸引力不會引起購物慾望


2.優良網站名稱及網址:http://www.kose.com.tw/sekkisei/
排列整齊、歸類相當清楚
顏色跟主題搭配起來相當適合
購物區與網站是一致性的
整體配色及歸類一目了然看起來相當舒服



Edited 2 time(s). Last edit at 06/21/2017 08:15PM by 1045445105.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445075/

1.須修改網站: http://ccnt1.cute.edu.tw/hc/
覺得網站的排序稍微混亂 配色沉重


2.優良網站名稱及網址:
https://www.gogoro.com/tw/

色彩計畫:黑白的極簡風
風格特色:運用簡單的黑跟白營造年輕時尚的感覺
3.製作心得:
過程滿簡單的 花不到多久就做出來了 很有成就感~

作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445003

(1)網站網址及主題: https://www.fieggen.com/shoelace/lacingmethods.htm
主要是實用型綁鞋帶的教學網站,其中還有一些打結的小技巧。
可能是因為需要整理的東西太多,而且吸引民眾點選的基礎是實用性大於美觀性,所以整體雖然被整理的很有條理,但卻在配色及分類上稍嫌雜亂。

(2)參考網站網址與網站名稱: http://www.studio-spoon.co.jp/
導覽列在上下左右的排法很獨特,也可以做到徹底分類,而且每一頁面都不同的顏色方便分辨。
經由我重新設定後,上下個別是關於開設網站的人及給也喜愛在鞋帶上做變化的人意點小提點,左邊是各類鞋帶綁法,右邊則是鞋帶打結的方法,這樣就能夠分別得很明確又獨具特色。

(3)色彩計畫: 我覺得原先範例網站的顏色就用的很具特色,每一頁面都不同,就如鞋帶的世界一般繽紛,所以就沒有改變顏色(^・ω・^ )

(4)風格特色: 鞋帶上的變化世很少有人能注意到的,但其中的花樣可說是千變萬化,甚至可以用兩種顏色的鞋帶去配出好看的花樣,所以我預想的網站就要色彩繽紛又跟一般網站不一樣,雖然特別但又不會讓人覺得難懂不實用,希望能吸引更多人注意到身邊平凡無奇的事物,讓生活增添一種趣味