每个网站构建需要关注的 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 免费赠品！