關於網站
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一樣寬,所以會達到齊頭齊尾效果,不會尾端突然凹進去或凸出來,唯一比較可惜的就是畫面左下角空白區塊太大,如果可以放張產品圖或是地圖應該都可以更加豐富這一個頁面。