幸福之丘 洋果子烘焙坊-網頁設計

2020
幸福之丘 洋果子烘焙坊-網頁設計

烘焙坊幸福之丘洋菓子,2020 年的官網設計製作涵蓋品牌介紹、產品、彌月專區與常見問題,網站上可直接挑選商品、加入購物車。

官網延續品牌「最幸福的味道,最單純的執著」這句話,風格簡約沉穩、雅緻內斂,也帶著溫馨感;網頁規劃了動態效果,讓瀏覽的人更感受得到細緻。色彩延續品牌的藍紫與粉膚色:「關於幸福」一打開是藍紫色夜空,一顆粉膚色漸層的月亮旁閃著星星,往下是粉色底的品牌源起,說這座可愛的小山丘,就是媽咪的肚子。

首頁輪播油飯雞腿、布列塔尼酥餅的大圖,左下角標出目前與下一張。選單是一塊斜切的藍紫面板,蓋住半邊照片,游標移到哪一項,字就換成英文並加上底線,旁邊的照片也跟著更換。

產品頁以粉色為底,左側列出系列分類,從法式經典、蛋糕與乳酪、日式布蕾,到手工餅乾與波士頓派,點進去看得到價格,可以直接加入購物車。彌月專區把鼠年、聖誕、三層與雙層禮盒各用一種底色排開,下方列出不同組合;常見問題分成購物、付款、運送與退換貨,頁尾放著高雄與台中門市的電話。

幸福之丘 洋果子烘焙坊-網頁設計 作品圖 1
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 3
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 5
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 7
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 9
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 11
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 13
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 2
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 4
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 6
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 8
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 10
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 12
幸福之丘 洋果子烘焙坊-網頁設計 作品圖 14