Weirdo Beauty

美容網站

在本港有兩家分店的新式美容中心,提供一站式皮膚護理服務。針對客戶的皮膚狀況進行標靶式皮膚管理方案。

超過二十種項目,個性化皮膚護理,徹底解決客人皮膚問題

響應式設計 支援各類型設備

本公司設計的網頁,支援多設備瀏覽,滿足不同用戶及現時的網頁設計趨勢。

客戶背景:美容中心形象網站

Weirdo Beauty是香港本地的新興美容中心,主打標靶式皮膚管理方案。真正為客戶做到針對性治療。而網站就代表了美容中心另一個「門面」,展示美容中心的形象個性。

客戶需求及網站規劃

客戶的美容中心開業不久,本身沒有建立網站,因應現時趨勢,「網絡門面」亦不可缺少,因此客戶希望設計一個形象符合實體店用色設計、可作預約及有購買功能的網站。

風格確認及前期mock up

客戶美容中心新面貌還在裝修期間,設計團隊先利用常見的裸色色調及在客戶社交媒體抽取過往素材進行Mockup設計。而且為了架設一個精明而且客戶喜愛的網站,設計人員分別準備了以照片為主及以插圖為主的主頁mockup供客戶參考。令客戶可以清晰想像日後網站的風格,挑選到「心水」設計。

經過跟客戶的討論後,客戶希望以一個更簡約的方式呈現網站。因此,設計人員去除了相關的插圖設計,以圖片為主,利用簡單的線條及空間分隔不同區塊。加上最後取得美容中心新面貌的圖片,利用室內環境作為主頁主視覺。以及抽取配色作為網站的主色,跟實體店互相呼應。

Final Output

最後定稿

經過與客戶在主頁內頁設計的討論、不同mock up版本設計,最終客戶選擇了以下頁面設計風格。以客戶拍攝的相片及不同裸色色系呈現Weirdo Beauty是一家有個性、獨特風格的新式美容中心。

Features

網站特色功能

本次項目除了基本視覺設計之外,跟客戶討論需求過程中,亦 設計了不同的網頁功能。

網站menu 動態效果

客戶著重網站呈現的細節,希望在menu部分加入效果,配合整體形象,令網頁更加精美。因此,團隊調整了menu出現時的淡入效果,而且加入懸停效果在每一個子項目中,用細節設計提升整個網站的質感。更加符合作為美容行業網站的標準。

完整網上商店

因為客戶亦會上架一些美容產品,所以我們為客戶在網站亦加入了網店功能,包括:購物車、產品購買、支付系統、Wishlist等等。較特別的是我們為客戶架設了一個側欄的產品篩選功能,供網站訪客更精確挑選所需的產品。

案例輪播效果 & 文章柵格展示

作為一家美容中心,除了自身的療程資料,主要的文字資訊來自個案分享以及美容文章。為了用更美觀的方式表達,設計人員使用了透明區塊展示不同的個案,加上輪播效果,更清晰轉換而且不會過份專注在療程圖片當中。而柵格(grid)式的文章長示,加上客戶準備的插圖令視覺更加豐富,吸引訪客點擊。
Website color

網站色調處理

如上述所講,網頁整體視覺設計的色調取材於客戶實體美容中心的新形象。利用不同的裸色系作為網站主色,強調網站作為美容行業的主題

另外,設計人員亦調整了不同色系的深淺作為輔助顏色以作區隔不同內容section以及強調標題。

網頁界面設計

網站除了要展示療程方案資料外,亦包括了不同療程子項目。因此,如何將資訊清晰整理是一個在架設網站時面對的挑戰。

除了顏色上要符合行業性質,設計人員亦將網站字體設定為明體,更能表達美容業的優雅感。

比較表格設計

為了令客戶的資訊更清晰表達,我們設計了html表格作為展示方式,尤其是當資料出現比較項目時。配以網站的用色,優美之餘亦令訪客閱讀方便。

頁面layout設計

療程面頁,我們統一使用了全螢幕的banner圖作為頁首,加上項目標題,視覺效果豐富。而內文亦利用舒適的版面佈局,由上而下引導訪客查閱網頁資訊。在尾端加上call for action的section促使網站訪客作進一步的查詢。

怎樣才是成功的網站?

除了外觀,還有搜索引擎排名

我們提供SEO優化增值服務為你的網站處理好外觀後再提升搜索排名,得到更多曝光。

Scroll to Top