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

Advanced

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



2. 設計目的


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

3. 設計主題


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




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-2b/hw04/hw04-1045445XXX

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

(6)製作心得:




5. 注意事項


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


6. Adobe Creative Cloud


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

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

體驗雲端共享PSD的便利。



7. 作業繳交


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


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




以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/



8. 上課影音


網頁視覺提案作業講解





上傳Adobe CC 教學






截圖軟體
Awesome Screenshot







Edited 5 time(s). Last edit at 04/13/2017 08:01AM by JinJin.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445017

(1)原網站名稱及網址:
佳樂精緻蛋糕專賣店 http://www.cakeking.com.tw/front/bin/home.phtml
GOVIDA http://www.godiva.com.tw/twcht/
修改的原因:
●屬於比較舊式的網頁版面
●上排導覽列的字不清楚
●左邊按鈕部分圖片過於重複
●字體沒有統一
●主圖很雜亂
●整體沒有質感
●顏色太多種

(2)參考網站名稱與網址:
chochoco巧克力專賣 http://chochoco.com/
參考的原因:
●黑底與金色的字很有質感
●導覽列很清楚
●游標指向按鈕時有變化
●字體統一
●排版簡潔明瞭
法國的秘密甜點 http://www.thesecretcake.com.tw/
參考的原因:
●擅長用圖片讓網頁豐富
●可以清楚的往下瀏覽
●每一頁都有特色
●整體很有質感

(3)色彩計畫:以黑色為背景,襯托主題,配合金色的字,增加高級感。

(4)風格特色:簡約、高級。

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定(font-family)
導覽列:15px
內文級數:15px(小標題)13px(內文)
網站寬度:1000px

(6)製作心得:做完這次作業後,又學到更多東西了,第一次使用PS來
做,發現沒有想像中的難,也了解網頁設計有很多種排版,除了美觀之
外,怎麼樣排以及字體的級數都很重要。



Edited 2 time(s). Last edit at 04/13/2017 12:54AM by lemon2016.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445188

(1)原網站名稱及網址:
UNIQLO http://www.uniqlo.com/tw/
修改的原因:
|下方資訊看起來有點亂
|配色較單調
|整體看起來較沒特色

(2)參考網站名稱與網址:
Susie Cakes http://susiecakes.com/about/
參考的原因:
|配色簡單,舒適
|字體搭配得宜
|導覽列簡單舒服
|整體看起來很活潑,符合主題

Whippy Cake https://whippycake.com/
參考的原因:
|配色俐落大方,很有個性
|照片的排版很簡單又有質感
|整體架構編排都很清楚

(3)色彩計畫:以白、紅為主色調,灰色為輔助色彩

(4)風格特色:呈現簡約舒適的感覺

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:華康粗黑體
導覽列:華康粗黑體
副標題:華康新特黑體
內文:微軟正黑體

大標題級數 :55pt
文章標題級數 :30pt
內文級數:12px
網站寬度:1349px

(6)製作心得:第一次用ps來做網頁的主視覺,覺得很累,因為東西很多,一個一個排還真累人,
終於把它做完了。



Edited 5 time(s). Last edit at 05/04/2017 10:31PM by 1045445188.
(編輯記錄)

http://mepopedia.com/~css105-2b/hw04/hw04-1045445095
(1)        原網站名稱及網址:
三峽金牛角: http://www.xn--ehq777a47psovn2i.tw/front/bin/home.html
(2)        KLG炸雞店 http://www.klgclub.com/?f=HegemonWorld
修改的原因:
●舊式的網頁版面
●很多flash無法觀看

(2)參考網站名稱與網址:
麥當勞 https://www.mcdonalds.com.sg/
肯德基 https://www.kfc.com/menu/meals/kids-meals
參考的原因:
●導覽列很清楚
●畫面很有整體性


(3)色彩計畫:以紅色為背景,以肯德基的色調。

(4)風格特色:簡約、活潑。

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定(font-family)
導覽列:20px
內文級數:16px(內文)
網站寬度:960px

(6)製作心得:用ps排版蠻好玩的,終於做出來了~~~



Edited 2 time(s). Last edit at 04/26/2017 04:13PM by 1045445095.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445014

