每個網站構建需要關注的 3 個重要設計領域

歡迎來到第 3 部分，這是我們迷你係列“Effective Divi Web 設計原則”的最後一篇文章，我們正在探索有效的設計實踐，以幫助新的網頁設計師和那些認為自己沒有“設計眼光”的人。

既然我們已經介紹瞭如何準備和學習如何更好地看待設計，並且已經在我們的工具箱中了解了一些有效的設計原則，我們將專注於 3 個非常重要的設計領域，它們是實現設計的關鍵精心設計的網站。

讓我們開始吧！

每個網站構建需要關注的 3 個重要設計領域

如果您一直關注本系列的前兩篇文章，您就會聽到我指出設計沒有對錯之分，但是除了我們討論的有效設計原則之外，還有一些重要的，我關注的實用設計領域，以確保每次都能成功地構建令人賞心悅目的網站。 最好的部分是，這些想法可以轉移到任何類型的行業或網頁設計風格！

1) 排版和字體

您的網站可以擁有漂亮的圖像、引人入勝的色彩和令人愉悅的設計元素，但如果該類型看起來與網站的風格不符或不符合網站的風格，則它可能是一個主要的威懾因素。 由於我們在本系列中沒有深入了解排版的基礎知識，如果您想了解更多有關基礎知識的信息，請參考我們的 50 個網頁設計師應該知道（並理解）的排版術語文章。 了解字距調整、行距、跟踪、sans 和 sans-serif 字體將非常適合希望在字體和設計方面變得更好的人。

讓我為您提供一些實用的排版指南，我作為一名成功的 Divi 網頁設計師，其客戶的設計風格和行業差異很大：

使用與您的網站行業/設計相匹配的字體——在本系列的第一篇文章中，我回憶了一個例子，我承認自己設計了一個具有出色圖像和顏色但字體不匹配的網站。 簡而言之，這是一個工業製造場所，我最初使用的字體是更現代、更時尚的風格，確實不適合公司的外觀和品牌。

這並不意味著您不能在字體方面發揮創意，或者您必須符合行業現狀，但實際上，如果您在專業服務網站上工作，您可能不會想要過度-涉及頂級，藝術字體。 反之亦然，如果您正在創作具有獨特藝術氣息的東西，那麼 Arial 或 Helvetica 可能與您想要的氛圍不符。 這讓我想到了混合和匹配字體的下一個要點。

堅持使用 2 到 3 種字體——幾十年來經受住時間考驗的基本設計原則是限制您使用的字體數量。 太多的字體會分散讀者的注意力，經常混淆等級制度，坦率地說，最終看起來就像一個老的西方傳單，為不法分子尋求獎勵。 我經常堅持使用一種字體作為標題和標題，然後通常為我的所有段落文本使用易於閱讀的無襯線字體。 有時我會為主菜單使用第三種樣式字體，但我的菜單字體通常與我的標題一起簡化。

有關如何將字體配對的更多想法，請參閱上一篇關於網頁設計中字體配對的文章：揭示和解釋的 7 條關鍵原則

為您的文字提供視覺效果——您的內容中有相當數量的文字很棒。 事實上，從搜索引擎優化的角度來看，建議每頁至少有 300 個字。 但要注意文字過多而視覺輔助不足。 對於書籍、博客、文章和其他長篇內容，預計會有大量文本，但如果您正在設計一個漂亮的引人入勝的登錄頁面，過多的內容會讓用戶在他們進一步查看之前感到厭煩。 我經常以這樣的心態進行設計，即首頁應該是讓客戶通過門的銷售渠道，然後他們可以潛入更多頁面、博客和其他資源以獲取更詳細的信息。

Elegant Themes 主頁目前就是一個完美的例子。

在這個例子中，我們看到一個引人入勝的標題、一段帶有號召性用語按鈕的文本和一個漂亮的視覺圖形，它與保持用戶參與的消息相關聯。 在組織大量帶有視覺效果的文本時，這是一個很好的例子。

我曾經有一個漂亮的首頁設計了文字和視覺效果，當我將其交給我的客戶進行基本編輯時，他們將看起來像一本書的一小章的內容傾倒在首頁上，這完全破壞了設計流程我創建。 所以讓它成為一個教訓，並知道雖然內容很棒，但需要相應地放置！

另一個值得參考的重要資源是 2016 年要注意的 20 種排版趨勢，因為這些趨勢在今天仍然非常有效，並將繼續向前發展。

2) 圖像和色彩管理

與排版類似，我傾向於為我的網站構建堅持最多 2 到 3 種原色。 除非公司或組織在品牌中使用過多的顏色，否則我發現太多的顏色（特別是如果它們不匹配時）可能會非常分散注意力並且經常令人困惑。 以下是我在混合顏色和圖像時遵循的一些準則：

基色和強調色——我發現在最近的項目中非常成功的一種方法是採用客戶的品牌，如果他們還沒有，為號召性用語、鏈接等選擇一個很好的強調色。例如，在這個網站上，我採用灰色和橙色的徽標品牌，並添加了一種微妙的深青色/藍色，以幫助使橙色“流行”作為主要的強調色。

用圖像簡化顏色——將您的設計和圖像完美結合的一種方法是將網站顏色與一些主要圖像相匹配。 這個例子有點罕見，因為我能夠將網站顏色與我客戶的服裝相匹配，這使得圖像和網站顏色之間的流線型感覺非常好。

