这几年来我们遇过台湾许多的大型企业,渐渐了解到「品牌形象」的重要性,从「传统代工」转向「自有品牌」,为未来企业经营的重要趋势,因此陆陆续续在进行公司形象的改造。
而一间企业所带给社会大众的形象,除了产品与服务外,其中一项重要的因素在于企业识别系统Coporation Identity System(简称CIS),CIS除了当中最主要的Logo设计外,其他还包含了许多的延伸应用项目,例如基本的名片、信封、纸袋、招牌、海报等等,透过这些延伸应用项目不断的在大众面前曝光,日积月累慢慢的在消费者心中,脑中自然建立起了一种对于该企业形象,例如我们透过Apple苹果的产品、包装、官网,对它产生了「简约」的形象。
而越大型的企业,在形象上的转型,通常会需要一段长时间的计画与建构,针对永丰余企业-中华纸浆股份有限公司(以下简称华纸),我们从2015年起,就开始为他们针对不同的项目,进行整体企业形象上的改造,包含公司文书系统、公司形象墙、CSR报告书、企业网站设计等。
今天将与各位分享华纸网站设计的幕后流程。
【第一阶段:网站企划】
A.确认网站内容、需求、定位
一般常见的网站分类有企业型网站、品牌形象网站、活动型网站、购物型网站、入口型网站,首先我们必须藉由了解客户的需求,以及网站所要成立的目的,来决定本次网站制作的类型。
而华纸,是属于B2B企业型的网站,且公司包含了五大事业体(纸浆事业、农林事业、纸与纸板事业、特化材料事业、特殊纸事业),架构上算是相当庞大的类型,因此在前期我们花了相当多的时间,去了解华纸的产品分类,以及每个事业体的内容,
最后整理了华纸希望在官网上,需呈现的所有事业资料,协助华纸做架构上的分类。
B.确认网站整体风格
在承接华纸CSR报告书设计时,我们就曾为他们制定好企业识别形象,确立了未来企业风格的调性,因此这次在网站设计上,我们还是延续华纸希望强调的「人文、环保、永续」的概念出发,并使用我们曾为华纸设计过的「年轮辅助图案」,让他作为网站的底纹。为了呈现华纸的企业精神,配色上我们建议使用白底作为网站主调,而由于企业网站依然必须保有他的专业与信赖感,因此风格上也不适合过于花俏。我们最后希望它能呈现比较具有人文的丶有温度的丶有诚信的丶环保的,这几个面向来呈现风格。
C.网站动线规划
在网站视觉设计开始前,线框图的制作是相当重要的,我们可以藉由线框图进行初步的讨论,讨论的内容包含使用者的行为分析、动线分析、按钮位置等等操作上的合适性,如网站不容易使用导致跳出率增加,反而对于网站在Google上的排名会造成影响。
【第二阶段:网站视觉设计】
A.网站版型设计
由于我们已确认过网站整体的风格调性,因此我们依照设定好的调性,来做版型上的变化,提案了几个方向与客户做讨论。
以定案版的首页规划来说,我们希望一进来可以感受到华纸希望强调的人文、环保、永续的氛围,因此我们用了大光圈拍摄的纸张、叶脉、年轮三张满版图设计轮播Banner。
而往下滑动后,我们希望浏览者可以立即知道华纸的五大产品体系,因此放置了五幅代表事业体的图片,另外特殊纸栏位,以图片轮播方式呈现。由于华纸并不会太常态性的发表最新消息,因此我们将他规划在最下方的栏位。
B.网站照片统一
照片的品质对于网站整体感相当的重要,尤其当照片放在首页Banner时,照片品质更是决定了整个网站的品质,而客户端也跟我们有相同的理念,了解到照片对于一个网站的重要性,因此也请我们为网站做整体照片的规划,包含每个页面Banner的选用、所有纸张产品照片的选用,我们都做了全方位的筛选、构图裁切、调色等作业。
C.网站资讯与图表设计
许多网站在遇到图表或icon时,为了加快制作时间,会直接购买使用图库网上现有的元素,虽然可以很快的达到装饰的功能,但由于并非客制化,因此在效果上有时会呈现和网站风格调性不符的情况。为了能让网站上的美感、风格能统一调性,我们坚持将网站上所有的资讯图表都重新客制化设计。
D.各尺寸版型规画
现在由于能浏览网站的电子媒体很多,最常用的包含PC、手机、ipad,为了要响应各种电子媒体,让不同媒体浏览下,都能有最佳化的视觉效果,因此我们也同时为不同介面规划它的版本。
【总结】
当以上所有作业完成后,紧接着我们将所有内容提交给网页工程师制作网页化,以及后台管理系统的部分,而与网站视觉设计师与工程师的沟通,也是相当重要环节,也因为我们有优秀的网页工程团队(好点子数位创意)协助,才能让我们顺利将视觉与程式完美的结合呈现出来!
这次华纸网站更新,又为华纸企业形象更新迈向了一大步!很感谢中华纸浆对于我们团队的信任,认同我们的设计理念与我们在乎的种种细节,给予涂设计团队很大的设计空间,帮助华纸的企业形象再次提升!