案例分析:网站修订的方向
奖牌的水平越高() 平台上的综合性能越好。
与重新设计的网站不同,重新设计的项目通常更麻烦。 因为网站本身是企业产品和内容的重要平台,所以在网站设计完成后通常会使用多年,但随着时间的推移。 它需要根据不断变化的需求重新设计。
有些人认为重新设计网站太昂贵了。 乍一看,网站本身只是内容载体,只需根据企业和产品本身的变化进行调整。 然而,当需求和变化达到一定程度时,完整的重设计可以使网站本身更加统一,并与产品公司和业务进行更深入的耦合。
当我们重新设计时,我们将根据企业的业务营销目标从原型上重新设计。 一方面,目标是明确的,另一方面,它也符合这个过程,这也符合justinmind的工作方法。
今天,我们选择了五个网站重新设计案例,通过不同的案例处理和前后比较与您分享重新设计网站的经验。
rev为用户提供在线转录服务已经很长时间了。他们希望重新设计,使网站更接近当前的视觉和体验。 具有更现代的专业视觉和外观。
旧的网站设计风格似乎有点过时,最重要的ui元素是公司在中间的三个价值观,通过三个旋转地图分别提出。 速度、质量和服务。 图为20世纪50年代流行的复古插图,利用火箭航天器和电话拨号盘来强调产品质量。
网站的主要导航是网站的主要导航,网站的不同子页面大多采用类似的复古插图。 第一个屏幕的旋转地图和子页面包含更详细的信息产品定价和清晰和引人注目的cta按钮,以引导用户点击。
轮值本身的问题是,用户只能一次看一个,但耐心有限的用户很难坚持这样做。 如果你使用一个更简洁的想法,你只能使用一张照片。 此外,导航和旋转地图也太近了。 就趋势而言,视差和功能将使用户更加舒适和视觉快感。
rev.com的新版本完全放弃了轮播和复古设计,以取代现代新鲜和干净的视觉公司的价值观。 这里有三张不同的卡片,详细描述了服务本身的三大价值观。每张卡都有详细的解释和清晰的行为呼叫术语。 更重要的是,视觉上的三个卡片足以吸引用户鼓励点击。
向下滚动可以看到更多的变化。 该页面使用一些公司客户的案例来支持这些价值观念,并对服务进行更详细的描述。 视觉上的每一项服务都以不同的颜色来区分。 服务条款可以单击以使人们感到更可信。
从用户体验的角度来看,重新设计使页面更轻、更现代,而产品特性则通过颜色来加强。 项目经理巴伦·卡斯特(barrroncaster)随后公布了新设计的数据,将rev.com的网站转换率提高了18%。
松下是制作纪录片和电影的代理人。他们的网站重新设计需求不仅仅是调整整体视觉。 还需要通过设计来修改底层结构。
panos之前的网站是初级的。 旧网站不是对移动设备不够友好的响应网站,缺乏ja的支持导航选项也需要改进。 在主页的顶部是一个导航菜单和一个搜索框,下面有一个超大的第一屏幕图片,上面有两个或三个相对较小的图片。 每个图片将连接到相应的图片商店。
在图片中悬挂鼠标光标可以显示相关的图片信息。用户可以通过点击来查看照片背后的细节。 顶部导航使用旧的嵌套导航菜单,但实际上有比导航更多的图片。 用户不能通过明确的道路来帮助用户更多地关注信息。
重新设计的panos网站使用户更加熟悉和接近现代设计。 内容属性与以前一致-毕竟,它是一个提供图片的摄影机构。他们一直在拍照。 然而,内容的呈现方式和细节发生了变化。
首先,网站已经完全响应了网页的内容和元素将适应顶部导航栏,因为它的功能相对较弱。 当用户点击时,它将以弹出层的形式显示。 页面的顶部只保留原始品牌标识和搜索框架。
另一方面,内容领域仍然是以图片为基础的。 每个图片具有相应的标题简要介绍和单击链接。 第一张用作第一张屏幕的图片比第一张屏幕的大小要短一些,以确保底部有更多的信息可以被用户注意到引导用户浏览。 当你筛选内容时,它会触发动人的动画效果。
mailchimp是著名的邮件服务提供商. 作为今年最受关注的重型设计案例,mailchimp的网站重新设计几乎相当于一个品牌重建网站,它不仅拥有更流行的新衬里字体。 并重新调整徽标颜色匹配,包括布局和更详细的功能。
mailchimp网站已经是业界最值得学习的情感和游戏设计。 该网站主页的布局设计非常简单。顶部是菜单导航,然后是价值内容和cta按钮。这里有更详细的功能描述和更多的cta按钮。 第一个屏幕的大图像直观而清晰地将工具的感觉传递给用户。 该网站具有良好的结构,但不能改进。
在重新设计后,mailchimp看起来完全不同,但仍然让人们感觉到以前的阴影。 明亮的黄色是重新设计中添加的最引人注目的元素品牌和产品的价值索赔,而强烈的黑色衬里字体则是用来显示的。 天空插图增加了第一幕的视觉张力。
mailchimp本身丰富的功能中最重要的四个功能在主页上展示。每个功能都配备了一个小而有趣的手绘插图。 我一眼就知道了。
该页面的底部为客户的建议留下了足够大的空间,让用户为产品发出声音。 加强马尔奇普品牌体验。 底部页脚简化了整个体验,比以前更有能力为产品理解的用户更深入地理解。
客户体验研究平台usertesting对产品原型设计和迭代有着广泛的影响,对设计和开发人员来说并不陌生。 今年,该公司重新设计了自己的网站,将品牌推向了一个新的水平。
usertesting主页的主要控件是一个超大的映射,主要是指导用户注册为测试服务。 并通过额外的cta按钮将用户引导到其他服务。 旋转映射本身的风险是不确定的,第二和第三轮映射的功能比预期的要小。
该网站还显示了一些客户的成功案例,并显示了品牌的三个主要价值观和底部是一些客户的建议。 一些研究案例的链接和页脚。
整个主页有很多甚至有点混乱。 当然,作为一个定期的用户测试机构,我相信usertesting本身并没有测试它的主页设计。
usertesting的新页面看起来更轻,内容减少了25%。顶部导航被重新设计为旋转地图,类似于以前的情况。 它也被一个看似聪明、现代和有机的插图所取代,宣传术语更加大胆和有吸引力。
在客户列表下的产品特征和价值概念更简洁,并与动画匹配,使信息更加生动和传播。 然后,他们加强了客户建议的模块,每个发送消息都是关于主题的。 最后,知识库和带有cta按钮的页面。
芝加哥艺术研究所(aic)是美国最受欢迎的博物馆之一。 他们的网站也需要重新设计,以提高整体可用性,特别是希望网站上大量的艺术作品能够发挥作用。
就像许多类似的旧网站一样,aic旧网站的宽度是固定的顶部导航,传统的多层导航菜单框架是半透明的。 互动的经验并不令人愉快。
在导航的底部是一个全屏的旋转地图。六张地图是网站上的集合或展览。 网页上的设计有一个非常重要的问题,即轮换控件和文本的颜色是固定的,但是背景图片是完全不可控的,因为颜色对比度不够。 不可能看到前景的控制和文本体验是非常混乱的。
在轮值图的底部是页脚导航菜单字体尺寸的小链接,很难识别博物馆的开放时间和社交媒体链接。
经过重新设计,人工智能的整体经验有了很大的改善。 首先,网站已经完全响应,可以很容易地在任何网站上阅读。 该网站的信息结构已重新调整,顶部导航也被简化,没有笨重的下拉菜单。 还增加了一个临时通知区。
旋转图被一个单一的第一屏幕视频所取代,以便更生动地显示内容。 另一方面,文本增加了一个不透明的灰色底部,以确保可读性。
在电网系统网站的帮助下,博物馆的亮点受到限制,以确保布局优雅和清晰。 后来,用户注册的快速入口页面更容易理解。
人工智能是几种情况下修订前后最大的网站可用性、可读性、响应性等功能,只有在修改后才有优雅的氛围。 它还加强了品牌影响。
虽然这些网站各不相同,但在这些重新设计的情况下,我们可以清楚地看到网站需求的变化和许多宝贵的经验。
最典型的是,越来越多的设计师开始在实战中放弃这种设计,并开始拥抱高清地图和视频背景。 更注重简单的设计,有针对性和明确的目标。 动效与经验之间的密切关系导致设计师在网页上更多地使用这些元素。