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

Advanced

Re: [WEB] 優良設計網站蒐集與分析

[WEB] 優良設計網站蒐集與分析

請蒐集設計優良的網站,列出網址與下列資訊,並分析其網站的優劣

範例:

基本資料
1.網址:http://www.apple.com/tw/
2.名稱:Apple台灣官方網站
3.類型:科技類商業網站
4.族群:年輕,追求時尚與科技感
5.網站性質:科技產品介紹與產品販售

分析

1.色系:以白色、灰色系、黑色為主調,輔助色為藍色

[IMG]http://i556.photobucket.com/albums/ss1/whc915/apple-color.jpg[/IMG]

2.風格:科技與時尚感

一致的版面設計,用色與字型,可以立即感覺到網站經營的俐落風格


3.編排分析

採用的是,導覽列於上方的一目瞭然簡單俐落的編排方式
以產品名及重要選項列於上方便於點擊

下方是產品分類

主商品出現在產品分類下以大張照片瀏覽方式呈現

其後是以棋盤式的分割方式,將產品介紹與相關資訊分別呈現

分割的區塊以淺灰色為外框,並賦予些微陰影,使不同區塊形成不同的重點


4.字體

主標題:粗體黑色
內文:灰色
連結:淺藍色

形成一目了然的三個重點
統一的黑體字設計,形成一致的設計感


4.整體分析

去除多餘顏色與複雜編排的俐落風格
展現屬於現代科技的冷冽形象

因為APPLE是主流時尚品牌
所以簡潔的設計也可以成為時尚的典範


附圖

[IMG]http://i556.photobucket.com/albums/ss1/whc915/apple-001-1.jpg[/IMG]


內政部機關網站評獎
www.moi.gov.tw/moisite/96/p5_4.asp

[IMG]http://i556.photobucket.com/albums/ss1/whc915/apple-002-1.jpg[/IMG]



Edited 3 time(s). Last edit at 09/08/2011 01:17AM by JinJin.
(編輯記錄)

