设计的推动力–网站重新设计案例研究 _原型设计

本文概述

汽车公司的网站改版
分析信息架构
网站重新设计流程
总结

什么时候最合适的时间来重新设计网站？
谁没有遇到过时和废弃的网站？就像一辆抛弃在沙漠中的卡车的外壳一样, 多年来显然没有动过。
网站由于各种原因而进行了改造。遗憾的是, 许多企业没有意识到他们的网站需要重新设计, 而当竞争对手通过改善自己的竞争优势, 从而提高其转化率而获得竞争优势时就被甩在了后面。
企业经常犯的一个错误是没有尽早考虑如果他们的网站需求应该变得更加复杂会发生什么, 结果, 当他们需要扩展它时, 他们会陷入困难的, 潜在的代价高昂的境地。此外, 诸如搜索引擎优化(SEO), SSL(影响排名和安全性)以及移动设备友好性(影响排名和转化)等重要因素通常常常被忽视。
新网站设计的出现通常是由于高层领导层的变动而引起的, 在此树立了新的品牌发展方向, 新的品牌营销人员也加入了进来。他们对公司的网站进行评估后, 震惊地发现它的用户体验糟糕透顶, 并发现大量令人讨厌的内容丢失了。结论是, 它只是一个糟糕的” 宣传网站” , 没有提供” 品牌的声音” 或公司正在寻求的转换, 共识是变革的时机已经成熟。现在该进行网站改版了。

文章图片
什么时候最适合进行网站重新设计？
汽车公司的网站改版值得一提的是, 该汽车网站的重新设计案例研究不是正式的委托重新设计。我没有关于公司, 其数字战略或整个汽车行业的内部信息。我只是将汽车行业用作网站重新设计案例研究的测试案例。
在本案例研究中, 我们将介绍克罗地亚汽车品牌Rimac Automobili的网站重新设计过程。 Rimac是一个从简单的汽车概念开始的品牌, 此后已扩展为一家大型零部件制造公司。像许多初创公司一样, 公司最初的想法最终演变为不同的事物。这次扩张影响了网站的结构, 整个用户的关注点发生了变化。市场需求将公司带向了另一个方向, 因此网站的重点也需要转移。
为了实现出色的网站设计解决方案, 需要考虑许多不同的方面和角度。尽管以前的Web设计人员可能没有足够的资源, 也没有足够的时间进行UX研究, 线框图, 原型设计和用户测试, 但就设计的整体质量而言, 即使是最小的早期设计决策也可能具有重大意义。负面影响, 以及网站质量低于最佳水平, 最终会导致在两到三年内对网站进行重新设计。从长远来看, 这样做的结果是, 客户为网站支付的费用超出了他们的想象。明确的内容策略和信息体系结构对于新网站设计至关重要。

文章图片
重新设计案例研究时的原始Rimac网站。
在设计大型公司网站, 新闻门户和其他内容丰富的网站时, 我非常喜欢atomic design, atomic design是一个灵活的设计系统, 旨在制作所有可在多屏和意外情况下使用的UI组件。一个项目。即使此案例研究不是针对大型新闻门户网站的, 但如果设置一个原子设计元素的设计库(一组经过仔细考虑和定义良好的设计组件)来工作, 它将使该过程更加容易。后来。
只有在网站具有适当的内容策略和信息体系结构之后, 才应将重点转移到用户体验上。没有适当的网站结构, 用户体验设计将无能为力。乍一看, 该网站看起来可能不错并且功能良好, 但是如果没有内置足够的灵活性, 则不可避免的是, 在某个时候该公司将需要考虑重新设计网站。
为什么要重新设计该汽车公司的网站？
Rimac Automobili正在扩大规模, 根据官方帖子, 一种名为” Concept_One” 的新概念车已经在生产中。在重新设计该网站时, 他们的网站只展示了一辆汽车” C_Two” 。没有视觉变化-网站是由两个模板创建的, 因此每个页面看起来都很相似。该设计着重于大型美观的汽车图像, 而没有太多其他内容来说明C_Two汽车的质量, 即引导网站访问者决定购买汽车所需的基本信息。
俗话说：” 你永远不会有第二次机会给人留下第一印象。” 利用出色的设计来有效地说服访客(在这种情况下, 他们大多是高性能的汽车爱好者)购买价格接近一百万美元的汽车至关重要。这样的高端网站需要达到令人难以置信的高标准。他们必须表现出一种品质感和魅力, 并提供高水平的销售技巧和引人注目的风格。
出色的网站设计必须在众多类似网站中脱颖而出
汽车行业的一个大问题是, 该空间中的大多数网站看起来都一样。除了不同的颜色方案和英雄图片以外, 它们似乎都在使用相同的网站模板。
汽车公司的网站设计决策背后有许多因素, 但在100万美元和25, 000美元的汽车及其展示方式上, 需要有明显的区别。
在高端汽车领域, 法拉利, 兰博基尼和阿斯顿·马丁拥有过于简单的, 通常是公司的网站(我认为)并不能真正提供出色的用户体验。

文章图片
中端消费者(大众, 丰田, 标致等)的网站内容结构与上述高端示例非常相似。高端和中档消费汽车品牌之间的最大区别是价格-因此人们希望Rimac拥有高端汽车, 它们将拥有一个出色的网站, 以反映这种差异并展示其昂贵的品牌。
当访问这些超昂贵的汽车品牌网站时, 客户期望很高；这是一项巨大的财务承诺, 很自然地, 他们希望确保自己得到的钱可以买到的最好的汽车。
为什么Rimac比Toyota好？看看他们的网站, 这两个截然不同的品牌之间并没有太大的区别。从网站的质量来看这不是很明显吗？

