设计的驱动力——网站重新设计案例研究

什么时候进行网站重新设计最合适？

谁没有遇到过看起来过时和被遗弃的网站？ 就像被遗弃在沙漠中的一辆破卡车的外壳，多年来显然没有动过。

网站因各种原因而改版。 遗憾的是，许多企业没有意识到他们的网站需要重新设计，当竞争对手通过改进他们的网站获得竞争优势时，他们就会落后，从而提高他们的转化率。

企业经常犯的一个错误是没有尽早考虑如果他们的网站需求变得更加复杂会发生什么，因此，当他们需要扩展它时，他们会发现自己处于困难、可能代价高昂的境地。 此外，搜索引擎优化 (SEO)、SSL（影响排名和安全性）和移动友好性（影响排名和转换）等重要因素往往最终会被忽视。

新的网站设计经常发生，因为高层领导发生了变化，制定了新的品牌方向和新的品牌营销人员加入。 在评估该公司的网站时，他们惊恐地发现它的用户体验很糟糕，并发现缺少大量理想的内容。 得出的结论是，它只是一个糟糕的“宣传册网站”，没有提供“品牌的声音”或公司正在寻找的转换，共识是改变的时机已经成熟。 是时候进行网站改造了。

一家汽车公司的网站改版

值得一提的是，这个汽车网站重新设计案例研究不是官方委托的重新设计。 我没有任何关于公司、他们的数字战略或整个汽车行业的内幕消息。 我只是将汽车行业用作网站重新设计案例研究的测试案例。

在本案例研究中，我们将介绍克罗地亚汽车品牌 Rimac Automobili 的网站重新设计流程。 Rimac 是一个从简单的汽车概念开始的品牌，后来发展成为一家大型零部件制造公司。 像许多初创公司一样，该公司最初的想法最终演变成不同的东西。 这种扩展影响了网站结构，整个用户关注点发生了变化。 市场需求将公司带入另一个方向，因此网站的重点也需要转移。

为了实现出色的网站设计解决方案，需要考虑许多不同的方面和角度。 尽管之前的网页设计师可能没有足够的资源或时间来进行用户体验研究、线框图、原型制作和用户测试，但就设计的整体质量而言，即使是最小的早期设计决策也会产生重大影响负面影响和不太理想的网站质量最终将导致在两三年内重新设计网站。 这样做的结果是，从长远来看，客户为网站支付的费用比他们意识到的要高。 定义明确的内容策略和信息架构对于新网站设计至关重要。

在设计大型企业网站、新闻门户网站和其他内容繁重的网站时，我是原子设计的忠实粉丝，这是一种灵活的设计系统，旨在制作所有 UI 组件，这些组件将在开始时适用于多个屏幕和不可预见的情况的一个项目。 即使这个特殊的案例研究不是针对大型新闻门户网站的，但如果设置一个原子设计元素的设计库（一组经过仔细考虑和明确定义的设计组件）来使用它，它将使过程变得容易得多之后。

只有在网站拥有适当的内容策略和信息架构后，才应将重点转移到用户体验上。 没有适当的网站结构，用户体验设计就没有效力。 也许乍一看网站看起来不错，功能也很好，但如果没有内置足够的灵活性，公司不可避免地需要考虑重新设计网站。

为什么要重新设计这家汽车公司的网站？

Rimac Automobili 正在扩张，据官方消息称，一款名为“Concept_One”的新概念车已经投入生产。 在这个未经委托的网站重新设计时，他们的网站只展示了一辆汽车， “C_Two”。 没有视觉变化——该网站是由两个模板创建的，所以每个页面看起来都非常相似。 该设计专注于汽车的大而有吸引力的图像，没有太多其他内容来说明C_Two汽车的质量——引导网站访问者做出购买汽车决定所需的基本信息。

俗话说，“你永远没有第二次机会给人留下第一印象。” 使用出色设计的影响力来有效说服游客（在这种情况下主要是高性能汽车爱好者）购买价值接近一百万美元的汽车至关重要。 这样的高端网站需要达到令人难以置信的高标准。 他们必须表现出品质感和魅力，并提供高水平的销售技巧和引人注目的风格。

伟大的网站设计必须在类似网站的海洋中脱颖而出

汽车行业的一个大问题是该领域的大多数网站看起来都一样。 除了不同的配色方案和英雄图像之外，它们几乎看起来好像使用的是相同的网站模板。

汽车公司的网站设计决策背后有许多因素，但需要明确区分 100 万美元和 25,000 美元的汽车以及它们的呈现方式。

在高端汽车领域，法拉利、兰博基尼和阿斯顿马丁拥有过于简单的典型企业网站（在我看来）并不能真正提供出色的用户体验。

中等消费范围（大众、丰田、标致等）的网站内容结构与上述更高端的示例非常相似。 高端和中端消费汽车品牌之间最大的区别在于价格——因此人们会期望 Rimac 拥有一个出色的网站，以反映这种差异并展示其昂贵的品牌。

访问这些超昂贵的汽车品牌网站时，客户期望很高； 这是一项巨大的财务承诺，很自然，他们希望确保他们能买到他们的钱能买到的最好的汽车。

为什么 Rimac 比丰田好？ 查看他们的网站，这两个非常不同的品牌之间没有太大区别。 这不应该从他们网站的质量上看出来吗？

以出色的网站设计瞄准高端汽车买家

任何网站都必须考虑其用户。 这类车的目标受众是谁？ 他们在找什么？

