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

Advanced

Change History

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

Changed By: j29927381
Change Date: June 09, 2017 08:40PM

Re: [作業04]網頁排版設計 -以Photoshop製作Mockup與Prototype
作業網址: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跟瀏覽方式我覺得也不錯,像河道瀏覽的方式也想嘗試看看><!

Original Message

作者: j29927381
Date: April 03, 2017 10:13PM

Re: [作業04]網頁排版設計 -以Photoshop製作Mockup與Prototype
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跟瀏覽方式我覺得也不錯,像河道瀏覽的方式也想嘗試看看><!