如何对您的网站进行设计审核

已发表: 2017-06-27

随着您网站的发展,其设计可能会开始显得有些陈旧。 请记住,设计趋势在不断发展,如果您希望您的网站看起来现代和“新鲜”,那么能够发现这些问题非常重要。 此外,您还需要保持设计的所有方面看起来统一(和可用)以提供良好的体验。

发现和纠正这些问题的最佳方法是对整个网站进行设计审核。 在本文中,我们将教您这些审核是什么以及它们如何帮助您。 然后,我们将讨论一些帮助您进行操作的工具,最后向您展示如何通过三个简单的步骤进行操作。 让我们开始工作吧!

什么是设计审核(以及它如何帮助您)

设计审核是指您坐下来审查您的网站或公司的视觉品牌元素。 在大多数情况下,您正在寻找一致性,但该过程也提供了一个绝佳的机会来检查您的设计是否仍然看起来很新鲜。

老实说,“审计”这个词让整个事情感觉比实际更具威胁性。 无论如何,对您的网站进行定期设计审核有几个好处。 例如:

  • 有机会检查您的设计。 随着设计趋势的流行和过时,您的视觉元素也可能开始显得有些陈旧。 设计审核可以为您提供现实检查和升级机会。
  • 查看您的品牌。 大多数网站都有基于多种视觉元素的自己的品牌,例如其徽标、标语、标题图像等。 随着时间的推移,这些元素可能会变得不匹配,这反过来又会影响您的品牌形象。
  • 您可以将其作为咨询服务提供。 如果您有成功进行设计审核的经验,则可以向其他公司推销您的服务并帮助他们完成流程。 许多企业都没有意识到他们提供的好处,所以如果你能说服他们需要他们,那么机会就成熟了。

在您开始向其他网站提供服务之前,了解每个设计审核的基本步骤是很重要的。 可以想象,在此过程中,您需要一些工具来帮助您,所以让我们来看看一些最重要的选项。

3 个帮助您审核网站设计可用性的工具

如果您是设计师,您就会知道网上有无数工具可以让您的生活更轻松。 但是,在本节中,我们决定只关注那些可以帮助您审核站点元素并检查设计中是否存在任何缺陷的内容。 让我们来看看其中的三个。

1. 疯狂蛋

Crazy Egg 主页。

Crazy Egg 是一种分析工具,专注于帮助您找到网站上的问题区域。 它使用热图技术使您能够查看页面上哪些元素最受关注,哪些元素绘制得不够。 此外,它还包括帮助您了解用户是否正在滚动浏览您的内容的功能。 Crazy Egg 还为您提供有关访问者来自何处的宝贵数据,然后根据这些数据细分他们的行为。

从设计的角度来看,这种类型的工具非常宝贵,因为它使您能够将设计中最需要帮助的区域归零。 例如,如果您的热图显示一个关键的号召性用语 (CTA) 没有获得应有的吸引力,您可以在下一次设计审核期间优先对其进行分析。

主要特点:

  • 在您的网站上实施热图。
  • 跟踪访问者向下滚动页面的程度。
  • 密切关注您的流量来源,并根据这些来源细分您的用户数据。

价格:每月 9 美元,每年支付 | 更多信息

2. 可用性工具

UsabilityTools 主页。

热图是一个强大的工具,可以帮助您了解用户的行为,但没有什么比实际看到他们如何与您的网站进行交互更重要的了,一步一步。 UsabilityTools 使您能够通过记录您的用户在您的站点上执行的每个操作(包括鼠标移动、表单交互和点击)来实现此目的。

这听起来可能有点矫枉过正,但如果您很难弄清楚您网站的哪些元素没有按照应有的方式吸引用户,这是识别它们的绝佳方式。 此外,可用性工具可帮助您细分从访问者那里收集的所有数据以进行快速分析。

主要特点:

  • 跟踪用户在您网站上的鼠标移动、点击和表单交互。
  • 细分您收集的数据以便于分析。
  • 与您团队的任何成员轻松共享录音。

价格:每月 19 美元 | 更多信息

3. 可用性中心

UsabilityHub 主页。

最后但并非最不重要的是,我们有 UsabilityHub。 这有点不同 - 它是一个包含多种工具的平台,其中任何一种都可以帮助您成功进行设计审核。

它包括一个五秒测试,它确定用户是否能记住您网站的设计,以及衡量可用性的点击和导航测试。 最后,您还可以访问受众调查,帮助您确定他们是否喜欢您的设计,以及他们希望看到哪些变化。

主要特点:

  • 使用多个测试来衡量您网站的可用性和您的设计的接受度。
  • 混合和匹配您喜欢的任何测试以满足您的需求。
  • 自定义您的每个测试以衡量您最感兴趣的元素。

价格:每个对您的测试的响应 2.50 美元 | 更多信息

如何对您的网站进行设计审核(分 3 个步骤)