Rimac 的汽车售价约为 850,000 美元，而且只会生产少数几辆，因此有资格获得“限量版”标签。 虽然我们无法准确确定有兴趣购买这些汽车的客户类型，但我们可以假设大多数客户将来自富有的精英。 Rimac 的网站是否有效地针对这些客户？

分析信息架构

在我们的示例网站上，我们可以看到第一个导航项是“Concept_One” （当时，它是公司唯一的产品）。 真正的网站已经更新。 第二个导航项是公司的演变，汽车是如何生产的，而第三项是公司的产品和服务。 第四个导航项是另一个公司产品（Greyp 电动自行车）。 最后两项是“新闻”，包含新闻稿，以及“博客”，这两者都不是特别有用，因为它们的大部分新闻都是在社交网络上发布的。

另一个问题是，职业链接被隐藏为次要的、不太重要的导航项目，并且鉴于公司的巨大扩张，它代表了一个重要的问题。 如果我们将用户视为公司关注的焦点，我们会看到在大多数公司网站（典型的例外是公司/超大型网站）中，拥有一个突出的“职业”链接或 CTA 非常重要。

网站重新设计过程

主页 英雄形象之前和之后

最初，其目的是打造一款更黑暗、更强大的汽车版本。 我在网上找到了一些Concept_One汽车的图片，并用一些“Photoshop 魔法”为主页创建了第一张英雄图片。 下一个想法是让动画慢慢展示汽车，首先是背景，然后是汽车的轮廓，然后是完全渲染的图像。

主页设计

对于主页，概念是定义两个主要的视觉区域：顶部导航和汽车英雄形象。 而已。 为了使其简约​​而引人注目，任何不必要的东西都被删除了。 一眼看去，所有重要的东西都是可见的——其他所有东西都被移到了网站的子页面中。

内容策略与设计

对于此类网站改造项目，设计内容也很重要，而不仅仅是网站的结构和视觉美学。 由于这是一个未经委托的网站重新设计，它提供了更多的实验自由，以及审美灵活性，让我们有充分的机会做出自己的设计决定。

过程很简单：

1. 准备将出现在网站上的正文。
2. 通过图标或交互式动画传达一些设计元素——例如，关于加速度、马力和最高速度的引人注目的细节。

通过这样做，用户界面中不需要辅助词，并且将注意力吸引到对网站访问者更重要的区域。

网站导航重新设计

网站的导航结构现在根据重要性等级重新排列。 我们将车辆作为导航中的第一个下拉菜单，这为设计提供了灵活性，因为它允许公司在未来添加更多车型。

为了提供从主页立即访问二级产品页面，为了提高效率，决定将产品及其子类别作为下拉区域合并到主页中，而不是创建另一个产品列表页面（在另一个网页上），并使其成为导航。 当访问者在导航中单击产品时，下面的设计显示了在主页上呈现为图标的各种产品。 对于Products下表示第二层的 3D 产品效果图，我推荐 Three.js、WebGL、Canvas 和 Greensock，因为它们是众所周知的标准化工具。

网站重新设计中的辅助页面

与Homepage相比， About和Service页面等辅助页面使用不同的 Z 形网格。 不同网格布局的目的是在浏览这些页面时为访问者提供更有趣和动态的环境。

中心思想仍然是尽可能少的文字视觉极简主义。 人们来这类汽车网站不是为了阅读大量文字，而是为了快速、直观地获取信息。 这就是页面标题上大而粗的字体和使用不同字体样式的想法。

需要注意的是，这种“公司宣传册”网站重新设计不同于服务重新设计。 “公司手册”网站更多地是关于营销产品。 面向服务的网站重新设计更倾向于将点击转化为转化，并最终获得利润。

结论

还有其他几篇设计博客文章推荐了为什么设计师参与非委托设计项目是一个好主意。 如果您想设计一个非常酷的项目，请选择一个想法——它可以是网站、应用程序、企业 SaaS 产品——并为它解决设计问题。

Dribbble 充满了不请自来的概念重新设计项目，数字设计师有机会展示他们的设计能力。 除了给你一个很酷的设计，向世界展示一个创造性的解决方案，解决一个“实际的”产品问题将向潜在的公司和客户展示你的想法、你的过程和你的专业知识。

就我而言，处理高端汽车网站是一项很棒的练习，因为对于该领域的网站设计而言，满足极高的标准尤为重要。

但是，请注意：在潜入并开始设计之前，具有前瞻性并考虑任何特定网站在三年内需要看起来如何，不仅从设计美学的角度，而且从内容的角度来看，这是一个好主意，功能和结构。 内置的灵活性是一个严肃的设计考虑因素，这一点至关重要。 当网站或子页面正常工作且可扩展时，进行小的调整以适应未来的需求会更容易、更高效且痛苦更少。

有时，很难说服潜在客户进行网站改造。 由于缺乏资源、资金或时间，客户通常不愿意承诺。 然而，一个不请自来的网站重新设计是向世界展示您的网站重新设计过程的好方法。 谁知道呢？ 您的网站重新设计很可能会给不情愿的客户留下深刻的印象，足以让他们为“真正的”项目开绿灯，作为额外的奖励，设计师会得到报酬！

• • •

进一步阅读 Toptal 设计博客：

• 网站重新设计的基础——案例研究
• UX 的真正投资回报率：B2B 重新设计案例研究
• 将宜家从其盒子中取出并为 16 亿用户重新设计它
• 让我们重新设计 Facebook：让您入门的 10 个灵感
• CrunchBase 应该如何设计