有些人认为不应该对网站进行重设计,那样成本太高昂了,只需要做适度调整即可。乍一看这么说也没错,网站本身只是内容的载体,只需要根据企业和产品本身的变化调整即可。不过,当需求和变化达到一定程度的时候,完整的重设计能够让网站本身更加统一一致,也能和产品、企业和业务进行更加深度的耦合。
当我们在进行重设计的时候,会基于企业的业务、营销等目标,从原型层面上入手,进行重新设计。这样做一方面目标明确,另一方面也符合流程,这也符合 Justinmind 的工作方式。
在开始进行重设计之前,首先要制定相对明确的目标。适当的问题会给你带来你想要的答案:
在这4个问题的框架下来进行重设计,能够让项目向着正确的方向推进。
今天,我们挑选了3个网站重设计案例,通过不同案例的处理方法,以及前后对比,来同你分享网站重设计的经验。
Rev 为用户提供在线转录服务,网站的使用时间已经不短了,他们希望通过重设计,让网站在视觉和体验上更加贴近当下,具备更加现代、专业的视觉和外观。
重设计之前
旧有的网站设计风格看起来有点过时,最主要的 UI元素是中间的轮播图,公司的三个价值主张则通过三张轮播图分别呈现:「速度、质量和服务」。图中使用了上世纪50年代的时候所流行的复古插画来呈现产品特性,借用火箭、飞船和电话拨号盘更强劲的隐喻,来强调产品质量。
在轮播图上方则是网站的主要导航,并且分别导向网站的不同子页面,每个页面中也大都使用了风格类似的复古插画。首屏的轮播图和子页面中都包含了产品服务更详细的信息,产品定价以及清晰醒目的 CTA按钮,引导用户去点击。
轮播图本身所存在的问题在于,用户一次只能看一张,但是耐心有限的用户,很难坚持都看完,经常会跳过其中的内容。如果采用更加简明的价值主张,只使用一张图即可。另外导航和轮播图也靠的太近。从趋势上来说,视差和动效会让用户更加舒适,视觉愉悦感也更强。
视觉风格上,目前更流行的是扁平、自然有机的图形,超大而引人瞩目的首屏设计,或者是视频内容。
重设计之后
Rev.com 的新版完全抛弃了轮播图和复古的设计,替换以现代、清爽、干净的视觉,企业的价值主张也更加精简直观。下面包含3个不同的卡片,分别详细阐述服务本身一直就有的完整的3个价值主张,每个卡片上都有详细的解释和清晰的行为召唤用语。更重要的是,视觉上,三个卡片足够突出,可以吸引用户,鼓励点击。
Panos Pictures 是一个拍摄纪录片和电影的代理机构,他们的网站重设计需求不仅仅是调整整体的视觉,而且还需要通过设计来修改底层架构。
重设计之前
Panos 之前的网站比较简陋。老版本的网站并不是响应式的网站,对于移动端设备不够友好,缺少 JavaScript 的支持,导航选项也需要完善。首页顶部是一个导航菜单和搜索框,下面是超大的首屏图片,并在下方附带两三个比较小的图片。每个图片都会链接到相应的图片商店。鼠标光标悬停在图片上,能够显示相关的图片信息,用户可以通过点击浏览照片背后的故事详情。顶部导航使用的是老式的嵌套式的导航菜单,但是实际上还有一些图片超出了导航的浏览范围,并且用户无法通过清晰的路径来方便用户关注更多的信息。
重设计之后
经过重新设计的 Panos 的网站让用户更加「熟悉」,体验上和现代设计更加贴近,而内容属性和之前保持一致——毕竟是一个提供图片的摄影机构,他们做的事情始终还是拍照。但是,在内容的呈现方式和细节上,已经发生了改变。
首先,网站已经完全是响应式的了,网页的内容和元素会自适应,顶部导航栏由于功能性相对比较弱,已经被收纳到汉堡菜单当中了,用户点击的时候会以一个弹出图层的形式呈现。页面顶端仅保留了原本的品牌LOGO 和搜索框。
而内容区域则依然以图片呈现为主。每张图片都带有相应的标题、简短的介绍和点击链接。而用作首屏的首图在尺寸上则比首屏尺寸要短一点,确保底部更多的信息能够被用户注意到,引导用户向下浏览。在筛选内容的时候,加载的时候会触发动人的动画效果。
总之,Panos 的重设计在保留品牌精髓的情况下,提供了更好的用户体验。
Mailchimp 是著名的邮件服务供应商。作为今年关注度最高的重设计案例,Mailchimp 的网站重设计几乎相当于是一次品牌重塑,网站不仅拥有了更加时髦的新衬线字体,而且重新调整了 LOGO、配色包括布局,以及更细致的功能。
重设计之前
Mailchimp 的网站在情感和游戏化设计上,已经是业内最值得学习的了。网站首页的布局设计很简单,顶部是菜单导航,然后是价值主张的内容和CTA按钮,下面是更加详细的功能描述和更多的CTA按钮,而首屏的大图则直观而清晰地将这款工具应有的感觉传递给用户。网站有着良好的结构,但是它并非无法改进。
重设计之后
Mailchimp 经过重设计之后,看起来完全不同,但是依然让人感觉得到之前的影子。明亮的黄色是这次重设计所加入进来的最醒目的元素,品牌和产品的价值主张内容则使用对比强烈的黑色衬线字体来呈现,天马行空的插画则增加了首屏的视觉张力。MailChimp 本身丰富的功能中,最重要的4个功能被呈现在首页当中,每个功能都附带了一个小巧有趣的手绘插画,精炼而直观,一目了然。
页面靠下的位置,为客户推荐语留下了足够大的一块区域,让Mailchimp 的用户为产品发声,加强 Mailchimp 的品牌体验。最下方的页脚则经过简化,整个体验比之前干练了不少,对于这个产品有所了解的用户,应该有较深的体会。
虽然这些网站各不相同,但是在这些重设计案例当中,可以清晰地看到网站的设计趋势,需求上的变化,以及很多珍贵的经验。最典型的是对于轮播图这一控件的认知,越来越多的设计师开始在实战中摒弃这种设计,而开始拥抱高清大图和视频背景,更加在意针对性和目标明确的简约设计。动效和体验之间的紧密关系,使得设计师开始更多地在网页中使用这些元素。如果您的网站需要改版,可以联系城池设计,为您的企业公司官网制作新网站。
越来越多的企业倾向于选择定制型网站建设,那么在合作之前,需要了解清楚网站制作的流程,这样后期才能够更好地与建站公司进行相互配合,让网站早日上线。今天城池设计就来聊 ...
在网络营销强大的今天,信息快速引流,企业在选择网站建设的时候,就需要明确网站做完后,如何进行推广。只有拥有好的排名,才能让用户搜索到你,关注并且了解你的企业。如何 ...
假期刚过,回到工作状态,对于网站设计师而言,在灵感枯竭的时候,需要借助最新的设计趋势来获取一点恰到好处的灵感,帮我们做出更合时宜的好作品。那么这个十月,我们获取到 ...
在网站设计中,极简主义是常见的一种风格,它可以用在很多方面。它可以让界面看起来更干净 。极简主义的设计理念鼓励人们拥抱留白的空间。使用留白给设计元素提供呼吸的空间, ...
图形和字体是增加网站视觉感的非常重要元素,他们看起来似乎在网站建设中并没有占很大比重,然而影响非常明显。如果你仔细观察一些优秀极具质感的网页,在处理字体排版和图形 ...
如今很多企业都倾向高端定制网站,定制型的网站看起来往往更加独特,可以融入很多时下流行的元素及设计手法,这样的网站也会显得更高级且趣味。有哪些设计手法可以提升网站的 ...
2020年第三季度即将结束,每一年的网站设计都会加入新的流行元素,今年网站制作的趋势发生了哪些变化?总结来看,网页设计师在秉承保持网页设计足够简约整洁的同时,注入更多新 ...
和重新设计网站不一样,网站重设计的项目通常都会更麻烦一些。由于网站本身是企业、产品和内容承载的重要平台,通常一个网站设计完成之后会使用好几年,但是随着时间推移,它 ...
UI 界面中,排版设计同样重要。如何将至关重要的信息,有效地传递给用户,这是界面本身的职责,而在绝大多数时候,这通常是靠文本来完成。 这就是为什么有效的排版对于改善 U ...
提到网站建设,目前主流的就是定制型网站建设了。前几年模板建站还能受到部分企业青睐,然而我们接触到用过很多模板网站的企业,一段时日后,最后还是选择了定制网站。那么, ...
受到新冠疫情的影响,越来越多的企业开始重视到网站的必要性,网站建设已经成为企业的刚需。很多大型企业甚至会定期对网站进行各个方面的升级。一个好的网站,可以为企业扩大 ...
关于许多网页规划师而言,是挑选单页面仍是多页面的规划,可能会十分的扎手。跟着移动端和社交媒体的鼓起,简略快速呼应迅速的单页网站,成为了目前网页规划的趋势。另一方面 ...
UI视觉设计每一年都在发生改变,并且不断产生新的趋势,网站设计中,优秀的UI设计,可以创造丰富的视觉体验,为用户带来耳目一新的感觉。2020年,有哪些UI设计趋势在发展呢? 一、 ...
在不同的场合有恰当合适的场景搭配,是十分基础且重要的事情。在网站 UI 设计中,任何一个部分的设计以及元素运用都需要为产品服务,图片也不例外。它能一定程度上决定整个网页 ...
在如今的互联网时代,企业无论规模大小,官方网站都是标配。网站几乎成了大小企业的品牌形象和推广平台,尤其是如今全球收到疫情影响,互联网线上服务更加发挥了重要作用。每 ...
很多企业不解,为什么网站建设公司给出的费用差距这么大?建设一个网站,有的报价只要几千块甚至是几百块,而有的报价达到了几万块。报价方案中,有些虽然价格便宜但是给出的 ...
我们都知道,网站在搜索引擎当中排名靠前的重要意义,这就意味着,你的网站可以带来高流量,让更多用户搜索到进入浏览,从而实现网站的作用。网站优化是一个持久的过程,怎样 ...
春节的疫情持续的时间已经超出大多数人的预计,相信我们窝在家里没出门的时间,已经打破很多人这几年的纪录了。这种生活其实就是职业在家办公 SOHO(Small Office,Home Office 家居办 ...
好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。 当你的内容需要迁移到移动端上的时候,要怎么让内容和 ...
什么是「科技感」? 科技感:等同于未来科技,未来科技是指超越现实的科学技术,未来科技与高科技、最新科技以及前沿科学技术等的概念完全不同,而且是有本质区别的 网上找到 ...
网站建设是一项讲究细节的工作,很多人不解明明自己的网站建设是没有什么问题的,可是为什么没有好的流量呢?一个网站上线后,有没有充分利用起来,决定着这个网站能否受用户 ...