[網站設計資源]選色3步驟,網站配色沒問題

191030 每日_工作區域 1

還記得在之前的文章光先生有介紹過網站素材懶人包,包括靈感、字體、配色等的內容,這篇要來教大家如何找出適合自己網站的配色哦!,話不多說,跟著光先生來瞧瞧吧!

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

網站配色3步驟

1.選擇主要顏色

主要顏色即為品牌顏色,當訪客進入網站時,第一眼就會記住的顏色,有助於訪客對品牌的印象及感受!

如果已經有LOGO,不妨可以從LOGO的配色抓出適合網站的顏色,像是以光曜LOGO舉例,使用了兩種顏色,深灰色及藍灰色作為配色,因此在設計網頁配色時,也選用了這兩種顏色作為網站配色!

如何在網站上決定主色呢?

一般來說不會隨便選擇品牌顏色,經過討論後才定案沿用至品牌和行銷的一部分,不同的顏色具有吸引特定類型購物者的特性,甚至可以改變消費者的行為。

以下這張圖可幫助找出貼近品牌的主色調

圖片出處:websitebuilderexpert

主色小貼士:

可在訪客需注意的地方使用主色(例如撥打電話、填寫連絡表單、註冊網站等),主色主要引導訪客了解整體重點。

2.選擇重點色

網站內的顏色很少只有一種的,除非原本想要極簡的風格又或者是商品圖本身已很繽紛,不然一般都會有兩種以上的顏色,透過使用重點色來突顯按鈕、標題、框線等輔助注意的部分!

如何在網站上使用重點色?

重點色的挑選除了可從LOGO選擇外,也可以使用較能吸睛的顏色,如互補色,突顯輔助訊息,雖然不是網頁的重點內容,但也可以達到聚焦的效果,顏色選用為1-2種,顏色過多反而會失去重點色的意義,也會使訪客感到混亂!

3.選擇背景色

背景色的就好比房子的牆壁顏色,如何挑選合適的就是一門很大學問,既要能看得久、順眼,又要能符合品牌或商品圖的整體畫面,也要能讓訪客能舒適的瀏覽網站!

如何在網站上使用背景色?

背景色的挑選在不同性質的網站可能會有點差別,以下分成三類說明

A .訊息網站和電商網站
常用色:白色或中性的背景色,因為網站目的是宣傳想法或商品。
原因:重點是文章或商品,不是網站的設計,背景顏色選用白色或淺色並帶有大膽的主色和重點色,有助於內容或商品更容易被集中注意。

B.公司和商業網站
公司/商業網站通常有兩個目的-推廣品牌或其服務,根據網站目的,背景顏色也會有所不同。

提升品牌
建立強大的品牌形象時,應使用各種主色調或品牌顏色作為背景色,這會鞏固品牌並使其更容易被訪客記住,假如品牌顏色太強烈會建議使用相近的彩度或亮度加以改善。

推廣服務
如果是服務項目成為重點,推薦白色或中性的背景色,和訊息、電商網站一樣,重點在於內容。

C.圖形密集型的時尚和創意網站

對於時尚、設計、餐飲、美容、創意產業使用的網站,背景色就比較隨意了,但要注意的一點是『內容要方便閱讀』,才不會因為好看的背景而造成閱讀性不佳。


如果怎麼配都不好看,最保險的顏色就是白色或淺灰色,雖然普通,但確是襯托內容及商品的最佳顏色!

網頁選色小工具

這邊介紹幾個好用的網頁工具,可以作為背景色或是選色的參考!

*顏色搭配
Adobe color
https://color.adobe.com/zh/create

*漸層配色
Grabient
https://www.grabient.com/

*品牌配色參考
BrandColors
http://brandcolors.net/

介紹到這邊,相信大家是不是覺得這個外掛超級實用的呢?你在找購物網站/部落格/電商/官網/一頁式網站嗎?還在煩惱怎麼下手嗎?不妨選擇我們吧!現在購買網站不僅有提供Elementor pro專業版還搭贈網站教學影片,如此好康優惠快來了解吧👉600元就能做網站

喜歡的話請幫我們到「光先生」粉絲團按讚分享,或訂閱我們的Youtube頻道哦!我們會推出更多的內容及影片的!

「以不一樣的思維進行廣告行銷,進而認同品牌價值」,
立志讓更多人知道原來廣告行銷也可以這麼好玩!!

每日學,文章推廣

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

發表留言