我從我的客戶服裝中選擇了漂亮的栗色和橙色，並且能夠將整個網站以漂亮的製服外觀整合在一起。 現在，您很少會遇到可以從圖像上標記整個網站的情況，但是在使用帶有號召性用語等的背景圖像時，可以應用相同的原則！

實際上，如果您不確定如何選擇某些顏色，這裡有 10 個顏色選擇器工具

避開過於鮮豔的顏色——我經常看到新設計師使用超亮的綠色、粉紅色、黃色等，使人瞇起眼睛並遠離屏幕。 我不會在這裡指出任何不好的例子，但我相信你已經看過很多網站，其中的顏色讓你轉身離開，再也不想回頭。 鮮豔的色彩當然沒有錯，只要確保它們不會產生這種效果。 這是從其他設計師那裡獲得建設性批評和反饋可以得到回報的地方。

我的建議是使用相當中性的顏色作為基本顏色，如文本、背景圖形等，然後使用更鮮豔的顏色來調用操作、鏈接和頁面設計中更多吸引註意力的區域。 如果您不熟悉設計並且顏色不適合您，請隨時參考我們的 WordPress 網頁設計師配色技術，它將提供大量關於如何更好地選擇顏色的選項。

3）強大的號召性用語

最後，網頁設計的一個非常重要的領域是要有強烈而清晰的行動呼籲（CTA）。 糟糕的網頁設計最常見的問題之一是具有大量文本驅動的內容，而沒有明確的號召性用語。 內容很棒，但如果都是信息而沒有轉換，您的客戶肯定不會滿意。 我建議使用強調色或漂亮的懸停效果使您的 CTA 與設計中的其他元素脫穎而出。

這是我如何為最近的客戶實施號召性用語的示例。

在這種情況下，客戶對網站用戶的主要號召性用語是註冊電子郵件更新，因此我們立即從較暗的背景圖像中彈出徽標和一些文本，立即有機會註冊在向下滾動之前。 理想情況下，您希望將用戶的注意力吸引到您的號召性用語上。 這就是在網站上擁有充滿活力的強調色或效果非常有益的地方。

以下是我在號召性用語方面堅持的一些準則：

以強烈的號召性用語結束您的主頁——通常情況下，我的主頁設計幾乎是對整個網站的回顧。 例如，如果一個站點具有如下結構：

• 關於我們
• 服務
• 感言
• 博客
• 接觸

我將為主頁中的每個部分發出號召性用語，然後為主要的號召性用語設計一個最終的、時尚的設計，在這種情況下就是註冊。 這是我的意思的一個主要例子：

首頁基本上封裝了整個網站，是用戶點擊查看畫廊、視頻和更多信息的起點。 也許這種心態會像在主頁設計中一樣幫助您！

在側邊欄中發出號召性用語 -不要忘記在側邊欄中發出強烈號召性用語的機會！ 特別是如果您有一個包含博客文章或其他經常使用側邊欄的頁面的網站。 這是一個很好的機會，可以添加額外的電子郵件註冊、捐贈按鈕或指向另一個主要 CTA 的鏈接。

與上面的網站類似，我個人網站的主要號召性用語之一是電子郵件註冊，雖然它位於我主頁的前面和中心，但我想確保在我的博客文章和教程頁面上也非常明顯.

在這裡，我在每個帖子模板的右上角都有它，並且在主註冊表單的上方和下方都有一個強烈的視覺效果。 因此，如果您有帶有側邊欄的頁面，請記住，這些區域對於強烈的號召性用語來說是寶貴的空間！ 並且您希望確保並讓您的 CTA 引人注目，最好位於側邊欄的頂部，該側邊欄將首先顯示在主要內容下方的移動設備上。

在子頁面內容之後發出號召性用語——最後，也許最容易被忽視的是，記住在你的普通頁面上有一個號召性用語！ 直到最近客戶要求時，我才承認自己忽略了這一點。 下面的示例在其主要服務頁面的末尾有一個強烈的號召性用語。

當網站用戶查看該頁面時，他們將獲取所有信息，然後有機會聯繫我的客戶，如果對右側的漂亮、歡迎的圖像感興趣，左側的 CTA 按鈕由鮮豔的橙色支持，這有助於該部分彈出頁面。 是的，我知道我在上一篇文章中說過，我通常將 CTA 放在中間或右側，但這種佈局似乎很好用

系列總結

好吧，我希望這個系列能幫助你啟發一些好的網頁設計原則和策略，你可以將它們應用到你的網頁設計工作中！ 讓我們快速回顧一下我們在整個迷你係列中的內容：

第1部分

• 準備你的心態
• 如何學習好的設計趨勢
• 獲得對您工作的反饋和建設性批評

第2部分

• 遵循三分法則
• 佈局和流程
• 視覺層次

第 3 部分

• 排版和字體
• 圖像和顏色
• 強大的號召性用語

同樣，整個學術研究都致力於良好的設計，所以我們在這裡只是觸及皮毛，但我希望這些原則和實踐能夠幫助那些想要在正確方向上做得更好的人指明方向。 如果您有任何其他對您有幫助的設計原則或方法想要分享，請隨時在下面的評論中告訴我們！

祝我們所有人每天都成為更好的 Divi 網頁設計師！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！