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

Advanced

Re: [作業05] 網頁美感排版設計

[作業05] 網頁美感排版設計

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


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

[hr]

2. 設計目的

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

3. 設計主題


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

http://www.most.gov.tw/newwp.aspx?act=Detail&id=29c94e68bc7243b0a9fd2ff5103d37a9&ctunit=31&ctnode=42&mp=1
http://www.moc.gov.tw/information_250_35497.html
http://event2.culture.tw/NCO/portal/Registration/C0103MAction?actId=50005

(4)列表頁(加分)
http://www.most.gov.tw/wlp.aspx?CtUnit=31&mp=1&CtNode=42
http://www.moc.gov.tw/informationlist_250.html

[hr]

4. 製作步驟


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

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

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

作業網址:

(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.製作連結提案模擬,上傳網址為
http://mepopedia.com/~css104-2a/hw05/hw05-1035445XXX


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

[hr]

8. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms

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

[hr]

1) 原本的網站:
http://www.shop2000.com.tw/mf/home
因為圖片太多,大小不一,版面有些混亂,網頁顏色普通,字體,行距分別不大,難以閲讀.沒有主視覺,重要資料不能夠突出

2) 參考網站網址:
https://www.aromebakery.com.hk/tc/category_detail.asp?type=all
商品顯示清楚簡潔,版面分類簡單清析,配色令人感覺清新自然,字體清楚,標題及內文容易閲讀



Edited 2 time(s). Last edit at 04/26/2016 01:02PM by 1045245001.
(編輯記錄)

1.請選擇一需要修改的網站,並列出需要修改的原因

http://www.horse.com.tw/index.htm
網頁主體部份太狹窄,標題文字的陰影也用得過強,可能做成閱讀上的不便;另外,指向選項的時候雖然有跳出選單,可是鼠標與選項文字都沒有改變,可能做成混淆。


其他下面的部份我不是很懂……今天聽完課我再補。

1) 原本的網站:
https://tw.bid.yahoo.com/tw/2092072041-category.html?.r=1462167879&hpp=hp_category_2092072041
有字又有圖很不清楚很亂

2) 參考網站網址:
http://www.eststore.tw/
商品圖片清楚簡潔,版面分類很棒看到自己喜歡的即可點開,

1) 原本的網站:
http://petbird.tw/article5497.html
排版沒有設計感,又雜亂

2) 參考網站網址:
http://www.moricaca.com/
簡潔又有設計感

(1)首頁
View post on imgur.com

(2)滑鼠移過的效果 (線上訂購)
View post on imgur.com

(3)進入後的至少其中一子頁。(線上訂購)
View post on imgur.com

並請回覆:

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445211

(1)網站網站網址及主題:http://www.twtmtea4cake.com.tw/
(2)參考網站網址與網站名稱:http://www.zhanlu-coffee.com/
(3)色彩計畫:咖啡、黑、白
(4)風格特色:優雅、時尚
(5)請整理以下數值:
字體設定(font-family) 14pt
h1,h2標題級數 16pt 21pt
h3文章標題級數 18pt
內文級數(font-size)(單位px) 12pt
區塊內與區塊間的距離(padding)(margin)(單位px) 170
網站寬度(width)(單位px) 1274

(6)製作心得: 終於做完
學號:1035445211



Edited 1 time(s). Last edit at 05/31/2016 01:02PM by 1035445211.
(編輯記錄)

1) 原本的網站:
http://www.dramaq.biz/
太雜亂WWW

2) 參考網站網址:
http://www.monikakulinska.pl/
https://www.eyescream.com.tw/
商品圖片清楚簡潔,版面分類很棒

學號:10355445115



Edited 1 time(s). Last edit at 05/08/2016 12:47PM by kelly270.
(編輯記錄)

1) 原本的網站:

http://dessertking.pixnet.net/blog/category/1414398
很普通

2) 參考網站網址:

http://www.sweetemily.com.tw/about_us.html
清幽美

學號:10355445037

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445145

