[ 網站設計 . 配色 . 設計流程 ] - 網站配色流程 - 以企業形象網站為說明例子

通常在提出網站設計色彩計畫方案時，我會習慣檢視一些現狀，

幫助自己找到一些條件來做篩選，且也可用於在提案時，

引導客戶做出選擇。

Step 1. 了解業主製作網站現狀

  以網站配色來說，現狀的內容可包含

  1-1. 製作網站的目的          

          是形象網站呢？還是行銷所使用的短期網站？或者....等其他目的。

          粗略來說，企業形象網站通常會沿用原本 CIS 規範中的標準色來執行。

          短期行銷網站注重的可能是要快速吸引人，配色上便需要能夠讓人印象深刻、
          通常對比色的配色較容易達到此目的。

  1-2. 業主產業別   

          每種產業都容易有既定印象色彩，像是電子產業通常直接讓人聯想到藍色色系、

          農業相關的可能是大地色系、主打女性相關網站可能會帶入大量粉色系...
          如果對該領域無相關經驗
          我常會去像是io3000 ( 網址：http://io3000.com/ ) 這個網站找出該產業的網站，

          觀察該產業大約如何配色 ( 觀察其色相 明度 彩度 ) ，可以幫助提出較不容易出錯的提案

  1-3. 業主行銷經驗

          通常業主可能會有自己的色彩喜好、或者在行銷經驗時，
          觀察到哪種配色或手法容易吸引住使用者

          也可請客戶提出是否有喜歡的網站可供參考

  1-4. 了解現有可用資源

          以形象網站來說，可詢問業主是否有網站的VI規範、標準色的色碼
          如果只有LOGO，至少也可以從上述了解的現狀去篩選合適的配色

Step 2. 確立提案的差異性

    一般來說，初次的提案可能會提出 2 ~ 3 組的主頁設計供業主選擇
    如果三組都提的平分秋色，容易造成讓業主選不出的狀況

   
    理想的狀況是 →
    一組是保守 + 安全選擇
    一組是在保有現有文化 ( 或者限制條件 ) 下，但設計者認為最佳的提案

    最後一組則是不花太多時間的陪襯選擇

    以形象網站來說 ( 若沒有太嚴格的配色規範下 ) ，
    標準色是三個提案都必須被納入的選項

   ** 安全配色法有：

    1.  85 %以上的1色無彩色 ( 黑白灰 )做底色 + 1色標準色
        → SAMPLE 01：http://www.nihonmatsu.co.jp/        
        → SAMPLE 02：http://www.ckd.co.jp/

        → 標準色部分至多在一個同色系為輔助色彩               

        → 安全等級：★ ★ ★ ★ ☆


    2. 70 %左右的1色無彩色 ( 黑白灰 ) + 1組互補色彩
        → SAMPLE：http://www.kddi.com/ 
        → 互補色彩可參考下圖色環                
        → 安全等級：★ ★ ★ ☆ ☆

               

        * 選擇一色後，180度、對面那個色彩即為互補色。( ex:紅色、綠色為互補色彩 )

        

        

Step 3. 經驗小細節 - 以形象網站來講解

  3-1. 攝影圖調性與配色一致

         通常企業形象網站在首頁會放置較多的形象圖，         
         且首頁是使用者對該企業的第一印象，         
         圖片的色彩也須調整成與企業形象給人的意象一致。
          舉例來說：https://www.shiseido.co.jp/anessa

          

          

         網站的配色是配合防曬乳商品的配色，
         製造出一種豔陽高照下 ( 亮黃色 ) ，皮膚還能保持清爽 ( 水藍色 ) 的感受。 

        
         在首頁所用的攝影圖中，         
         女性代言人全身的配色也是黃 ( 耳環、小紙袋 ) 藍 ( 洋裝 ) 配色為主。        
         攝影照片的彩度、明度上也同網站配色般一樣。

  3-2. 考慮使用者的閱讀舒適性

          企業形象網站通常在首頁、ABOUT頁面較多圖像，
          當進入其他內頁時，可能以較多的內文閱讀為主，
          色彩若選擇對比強烈配色時，在以閱讀性為主的頁面時，
          盡量讓主配色彩相對於整個版面比例降低，維持閱讀舒適性。

< 其他 > 可參考的配色網站

01. kuler → https://kuler.adobe.com/zh/create/color-wheel/  02. nipponcolors → http://nipponcolors.com/#fujinezumi  

03. 學學 → http://www.xuexuecolors.org.tw/index.php

< 其他 > 可參考的集合網站

01. 4db → http://4db.cc/  

02. .sg_bookmark → http://bookmark.dot-sg.com/  

03. io3000 → http://io3000.com/  

04. awwwards → http://www.awwwards.com/  

05. bestwebgallery → http://bestwebgallery.com/  

06. cssdesignawards → http://www.cssdesignawards.com/website-gallery.php       

07. straightline → http://bm.straightline.jp/