2012 年 6 月 23 日

網站設計評論#6:Cherry Blossom 蛋糕店 -HTML5網站

本篇目錄

關於網站

Cherry Blossom是一間手工蛋糕店,所以提供客制化蛋糕服務,不管是婚禮、生日、畢業、紀念、退休等等,只要是值得慶祝的日子,都一定少不了蛋糕這個焦點,而這家蛋糕店位於紐西蘭皇后鎮,酷吧!我們今天看的是一個紐西蘭的網站!

初次遇見網站

Cherry Blossom這個網站看起來非常一般,但是你絕對想不到這是一個HTML5的網站!最近跟很多朋友聊天,大家似乎都以為HTML5的網站就是很絢麗,會有很多動畫飛來飛去,跑來跑去,很多效果都比Flash好,坦白說,真正的HTML5網站,其實很多地方看起來都跟現在的HTML4或XHTML網站並沒有落差太多,所以我覺得Cherry Blossom就是一個很好的例子,它真的是HTML5,只是我如果沒提,我想很多人也不會發現到這點。

網站色系

 #e38a9e  #4e3226  #ffffff 

Cherry Blossom字面上的翻譯就是櫻花,而這個網站色系也就採用櫻花樹的配色,櫻花花朵的粉紅色與櫻花樹幹的咖啡色,搭配白色,就會不自覺的讓人聯想到日本冬天櫻花盛開的感覺。

Logo這回事

你可以看到Cherry Blossom的圖形部分Logo是已精簡的三個弧線代表三層蛋糕,在上面點綴著櫻花樹枝,下方的字體會讓我想到提姆波頓的地獄新娘,從動畫中衍生出來的字體Corpse Bride Font,不過Corpse Bride Font有著重重的陰沈感,但是Cherry Blossom卻讓人覺得可愛、有趣、又特別!但個人覺得OCCASIONAL CAKES字樣如果可以換個字體可能會比較適合,現在看起來有點突兀,就是有那麼一點無法融入上方的感覺。

選單這回事

Cherry Blossom的選單非常單純,是純文字形式,當前頁會顯示白色,滑鼠移過去其他連結也會從咖啡色選變成白色,看似簡單的調換顏色,很多網站卻會忘了做,最後面的Facebook滑鼠移過去會變成Facebook的藍色,點擊後會跳出新視窗連結到Cherry Blossom的粉絲頁,目前有1,389位粉絲,還算不錯。

內文排列方式分析

Cherry Blossom的內文排列其實還蠻粗魯的,很像把字貼上就搞定了,所以在很多頁面都可以看到需要改進的地方,唯一比較OK的部分大概就是首頁了。

標題處字體明顯變大很多,一點就可以看見標題的訴求,右方的圖片搭配合宜,使用櫻花點綴蛋糕的商品圖片可以讓Cherry Blossom的品牌名稱具體化,並加深在網友的腦海中。標題與內文的間距明顯比內文段落間距大,幾乎是1倍的落差,很多時候常常看到台灣的頁面標題行距與內文一樣大,這樣的排列會讓內文與標題中間有擁擠感,如果行距隨著字體大小一同作調整,那說不出來的奇怪或擁擠感就會消失了。

表單設計這回事

在Contact us這一頁可以看到一個聯絡表單,表單排列靠左對齊,上方兩排表單的寬度與下方的多行textarea一樣寬,所以會達到齊頭齊尾效果,不會尾端突然凹進去或凸出來,唯一比較可惜的就是畫面左下角空白區塊太大,如果可以放張產品圖或是地圖應該都可以更加豐富這一個頁面。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2016 年 6 月 20 日
如何在mac os上開發.net 網站

前陣子因為接了一個前端工程的案子,但是因為後端是.net所寫,為了避免來回一直上傳FTP或SVN等等,所以我上 […]

Read More
2010 年 1 月 17 日
[解析]AIDA模式(愛達公式)

AIDA模式說明 AIDA模式也稱愛達公式,是國際推銷專家海英茲·姆·戈得曼(Heinz M Goldmann […]

Read More
2008 年 12 月 22 日
[心得]玩命快遞3 Transporter 3 心得感想

坦白說我一點都不覺得這部片子好看,因為他還是脫離不了好萊烏模式:車子、女人、追逐,所以讓我覺得沒什麼新意,反而 […]

Read More
Copyright © 2024 草監網路 . All rights reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram