【品牌】《乙方官网设计指南》(上)

2019-08-05

在广告圈里,如雷锋般奔波卖命的乙方,只顾着建设客户的品牌形象,却很少认真扮靓自己,甚至连本司的官网建设也很少放在心上。而若是谈到做官网,大家往往会觉得没有太大的必要:

现在是竖屏时代,大家都刷手机、看双微,谁愿意特地打开电脑登网页,我司有公众号还不行吗?


这说对了,没多少人愿意“特地”来官网到访——除非他们对你真的很感兴趣。

这些人最有可能是:求职者、竞争对手和潜在客户,是一些不了解你却想了解你的人。他们或许被你的某个作品打动,希望能进一步了解关于作品、理念和公司,而官网就是你的地盘,也是一件集大成的、最有价值的作品。虽然双微的建设和操作更简便,但其中往往夹杂着冗余信息,难以匹敌网站所具备的长久性、正式性和精炼性。所以,作为一个正式的官方平台,官网建设必不可少。

那如何做出更高水平、更吸睛、更让人过目不忘的官网呢?我从国内外500余家广告公司的官方网站中,精选30家并总结出这篇《乙方官网设计指南》,一起看看这些有趣的网站能给我们带来哪些设计启发!

*本文不涉及编程内容,仅从视觉设计出发给予参考;部分网站加载慢,请稍等或刷新


一、扮靓之前,先厘清内容逻辑

就像买房一样,在装修之前,要安排清楚各个房间区域的功能。网站也是同样的道理。大到每一屏页面、小到每一次点击,都要赋予其特定的意义。

在代理商的官网设置中,以下6部分内容必不可少:

  • 我们是谁?即公司名称、公司介绍,有必要时可做延伸解释;

  • 我们的理念?即公司的Slogan、信仰和坚持;

  • 我们的作品?是最主要、最重要的部分;

  • 我们能为客户提供哪些服务?ATL/BTL/IMC、单个或是全案的Campaign……

  • 我们的人员?团队核心成员介绍;

  • 我们的招聘信息、地址和联系方式?可附社交媒体账号。

 

二、一眼定生死的首屏设计

网站一般分为三个部分:头部、内容和尾部(header、body和footer)。代理商的官网不必做到一丝不苟,但最值得花心思打造的地方是首屏,也就是landing page(着陆页)。这是用户打开网站时最先映入眼帘的页面,也在最大程度上奠定了网站的风格和基调。

如何让用户第一眼就爱上,看看这些公司都用了哪些招数?


首屏互动

优秀的交互设计网站能给用户带来愉悦感,提高用户体验。比起满屏都是复杂的文字信息,具有冲击力的视觉图像更能引起用户的兴趣。而在此基础上加入有趣的交互设计,例如动效、鼠标状态、流体效果等,更会产生多重感官刺激,延长用户在网站的停留时间。


1、Active Theory

image.png

Active Theory是一家位于加利福尼亚州威尼斯的创意数字制作工作室,专注于构建人们喜爱的数字体验。


image.png

image.png

仿佛置身于午夜的街道,随着鼠标移动,界面出现波纹状的流体效果;单击闪烁出高亮度的Logo,搭配低像素的模糊感营造出迷幻氛围。


2、Major Tom

image.png

是一家提供全方位服务的互动机构,旨在帮助客户在当今日益复杂的营销环境中茁壮成长。Major Tom在纽约\多伦多和温哥华设有办事处,拥有超过85名专家团队,涵盖全方位的战略、营销和创意方案。

image.png


非常有沉浸感的网站,波点的律动营造出移动和翻转的感觉。


3、Martin Agency    

image.png


家提供全方位服务的机构,在广告、战略规划、数字化、数据分析、设计和品牌内容方面具有独特的能力。

image.png


image.png


公司成员的目光随着你的鼠标移动,是不是有种神奇的临场感?


4、HOTSAR

1564587963728958.jpg

HOTSAR位于上海,是一家由95后团队运营的24小时创意便利店。

image.png


鼠标飘来飘去就能“打散”这个拳头,非常解压。网站仅有单个页面,下方设有引流提示。


视差滚动(页面切换)

视差滚动(Parallax Scrolling),是指多层背景以不同的速度移动,形成立体的运动效果,滚动时会有一种“一镜到底”的感觉,带来非常出色的视觉体验。最常见的一种,就是用户在向下滚动页面或跨页面时的3D滚动效果。视差设计如果做得好,将会大大提升用户体验,吸引更多的用户。


5、fleava

image.png

image.png


以红、蓝、紫为主色调的网站,每次滑动滚轮都会有一种神奇的“弹力感”。   


6、Canvas

image.png


Canvas是一家位于纽约市的数字机构,致力于不断合作和深思熟虑的创作。该机构为世界级公司创造了卓越的多平台体验。


image.png

image.png


只需要往下滑动滚轮,就可以观看如电影般流畅的网页切换。

  

7、Mekanism

image.png