【網頁設計】平面設計原則｜Color Image Typography Composition

設計一個網頁時，要如何做到吸睛？如何引導讓閱讀者清楚明瞭流程？這時候就需要應用上四個基本的圖像設計要點與其中的原則，作為發展企業視覺形象的基底。

平面設計要點

• 色彩（color theory）
• 圖像（imagery）
• 字樣（typography）
• 布局（composition）

Great visuals really help get the message across to your audience quickly and effectively.

如何吸睛？

• 為品牌設定一個合適形象的主體色與輔助色，每個顏色都有它帶給人的感覺。
• 白色：潔白、精粹純淨、簡單獨立。（Pristine）
• 黑色：暗黑、制式奢華、力與優雅。（Authority）
• 紅色：熱情、自信大膽、領導能量。（Willpower）
• 粉紅：女性、溫暖培育、關懷尊敬。（Feminine）
• 藍色：現代、覺醒自足、遠望企圖。（Content）
• 綠色：自然、平衡穩定、正向成長。（Sanctuary）
• 橘色：樂觀、新穎即時、衝動外向。（Spontaneity）

• 利用互補色來做視覺強調，引導視線做點擊等行為。（如下圖）

[Color Wheel, from HubSpot.com]

• 多利用展示而非說明，使用者處理圖像資訊較快速。
• 在圖像中放入「人」在做動作，會令觀眾更有感。

清楚明瞭怎麼做？

• 利用留白、對比來凸顯重要性，讓視覺更流暢。
• 首先圖片解析度要清楚、使用得當，在其上搭配對應精要文字（Overlay responsive text）幫助行動裝置閱讀、定位，要事先用手機瀏覽測試。
• 文字的使用量不要過多，讓人看圖說故事，適時輔助解釋就好。
• 字型選擇上，人們習慣閱讀較熟悉的系統字型(Syetem fonts)。同一頁約2到3種就好。
• 如：ARIAL, HELVETICA, ROBOTO。
• 內文用有襯字（Serif）字體提高閱讀速度，標題選擇無襯字（Sans-serif）引起注意。
• 如：nbcnews的「標題」與「內文」的襯字差異（如下圖或點進連結）。
• 如：The Washington Post, The Wall Street Journal, The New York Times ...

[Serif代表襯字，Sans = "without, 沒有"]

　　最後著重在功能性的部分，可將企業的核心價值總結整理，根據使用者閱讀（或完成某項業務）的流程習慣來設計排版（常以Z字型，由上往下，或聚焦於正中央）。在頁面上保留最重要的訊息作呈現，切勿凌亂無章。資訊量豐富不一定等同於亂，端看怎麼排整齊還有留白，抓準閱眾習慣。


這篇文章內容主要整理自Hubspot線上課程資源還有過去累積閱讀過的材料。Hubspot上面充滿關於集客行銷（Inbound Marketing）的內容，包含設計層面、業務說服等能力的培養。有興趣可以多逛逛，看看完整的影音課程。