现在我们已经探索了一些您可以使用的工具,是时候讨论成功设计审核的步骤了。 根据您的网站和目标,您可能不会使用我们讨论过的所有工具——但这取决于您。 让我们跳到第一步。

第 1 步:收集所有视觉品牌元素

Instagram的主页。

Instagram 是具有简单但一致的品牌的网站的一个很好的例子。

在确定您的设计是否存在任何问题之前,您需要收集网站的所有品牌元素。 这样,您将能够发现他们的风格之间是否存在任何不协调。

这样做使您能够以鸟瞰图分析所有关键品牌元素,并检查它们是否合在一起(这是我们将在下一步中讨论的内容)。 将您的元素聚集在一起可能听起来没有必要,但是在您查看整个图片之前,您的设计中的某些缺陷可能不会变得明显。

至于您需要收集哪些元素,这里有一个简单的列表可以帮助您入门:

  • 您网站的所有格式的徽标。
  • 任何背景和标题图像。
  • 您在整个网站中使用的所有图标。
  • 您用于内容的所有字体的示例。
  • 您在整个设计中使用的色调的调色板。

目前,我们建议以您最喜欢的格式保存这些元素。 您可以创建 PDF 以便更轻松地共享,或将实体副本传递给您的团队。 一旦您的编译文件或文档准备就绪,就可以开始工作了。

第 2 步:分析您网站的视觉元素

Netflix 的主页。

Netflix 的品牌战略简单但始终如一——他们确保尽可能使用他们的标志。

正如我们之前提到的,第二步是通过你的视觉品牌元素来发现你的设计中的任何不一致或缺陷。

设计(当然)在很多方面都是主观的,但这并不意味着您网站的风格无法改进。 例如,每个企业都应该呈现连贯的设计风格,让他们的客户习惯它,并将其与他们的产品联系起来。 网站也是如此——您的徽标、内容和图像都需要共享相同的风格并保持一致。

让我们通过一些简单的技巧来确保您网站的视觉元素在这些方面达到目标:

  • 检查您的徽标是否在所有页面上保持一致,如果不一致,请在必要时进行更换。
  • 确保您的背景图像具有相似的风格,这样您的页面和部分之间的过渡就不会刺耳。 如果您发现任何不适合模具的图像,请更改它们。
  • 确保您的图标具有相似的风格,如果没有,请尝试用单个系列中的替代品替换它们,例如 Font Awesome Icons(可以与 Divi 集成)。

到目前为止,我们只讨论了在线元素,但请记住,设计审核可以——而且应该——也涵盖你的离线视觉元素。 如果您的企业有实体店,您需要收集任何可以拿到的品牌物品(例如小册子、T 恤和电话卡),并为它们重复第 1 步和第 2 步。

第 3 步:为您的网站创建设计标准手册

品牌手册的示例。

Urban Outfitter 的品牌指南手册讲述了是什么让他们的品牌与众不同。

现在是时候为未来做计划了。 最好的方法之一是为您网站的任何未来设计更改创建规则汇编 - 也称为设计标准手册。

本文档的目的是确保今后您可以将设计工作外包,而无需对其进行微观管理。 此外,随着您网站的发展,您的工作团队可能会增加更多成员。 标准手册可以帮助他们更好地了解您的视觉品牌。 事实上,这是一种非常明智的做法,许多顶级公司都参与其中。

至于要在您的手册中包含哪些类型的规则,让我们回顾一些帮助您入门的想法:

  • 包括有关如何使用徽标及其变体的指南(顺便说一下,这也是一种常见做法)。
  • 附上贡献者应该在您的网站上使用的图像类型的示例,以及有关如何呈现它们的规则以及他们应该避免的内容类型。
  • 如果有多个选项可用,请讨论您应该在整个网站中使用的字体,以及在什么情况下应该使用它们。
  • 提供您想要在设计中使用的按钮、图标和其他类似元素类型的示例。

请记住,没有两本设计标准手册是相同的。 您可能需要根据您的网站使用的元素添加更多规则,以及您是否想谈论离线品牌。 但是,尽早进行设置不仅可以确保未来的设计审核更顺利进行,还可以帮助您更快地为团队培训新成员。

结论

随着时间的推移,大多数网站在设计时需要进行修饰是很正常的。 例如,您的某些元素在视觉上可能无法很好地相互配合,但如果不定期进行完整的设计审核,就很难发现这一点。 更重要的是,这样做将确保您的访问者将来继续在您的网站上获得良好的体验。

以下是对您的网站进行设计审核的三个基本步骤:

  1. 收集您所有的在线和离线视觉品牌元素。
  2. 分析您收集的元素。
  3. 为您的网站创建设计标准手册。

您对如何为您的网站进行成功的设计审核有任何疑问吗? 在下面的评论部分提问!

1981 年 Darko 的文章缩略图/shutterstock.com