(1)網站網站網址及主題:基隆市政府
http://www.klcg.gov.tw/home.jsp?mserno=201502120003&serno=200710020002&menudata=KlcgMenu&contlink=klcg/content/introduction.jsp&level2=Y
覺得這個網站不夠清楚 而且版面比較傳統
(2)參考網站網址與網站名稱:https://www.world-d.tw/about.php
這個網站很有設計感 也很清楚 很乾淨整齊
(3)色彩計畫:
(4)風格特色: 簡單乾淨
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離200(padding)(margin)(單位px)
網站寬度960(width)(單位px)

(6)製作心得: 排版的時候比較麻煩

學號:1035445145



Edited 2 time(s). Last edit at 06/13/2016 08:39PM by 張子芸.
(編輯記錄)

1) 原本的網站:


2) 參考網站網址:
http://www.91toy.com.tw/
整體上看起來是舒服

(1)首頁,
View post on imgur.com

(2)滑鼠移過的效果,(會員中心)
View post on imgur.com

(3)進入後的至少其中一子頁。(關於)
View post on imgur.com

並請回覆:

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445214

(1)網站網站網址及主題:
(2)參考網站網址與網站名稱: http://www.asto-food.com.tw/
(3)色彩計畫:白色、灰色、 粉色
(4)風格特色:簡潔可口可愛
(5)請整理以下數值:
字體設定(font-family) 10pt
h1,h2標題級數 16pt 18pt
h3文章標題級數 18pt
內文級數(font-size)(單位px) 12pt
區塊內與區塊間的距離(padding)(margin)(單位px) 170
網站寬度(width)(單位px) 1420

(6)製作心得: ...╮(╯v╰)╭

1) 原本的網站:
http://shop.mvp-icecream.com.tw/index.asp
太過繁瑣,沒什麼重點,不夠吸引人

2) 參考網站網址:
http://www.asto-food.com.tw/
以圖為主容易吸引人



學號:1035445214



Edited 6 time(s). Last edit at 05/31/2016 12:43PM by su su.
(編輯記錄)

) 原本的網站:
http://www.ftd.com.tw/flower/front/bin/home.phtml
雜亂無章

2) 參考網站網址:
http://www.feeling18c.com/
版面清晰,也叫好尋找想要東西。

(1)首頁,

(2)滑鼠移過的效果,(dpi雜誌)

(3)進入後的至少其中一子頁。(dpi雜誌)


作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445088

(1)網站網站網址及主題: 以dpiX小學校的購物網站來修改。
(2)參考網站網址與網站名稱:
dpiX小學校
http://buy.ezship.com.tw/street/fb_store_main.jsp?store_id=ezship_hlxk&strCatLevel1=
屈臣氏
http://www.watsons.com.tw/
(3)色彩計畫:咖啡色、白色
(4)風格特色:簡約、整齊排列
(5)請整理以下數值:
字體設定(font-family) 14pt
h1,h2標題級數 20pt 20pt
h3文章標題級數 20pt
內文級數(font-size)(單位px) 14pt
區塊內與區塊間的距離(padding)(margin)(單位px) 150px
網站寬度(width)(單位px) 1270px

(6)製作心得:PS製作艱難... 繼續努力

學號:1035445088

1) 原本的網站:
http://buy.ezship.com.tw/street/fb_store_main.jsp?store_id=ezship_hlxk&strCatLevel1=
太單調,可以再多一點設計感。

2) 參考網站網址:
https://store.line.me/home/zh-Hant
http://www.watsons.com.tw/
清晰整齊,畫面更豐富。

學號:1035445088



Edited 3 time(s). Last edit at 05/30/2016 01:50PM by 1035445088.
(編輯記錄)

原本的網站 :

中間內文的部分太過突兀,一些細節的部分不太適合。
:
http://www.louisacoffee.com.tw/

作業網址:

http://mepopedia.com/~css104-2a/hw05/hw05-1035445097

(1)網站網站網址及主題: 路易莎咖啡LOUISA COFFEE


(2)參考網站網址與網站名稱:

http://www.lamourfou.be/en

(3)色彩計畫: 以咖啡的色調為主

(4)風格特色: 美式風格的網站

(5)請整理以下數值:

字體設定(font-family)

導覽列級數 13 pt

h1級數 48 pt

網站寬度(width) 1257 px

(6)製作心得:

比較好看的網站感覺都是以攝影或插畫的底圖,讓整個網站看起來乾淨簡單為主。

學號

1035445097

原本的網站:
http://www.uforadio.com.tw/
資訊比較不明確

參考網站網址與網站名稱:
http://www.bbc.co.uk/radio
參考BBC電台網站

(1)網站主題:飛碟聯播網

(2)作業網址:
http://mepopedia.com/~css104-2a/hw05/hw05-1035445217/index.html

(3)色彩計畫:藍色為主 搭配白色與灰紫色
(4)風格特色:清新簡潔
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 14
h3文章標題級數 12
內文級數(font-size)10
網站寬度(width)1348

(6)製作心得:資訊越多版面越難排

學號 1035445217



Edited 1 time(s). Last edit at 05/12/2016 11:37AM by 1035445217.
(編輯記錄)

1) 原本的網站:

http://www.hotel-toyo.jp/cn/access.html
過於單調,沒有什麼設計感

2) 參考網站網址:

http://bunkahostel.jp/zh/
簡單,清楚,有設計感

1) 原本的網站:

http://www.ruten.com.tw/

有點雜亂,顏色太多

2) 參考網站網址:

http://www.obdesign.com.tw/

較乾淨整齊

學號:10355445073

1) 原本的網站:

https://tw.bid.yahoo.com/

有點凌亂 排版不一

2) 參考網站網址:

https://www.hm.com/tw/

簡單明瞭

學號:10355445124

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445157

(1)網站網站網址及主題:http://www.moricaca.com/
(2)參考網站網址與網站名稱: 森果香
(3)色彩計畫:白色、咖啡色、黃色
(4)風格特色:簡單明瞭
(5)請整理以下數值:
字體設定(font-family) 10pt
h1,h2標題級數 30pt ?pt
h3文章標題級數 15pt
內文級數(font-size)(單位px) 15pt
區塊內與區塊間的距離(padding)(margin)(單位px) 0的樣子哈哈哈哈
網站寬度(width)(單位px) 1000px
(6)製作心得:有點麻煩

1) 原本的網站:
http://petbird.tw/article5497.html
排版沒有設計感,又雜亂

2) 參考網站網址:
http://www.moricaca.com/
簡潔又有設計感



學號:1035445157

1. 原本的網站:

http://www.books.com.tw/

死板,無趣

2. 參考網站網址:

http://yp21c.com/sse/shop/ssebook.html

配色強烈,卻簡單

學號:10355445121

並請回覆:

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445169

(1)網站網站網址及主題:http://www.1010apothecary.com.tw/brand.php?id=4&cat=115
此網站色調較為單調,在排版上較沒有明顯的分類。
(2)參考網站網址與網站名稱:http://www.yankeecandle.com.tw/Default.aspx
yankeecandle的網站以圖與色塊來呈現,給人較活潑的感覺。
(3)色彩計畫:以草綠色為主色調搭配其他較為鮮明暖色的色彩。
(4)風格特色:活潑 、時尚
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 看了好久終於做完了!!!!!!!!!!!!無限感動
學號:1035445169

(1)首頁


(2)滑鼠移過的效果 (臉部系列)


(3)進入後的至少其中一子頁。(臉部系列)


並請回覆:

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445130

(1)網站網站網址及主題:http://shop.thebodyshop.com.tw/product_category.php?store_type_sn=130&category_sn=900&sort_by=top_sale&page=2#div_middle
(2)參考網站網址與網站名稱:http://www.superlovers.fr/#home
(3)色彩計畫:粉紅系列
(4)風格特色:甜美
(5)請整理以下數值:
字體設定(font-family) 12pt
h1,h2標題級數 12pt 63pt
區塊內與區塊間的距離(padding)(margin)(單位px) 90
網站寬度(width)(單位px) 1500

(6)製作心得: 第一次做 所以花蠻久的時間
學號:1035445130



Edited 3 time(s). Last edit at 06/10/2016 02:56PM by 1035445130.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445001

按鈕/首頁 關於


(1)網站網站網址及主題:國立歷史博物院 http://www.nmh.gov.tw/zh/index.htm
(2)參考網站網址與網站名稱: 濤靈感 http://pick.mydesy.com/
(3)色彩計畫:藍紅色系
(4)風格特色:莊嚴
(5)製作心得:學習別人網頁的技巧然後示範 很有趣