基本資料
1.網址:[url=http://www.shopbellavita.com/]http://www.shopbellavita.com/[/url]
2.名稱:Bella Vita - Gifts & Interiors | Collierville, Germantown, Memphis, TN. Gift Shop
貝拉維塔禮品及室內裝飾
3.類型:服飾類商業網站
4.族群:舒服,年輕與復古感
5.網站性質:服飾產品介紹與產品販售

分析

1.色系:以白色、咖啡色系、黑色為主調,輔助色為青藍色、橙色

[img]http://farm7.static.flickr.com/6149/6035562428_9366341d06_b.jpg[/img]

2.風格:復古,優雅,舒服感

一致的版面設計,用色與字型可以感覺到浪漫又可愛,舒服感。

3.編排分析

採用的是,導覽列於上方的紙張泛黃的吊牌的編排方式
以重要選項列於上方便於點擊

下方是產品跟作者的介紹圖片跟按鈕

主商品出現在產品分類下以小張照片瀏覽方式呈現,點進去可看到購買的訂單跟放大圖

以棋盤式的分割方式,將產品介紹與相關資訊分別呈現

左邊是產品的分類。

下方是連絡方式跟網站的介紹等等。

4.字體

主標題:Times New Roman 重要內文: 浪漫的英文字體
內文:黑色,白色
連結:橙色

形成一目了然的三個重點
統一的Times New Roman設計,形成一致的設計感


4.整體分析

網頁呈現浪漫復古優雅風格,特殊的導覽列,讓人吸引目光。
整體的感覺很一致,但東西的重點又能凸顯出來。
是一個很特別的網站。

[img]http://farm7.static.flickr.com/6076/6035615046_53ac7b110b_b.jpg[/img]

[img]http://farm7.static.flickr.com/6076/6035615766_8d73f5436d_b.jpg[/img]

[img]http://farm7.static.flickr.com/6083/6035062527_9d12bb7b75_b.jpg[/img]

[img]http://farm7.static.flickr.com/6205/6035063207_74d47fac54_b.jpg[/img]



我查了很多網站,幾乎都是國外的設計網站,有幾個設計網站很不錯也會提供很多教學。

這是日本的網站設計,他們放了各個國家很不錯的網站
[url=http://anjo.dekiteharu.jp/]http://anjo.dekiteharu.jp/[/url]

英文網站,有分類是哪種性質的網站欣賞喔!
[url=http://cartfrenzy.com/]http://cartfrenzy.com/[/url]

[url=http://foliofocus.com/]http://foliofocus.com/[/url]

[url=http://blogdesignheroes.com/]http://blogdesignheroes.com/[/url]

這是日本的網站,都介紹日本的網站設計
[url=http://www.ikesai.com/]http://www.ikesai.com/[/url]

這是我下次想要說明的網站: 牛仔褲的網站
[url=https://www.hollisterco.com/webapp/wcs/stores/servlet/HomePage?storeId=18157&catalogId=10201&langId=-1]https://www.hollisterco.com/webapp/wcs/stores/servlet/HomePage?storeId=18157&catalogId=10201&langId=-1[/url]



Edited 1 time(s). Last edit at 08/13/2011 05:33PM by angela996633.
(編輯記錄)

基本資料
1.網址:http://en-tw.havaianas.com/en-TW/home/
2.名稱:havaianas
3.類型:夾腳拖商業網站
4.族群:年輕族群,活力感、休閒、陽光
5.網站性質:夾腳拖havaianas產品介紹與產品販售

[img]http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/292215_238823212823283_100000868180746_692413_452166_n.jpg[/img]


分析
1.色系:以沙灘海岸為
2.風格:活力感、休閒、陽光
色彩豐富,帶有手繪感;給人感覺很舒服陽光
[img]http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/293413_238823749489896_100000868180746_692414_1568745_n.jpg[/img]

3.編排分析
ˇ左右為插畫風格的圖片呈現、標題欄置左方
重要資訊&產品介紹,(內容呈現置中央)
ˇ首頁簡單,色彩豐富不雜亂、清晰舒服,很有活力感
標題列置左方,底圖採用鞋款上的編繩
ˇ分頁以顏色做為區分
[img]http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/293521_238823766156561_100000868180746_692415_7310161_n.jpg[/img][img]

4.字體
主標題:細明體
標題&主標題:依不同商品,不同色系
內文:白、灰色

4.整體分析
整體色彩豐富不雜亂、清晰舒服,很有活力感,帶有手繪感
標題列,底圖採用鞋款上的編繩做為底圖

Havaianas設計概念是由日本草編便民鞋來的
由巴西引進havaianas, havaianas是葡萄牙文,
原文為夏威夷havaianas,是巴西主流時尚品牌 。



Edited 3 time(s). Last edit at 08/28/2011 10:57AM by qaz0920963763.
(編輯記錄)

基本資料
1.網址:http://www.ludovicdiorio.com/
2.名稱:ludovicdiorio
3.類型:歐美工作室網站
4.族群:有經濟能力族群,廠商、設計師
5.網站性質:主要呈現接洽過商品的作品


[img]http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/294531_240996012606003_100000868180746_698241_7499124_n.jpg[/img]
分析
1.色系:黑、白、灰
2.風格:清晰、自然、歐美、典雅
色彩簡單,以黑灰白色系,呈現出清晰、自然的感覺

[img]http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/296190_240996045939333_100000868180746_698242_7360740_n.jpg[/img]

3.編排分析
ˇ主內容呈現於中央,以大張照片瀏覽方式呈現
ˇ使用左右卷軸的特色,是一般網頁沒有的

ˇ其他分類,在下方以置中方式橫向排列,
點選後已向下置中的方式,呈現其他分類選單

[img]http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/262506_240996089272662_100000868180746_698244_5447246_n.jpg[/img]
4.字體
主標題:英文字體
標題&主標題:黑、白、灰

5.整體分析
整體清晰舒服,以簡單的顏色,凸顯內容的重要。
這個網站主要強調內容的作品,
利用簡單的編排方式和簡潔有力的留白處理,
讓內容能夠更加引人注目。

Ludovicdiorio是屬於一個歐美的工作室的網站,
網站上所呈現的作品,為此工作室與其他品牌或廠商合作後的作品
主要在於作品呈現的內容,所以在網站上其他的編排、色彩上的搭配
都會比較簡單、清晰。



Edited 1 time(s). Last edit at 08/28/2011 11:24AM by qaz0920963763.
(編輯記錄)

基本資料
1.網址:[url=https://www.hollisterco.com/webapp/wcs/stores/servlet/HomePage?storeId=18157&catalogId=10201&langId=-1]https://www.hollisterco.com/webapp/wcs/stores/servlet/HomePage?storeId=18157&catalogId=10201&langId=-1[/url]
2.名稱:Hollister Co. - Shop Official Site
霍利斯特公司,店官方網站
3.類型:服飾類商業網站
4.族群:個性,年輕與時尚感
5.網站性質:服飾產品介紹與產品販售

[img]http://farm7.static.flickr.com/6189/6061497385_2162afdde5_z.jpg[/img]

分析

1.色系:以咖啡色、暗藍色系、黑色為主調,輔助色為淡藍色、暗紅,白色系 。

2.風格:牛仔褲質感,還有木板的舊舊質感,年輕,有個性,有一種時尚感。


3.編排分析

採用的是,牛仔褲的顏色跟木板舊舊的質感做整體呈現。

後面背景用複雜的圖騰,讓整個網站不會太單調,

牛仔褲的圖很亮色,跟背景成對比,把目光都會在牛仔褲產品身上,

是一個很有個性的服裝類的網站。

4.字體

主標題:黑體字

介紹產品的內文:浪漫的英文字體。

統一的黑體字設計,形成一致的設計感


4.整體分析

網頁呈現有個性,時尚的風格,顏色的對比,讓人吸引目光。
整體的感覺很一致,但東西的重點又能凸顯出來。背景圖很特別
很有中國風的圖騰,是一個很特別的網站。


[img]http://farm7.static.flickr.com/6078/6062058860_0d263aca28_z.jpg[/img]

[img]http://farm7.static.flickr.com/6200/6062058858_10e6a3eb0d_z.jpg[/img]

基本資料
1.網址:[url=http://www.ourgreatadventure.co.uk/]http://www.ourgreatadventure.co.uk/[/url]
2.名稱:our great adventure 音樂網站
3.類型:歌手音樂網站
4.族群:民歌,追求復古與時尚感
5.網站性質:喜歡他們音樂的粉絲能更了解他們

分析

1.色系:以咖啡色系、黑色、灰綠色為主調,輔助色為白色跟黃色

[img]http://farm7.static.flickr.com/6074/6088459466_4e754f93d6_z.jpg[/img]

2.風格:復古,優美感

一致的版面設計,用色,可感覺到網站經營復古優美風格


3.編排分析

採用的是,很多相框排成長方形並跟導覽列的內容融合在一起,讓人焦點都在照片上。

滑鼠按進去到裡面的內容可看到左邊幾乎都是說明列右邊是一張張的小圖。

4.字體

主標題:Times New Roman
內文:Times New Roman 黑色
連結:Times New Roman 黑色


4.整體分析

復古的顏色與特別的編排加上復古的照片風格
展現他們歌手唱民歌的形象

網站呈現很復古又很舒服的感覺。

[img]http://farm7.static.flickr.com/6065/6087917503_5206b40d52_z.jpg[/img]

[img]http://farm7.static.flickr.com/6076/6088468094_067f53249d_z.jpg[/img]

[img]http://farm7.static.flickr.com/6077/6087924597_907051a2ed_z.jpg[/img]

基本資料

1.網址:http://www.bietekopfhandundherz.de/index.html
2.名稱:BIETE KOPF HAND &HEARZ
3.類型:德國 設計工作室
4.族群:上班族、設計族群
5.網站性質:鄉村創意工作室

[img]http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/301076_245804772125127_100000868180746_712633_2369325_n.jpg[/img]

分析
1.色系:黑、白、灰、
2.輔助色:黃、紅、粉
3.風格:清晰、簡單、剪貼風格
色彩簡單,以黑灰白色系為主,
圖片安排 & 文字編排 呈現剪貼的感覺很有趣


3.編排分析
ˇ中間的動態圖片呈現剪貼的風格
ˇ主要標題在於圖片的下方
排版方式都以置中的方式呈現
主標題滑鼠移過程現粉色

利用陰影的分隔線來區隔上下兩個區塊

ˇ小標題在於最下方
文字置左的方式做編排


[img]http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/296321_245804785458459_100000868180746_712634_4751104_n.jpg[/img]

4.字體
主標題:英文字體
標題&主標題:黑、白、灰

5.整體分析
整體感覺呈現出些許的剪貼風格
舒服、一目了然、簡單

色彩部分以黑、白、灰為主
利用黃色、粉色來點綴整個網站

[img]http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/301436_245804738791797_100000868180746_712631_8058236_n.jpg[/img]

按鈕ˇ分為四大類,滑鼠移入呈現粉色按鈕
網站內容ˇ像是blog,簡單一目了然,
頂端的top logo 與首頁相對應
Blog內容的照片,點選,照片會有放大效果


[img]http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/298796_245804795458458_100000868180746_712635_1378154_n.jpg[/img]


另一個設計工作網站:http://www.sunlei.name/aboutme/aboutme.htm



Edited 2 time(s). Last edit at 08/29/2011 07:35PM by qaz0920963763.
(編輯記錄)