(1)原網站名稱及網址:
凱樂烘培官網: http://www.clfood.com.tw/about/active.aspx?shop=clfood

修改的原因:

1. 背景花紋俗氣,使整體畫面沒質感
2.內文字過大,顏色怪異
3.按鈕字體使用新細明體,破壞美感

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

國外Gana麵包店官方網站: http://www.gana.fr

參考的原因:

1.簡單的排版與配色就使整體很有質感
2.使用的字體具有設計感
3.點圖有滑動連結的效果

作業網址
http://mepopedia.com/~css105-2b/hw04/hw04-1045445002

(1)網站網址及主題:
金瑩珠寶
http://www.jingying1979.com.tw/front/bin/ptlist.phtml?Category=366817
修改原因:
風格較於舊式、商品列表不清楚、網頁圖片很怪沒有設計感


(2)參考網站網址與網站名稱:
鑽石專賣店 彩糖鑽工坊
http://www.caramelo-jd.com/
參考原因:
配色優美、簡單明瞭、符合產品風格


(3)色彩計畫: 白色+紫色

(4)風格特色: 高貴、典雅的感覺


(5)製作時請特別注意以下數值,並比較與平面排版之差異:

字體設定(font-family) :微軟正黑體

上排選單級數:13.5px

左側選單級數:12px

footer級數:12px

內文級數:12px

padding:70px
margin:auto

網站寬度(width)(單位px) :900px

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445062

(1)原網站名稱及網址:
日光東照宮
http://www.toshogu.jp/
修改的原因: 很普通 不夠吸引人

(2)參考網站名稱與網址:
伊勢神宮
http://www.isejingu.or.jp/
參考的原因: 很乾淨 圖多於文字,看起來很豐富


(3)色彩計畫:白色

(4)風格特色:簡單

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:標楷體
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

大標題級數 :50pt
文章標題級數 :15pt
內文級數:12px
網站寬度:1200px

(6)製作心得:排版真的很不容易

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445089

(1)原網站名稱及網址:
anges.b cafe
http://agnesb-lepaingrille.com/cafetw/
修改的原因:版面小,不夠有質感,沒什麼特色。

(2)參考網站名稱與網址:
starbucks
https://www.starbucks.com/coffee
參考的原因: 內容清楚明瞭

(3)色彩計畫:黑灰白

(4)風格特色:清楚

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:Arial
導覽列:Arial
副標題:Georgia
內文:Arial/Georgia

大標題級數 :43pt
文章標題級數 :18pt
內文級數:14px
網站寬度:1349px

(6)製作心得:照著版型做很容易,自己要寫一個好網頁不容易hot smiley

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445086

(1)原網站名稱及網址:
http://www.comebuy2002.com.tw/home.php
修改的原因:沒特色。

(2)參考網站名稱與網址:
http://www.milkshoptea.com/tw/
參考的原因: 內容清楚 較具特色

(3)色彩計畫:粉白

(4)風格特色:活潑

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:原LOGO
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

大標題級數 :原LOGO
文章標題級數 :14pt
內文級數:14px
網站寬度:960px

(6)製作心得:版型照做 比較簡單一點了

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445056

(1)原網站名稱及網址:
麥當勞歡樂送:https://www.mcdelivery.com.tw/tw/home.html
修改的原因:
*很沒質感的網站
*很普通且沒設計感
*屬於較舊型的排版

(2)參考網站名稱與網址:
Tradestone Confections:https://tradestoneconfections.com/
參考的原因:
*排版很有質感
*風格清新簡單
*讓人一目了然
*視覺閱讀上也很輕鬆

(3)色彩計畫:以白色為背景,襯托食物的色彩。
(4)風格特色:簡約,清新

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定(font-family)

大標題:原LOGO
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

導覽列:15px
內文級數:15px(小標題)12px(內文)
網站寬度:960px

(6)製作心得:做完之後發現排版真的很重要,有關視覺上的美感和閱讀者的感受,
而且用ps製作網頁真的輕鬆很多,雖然dw還是製作網頁的主要軟體。這次的作業讓我學到很多。



Edited 1 time(s). Last edit at 06/14/2017 02:02AM by kiki2007810.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445092

(1)原網站名稱及網址:
mister donut : http://www.misterdonut.com.tw/index.html
修改的原因:
◆沒質感的網站
◆較為普通的網站
◆屬於較舊型的排版