文章图片
高端汽车公司为何拥有外观相貌平淡的网站？
出色的网站设计瞄准高端汽车买家
任何网站都必须考虑其用户。谁是这种汽车的目标受众？他们在找什么？
里马克汽车的价格约为85万美元, 而且只会生产少量, 因此有资格获得” 限量版” 标签。尽管我们无法准确确定有兴趣购买这些汽车的客户类型, 但我们可以假设大多数客户来自富裕的精英阶层。 Rimac的网站是否有效地针对了这些客户？
分析信息架构在示例网站上, 我们可以看到第一个导航项是” Concept_One” (当时, 这是该公司唯一的产品)。此后, 真实的网站已更新。第二个导航项是公司的发展, 汽车的生产方式, 而第三个导航项是公司的产品和服务。第四个导航项目是另一家公司产品(Greyp电动自行车)。最后两个项目是” 新闻” (包含新闻稿)和” 博客” , 由于它们的大多数新闻都是在社交网络上发布的, 因此它们都不是特别有用。
另一个问题是, 职业链接被隐藏为次要的, 不太重要的导航项目, 并且鉴于公司的规模扩张, 这是一个重要的问题。如果我们将用户视为公司关注的焦点, 那么我们会发现, 在大多数公司网站上(典型的例外是公司/超大型网站), 拥有醒目的” 职业” 链接或CTA非常重要。
网站重新设计流程主页前后的英雄形象
最初的目的是创建一种更深色, 功能更强大的汽车。我在网上找到了一些Concept_One汽车的图像, 并使用了一些” Photoshop魔术” , 为主页创建了第一个英雄图像。下一个想法是让动画缓慢显示汽车, 首先显示背景, 然后显示汽车轮廓, 然后显示完整渲染的图像。

文章图片
网页设计
对于主页, 其概念是定义两个主要的视觉区域：顶部导航和汽车英雄图像。而已。为了使其简约??而引人注目, 删除了所有不必要的内容。快速浏览所有重要内容, 其他所有内容均移至站点内的子页面。

文章图片
重新设计的网站的主页。
内容策略与设计
对于此类网站改造项目, 不仅要设计网站的结构和视觉效果, 还必须设计内容。由于这是未经授权的网站重新设计, 因此它提供了更大的试验自由度, 以及提供了充分的机会进行我们自己的设计决策的美学灵活性。
过程很简单：

准备将出现在网站上的正文。
通过图标或交互式动画传达一些设计元素, 例如有关加速度, 马力和最高速度的醒目的细节。

这样一来, 用户界面中就不需要辅助词, 并且可以吸引对网站访问者更重要的区域。
网站导航重新设计
网站的导航结构现在根据重要性层次结构进行了重新排列。我们将车辆作为导航中的第一个下拉列表, 这使设计具有灵活性, 因为它允许公司将来添加更多的汽车模型。
为了能够从主页直接访问次要” 产品” 页面, 出于效率考虑, 决定(而不是在另一个网页上)创建另一个产品列表页面, 可以将产品及其子类别作为下拉区域合并到主页中, 并成为其中的一部分。导航。当访客单击导航中的” 产品” 时, 以下设计在首页上显示了各种图标形式的产品。对于表示” 产品” 下第二级的3D产品渲染, 我建议使用Three.js, WebGL, Canvas和Greensock, 因为它们是众所周知的标准化工具。

文章图片
网站重新设计中的辅助页面
与主页相反, 诸如” 关于” 和” 服务” 页面之类的辅助页面使用不同的, Z形图案更多的网格。不同网格布局的目的是在扫描这些页面时为访问者提供一个更加有趣和动态的环境。
中心思想仍然是视觉上的简约, 文字尽量少。人们访问这些类型的汽车网站不是为了阅读大量文本, 而是为了快速, 直观地获取信息。这是在页面标题上使用大胆字体和使用不同字体样式的背后的想法。
请务必注意, 这种” 公司宣传册” 网站的重新设计与服务的重新设计不同。 “ 公司宣传册” 网站更多有关营销产品。面向服务的网站重新设计更倾向于将点击转化为转化, 并最终获得利润。

文章图片

文章图片
总结还有其他一些设计博客文章, 推荐为什么在一边参与未委托的设计项目对设计师来说是个好主意。如果你想设计一个非常酷的项目, 请选择一个主意-它可以是网站, 应用程序, 企业SaaS产品-并解决其设计问题。
Dribbble充满了未经请求的概念性重新设计项目, 数字设计师可以借此机会炫耀自己的设计精粹。除了为你提供可以向世界展示创意解决方案的出色设计之外, 解决” 实际” 产品问题还将向潜在的公司和客户展示你的想法, 过程和专业知识。
以我为例, 这是对高端汽车网站的一次很好的练习, 因为对于该行业的网站设计来说, 达到非常高的标准尤其重要。
不过请注意：在进行设计之前, 最好先进行前瞻性考虑, 不仅从设计美学的角度, 而且从内容的角度考虑三年内任何特定网站的外观, 功能和结构。至关重要的是, 内置的灵活性必须是认真的设计考虑因素。在网站或子页面正常运行且可扩展时, 进行细微调整以适应将来的需求会更容易, 更高效且更轻松。
有时, 很难说服潜在客户进行网站改造。由于缺乏资源, 资金或时间, 客户常常不愿作出承诺。但是, 未经请求的网站重新设计是向全世界展示你的网站重新设计过程的好方法。谁知道呢？你的网站重新设计很有可能会给一个勉强的客户留下深刻的印象, 使他们为” 真正的” 项目开绿灯, 作为一个额外的奖励, 设计师可以得到报酬！
【设计的推动力–网站重新设计案例研究】? ? ?
在srcmini设计博客上进一步阅读：