建立品牌形象 – 網頁設計的重要性及網頁配色
大家無論係開網店,抑或是其他實體企業,要想自己的品牌變得更突出,使新客戶留下較深刻的印象,其中一樣最關鍵的元素就是網頁了。而網頁中其中最重要的一環就是網頁設計了。
網頁為甚麼重要
有些人可能會認為,你已經有在facebook銷售以及推廣你的業務,為甚麼還需要一個網頁呢?其實這是有很多原因的,日後有機會我會分享更多:
- 更好的分類文章(可參考乳您一起的例子)
- 讓顧客可以直接透過信用卡或Paypal等支付工具支付
- 更容易管理客戶訂單
- 可跟據過往的銷售紀錄upsell
- 可以讓顧客留下email用作日後銷售用途
- 更好的進行搜尋引擎優化,使更多新客戶能找到你
- 以及,我今天想分享的,建立自己的品牌形象,使自己從其他品牌突出
網頁如何能使品牌更突出
有些人又會問了,難道我的facebook page 不能嗎? 你可以想像一下,facebook page每一個page統一的格式,統一的風格,可以突出自己品牌形象的位置實在不多,最大的空間也許就是頁頂的background image。你從以下的兩個截圖,也實在不太能一眼就辨認出兩間店舖的風格。


但是你到兩間公司的網站一看:


這很明顯就能看出兩家店舖的定位的不同。
而這個在乳您一起網頁也可以見到:


在網頁中,客户希望我用了粉紅色,以突出乳您一起是一個乳癌關注團體(配合乳癌關注運動的粉紅絲帶)。在facebook 專頁,效果則相對沒這麼突出。同時,在網頁裏,我也用了手寫的字體,以讓閱讀網頁的乳癌患者感覺比較溫暖,特別是在這個對於她們是很困難的時期。而這些效果,facebook也是沒辦法可以突出的。
網頁設計色彩配搭
有了品牌logo,有了內容,那該如何使網頁美觀呢?這有很多元素,今天我就主要探討其中一種很實用的色彩配搭風格,日後有機會再探討其他方面。
單色配色 (Monochromatic color)
這個是我非常喜歡使用的配色方法,在Oasisworks網頁和乳您一起網頁中,我主要用這種方法配色。
基本概念就是以一種顏色為基礎,調整其中的飽和度(Saturation)和明度(Lightness),色相(Hue)保持一樣或接近。這樣你將會得出一系列同一風格,但是又層次分明的顏色。
要更了解這套配色方法,首先我們需要了解HSL顏色格式:
HSL顏色格式
傳統RGB的表達是(0,0,0) (全黑) 到 (255,255,255) (全白),其中括號內的數字分別為紅色,綠色和藍色所佔的比例。


而HSL就用了另一種的表達方式。
H: Hue 是指色相。概念是把所有顏色放到一個圓形,設0度為紅,120度綠綠,240度藍,而中間過渡的顏色亦有相對應的度數。
S: Saturation 是指飽和度,100%是完全飽和,而0%則為度色,百分比越高灰度越低
L: Lightness,100%為全白,0%為全黑。
以乳您一起的網頁為例子,背景顏色為#F9EBEA(4°, 55%, 94%),文字顏色為#DD6A73(355° ,62% ,64%),按鈕文字顏色為#D4404C (355°, 63%, 54%)。

三種顏色的Hue接近(都是在0度附近),最大分別其實是在Lightness。背景較為明亮,而文字較深色,按鈕文字就更深色,使文字可清晰的顯示。
可以看到透過保持Hue接近,就可以使頁面較有層次感,同時可突出品牌的主體顏色。