(2)參考網站名稱與網址:
Pixar Animation Studios : https://www.pixar.com/#home-cars3
參考的原因:
◆排版很簡潔
◆風格清新而簡單
◆資訊清楚,且一目了然
◆閱讀時不會有太多的東西,簡單明瞭

(3)色彩計畫:以暖色為背景。
(4)風格特色:簡約,清新

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定(font-family)

大標題:原LOGO
導覽列:微軟正黑體
副標題:華康圓體
內文:微軟正黑體

導覽列:14px
內文級數:14px、18px
網站寬度:1350px

(6)製作心得:雖然在ps對其文字的部分會花一點時間,不懂的部分也有去看教學影片後就有比較了解了。

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445074

(1)原網站名稱及網址:
SUBWAY: http://m.ikeacard.com.tw/Default
修改的原因:
*版面很宰,東西很多。
*整體看起來較沒特色

(2)參考網站名稱與網址:
IKEA宜家卡:http://www.twsubway.com/tw/index.html
參考的原因:
*配色簡約,內容清楚明白。
*字體搭配舒適。
*導覽列簡單舒服
*符合主題


(3)色彩計畫:以黃橘、藍色為主色調。

(4)風格特色:呈現簡約明瞭的感覺 。

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:原logo
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

大標題級數 :原logo
文章標題級數 :30pt
內文級數:24px
網站寬度:1692px

(6)製作心得:第一次用ps來做網頁的主視覺,覺得很累,因為東西很多,文字上都一個一個慢慢排,
好累 ,還是堅持的把它做完了。



Edited 1 time(s). Last edit at 06/15/2017 04:39AM by 1045445074.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1025445231

(1)原網站名稱及網址:
兒童新樂園官網: http://www.tcap.taipei/

修改的原因:

1. 版面傳統
2.資訊複雜
3.不美

(2)參考網站名稱與網址:
東京迪士尼官方網站: http://www.tokyodisneyresort.jp/tc/

參考的原因:

1.版面有趣,色彩可愛
2.瀏覽節奏及資訊配置俐落

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445077

(1)原網站名稱及網址:
株式會社 明治meiji
http://www.meiji.co.jp/sweets/chocolate/kinotake/
東西有點多,感覺有點擠

(2)參考網站名稱與網址:
江崎固力果 株式會社 pokey
https://www.glico.com/jp/product/chocolate/
很整齊乾淨,圖片多但不擁擠


(3)色彩計畫:淺粉

(4)風格特色:簡單 可愛

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:標楷體
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

大標題級數 :50pt
文章標題級數 :15pt
內文級數:12px
網站寬度:1200px

(6)製作心得:很難啊



Edited 1 time(s). Last edit at 06/21/2017 08:07PM by 1045445077.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445107

(1)原網站名稱及網址:
台北市立動物園 http://www.zoo.gov.taipei/
修改的原因:
太普通
有點複雜
比較沒有設計感

(2)參考網站名稱與網址:
忘記是在哪個網站找版型了 忘記記起來

參考的原因:
有美式風格
又有極簡的設計感

(3)色彩計畫:以綠色為主

(4)風格特色:簡約 簡單

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:微軟正黑體
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

大標題級數 :46pt
文章標題級數 :30pt
內文級數:12px
網站寬度:1500px

(6)製作心得:第一次做網頁做得如此有信心 而不備受打擊

作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445113

(1)原網站名稱及網址:
動物王國官方網站 http://www.17ipet.com.tw/
修改的原因:
太繁複
有點複雜

(2)參考網站名稱與網址:
宜家家具 http://m.ikeacard.com.tw/Default

參考的原因:
簡單明瞭
有極簡
有設計感

(3)色彩計畫:以綠色白為主

(4)風格特色:簡單 易懂

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定
大標題:微軟正黑體
導覽列:微軟正黑體
副標題:微軟正黑體
內文:微軟正黑體

大標題級數 :46pt
文章標題級數 :30pt
內文級數:12px
網站寬度:1000px

(6)製作心得:喜歡這次的作業因為非常簡單哈哈



Edited 1 time(s). Last edit at 06/25/2017 11:11PM by chenyian.
(編輯記錄)