學號 1035445001



Edited 1 time(s). Last edit at 06/11/2016 04:17AM by Togenick.
(編輯記錄)

1) 原本的網站:
http://www.arte.gov.tw/index.asp
字與圖太過花俏,造成背景與作品有些混淆

2) 參考網站網址:
http://theartmag.com/
版面分類清楚明瞭,風格和配色簡單,襯托作品

1) 原本的網站:
http://global.gmarket.co.kr/Home/Main
東西資訊太多,令人不太想去一一點閱

2) 參考網站網址:
http://www.united-f.com/
簡單反而更讓商品突出,反而能更明確知道商品。

學號:1035445046

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445172

(1)網站網站網址及主題:義美
http://www.imeifoods.com.tw/
覺得這個網站很雜亂,而且很花
(2)參考網站網址與網站名稱:http://www.misterdonut.com.tw/itmProductIntelligenceList.html?form.categoryId=1000&leftMenuId=1010
覺得這個網站很可愛,也適合義美
(3)色彩計畫:以粉色為主,配合義美的顏色
(4)風格特色: 可愛
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數12
h3文章標題級數 12
內文級數(font-size)(單位px) 8
區塊內與區塊間的距離200(padding)(margin)(單位px)
網站寬度900(width)(單位px)

(6)製作心得;排版的時候花了很多時間

學號:1035445172

原本的網站 :

有點雜亂

https://rent.591.com.tw/

作業網址:

http://mepopedia.com/~css104-2a/hw05/hw05-1035445025

網站網站網址及主題: 591租屋網

參考網站網址與網站名稱:

http://www.htc.com/tw/

製作心得: (°ཀ°)

學號 : 1035445025

1) 原本的網站:
https://tw.bid.yahoo.com/
很亂

2) 參考網站網址:
http://www.asos.com/
清楚簡潔

學號:1035445121

1) 原本的網站:
https://tw.bid.yahoo.com/theme/man/main.html?co_servername=ayfp_ecm_aC160614_430_1a101cf&co_servername2=aC0614#M-M_M1_4
有點混亂,感覺非常的擠

2) 參考網站網址:
http://www.supremenewyork.com/
雖然是英文的,不過很簡潔,想要甚麼樣系列的都標示很清楚

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445103/

(1)網站網站網址及主題:http://www.homebakery.com.tw/index.asp
(2)參考網站網址與網站名稱: http://www.fayalife.com.tw/products.htm
(3)色彩計畫:米黃色、藍色
(4)風格特色:休閒
(5)請整理以下數值:
字體設定(font-family)
h1標題級數 24
h3文章標題級數 14
內文級數(font-size)(單位px)12
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1576

(6)製作心得:做完了 很開心

學號 1035445103

作業網址:http://mepopedia.com/~css104-2a/hw05/hw05-1035445010

(1)網站網站網址及主題:1588服飾網
http://www.1588.com.tw/index.php

網站首頁東西較少,較為單調 也沒有服飾幻燈片與熱賣商品介紹
(2)參考網站網址與網站名稱:多琳娜服飾
http://www.doreena.com.tw/

一進首頁有幻燈片也有最新消息與熱門商品 所有照片也有設計編排過
(3)色彩計畫: 簡約白色 搭配圖騰
(4)風格特色: 簡單乾淨
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離200(padding)(margin)(單位px)
網站寬度960(width)(單位px)

(6)製作心得: 排版的時候比較時希望能夠多點東西 可是卻又覺得太雜亂 有點難取捨

學號:1035445010

作業網址: http://mepopedia.com/~css104-2a/hw05/hw05-1035445055/

(1)網站網站網址及主題: http://www.shiseido.com.tw/
(2)參考網站網址與網站名稱: https://www.cupetit.com/
(3)色彩計畫: 用紫色和黃色做對比
(4)風格特色: 用對比的亮麗色彩來呈現商品的價值
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 24
h3文章標題級數 18
內文級數(font-size)(單位px)12
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1583

(6)製作心得: 好難

學號 1035445055