网站设计:除了视觉之外

数位品牌建构

翁浩原 叶信鋐

品牌和公司官方网站,常常是许多人接触产品或是服务,或是再回头探访加深品牌和公司印象的重要工具。好的网站设计,扮演着品牌整体规划的重要角色,因为网站就是产品和服务的延伸,是重要的品牌资产。

网站的设计又可以大概区分为前端和后端,两大部分。前端即是网站的视觉设计,包含文字、图片、版面构成、配色,以及按钮和选单图标等一般使用者会接触到的地方;后端就是将资料动态地从伺服器取出并与前端视觉结合后呈现给消费者,也就是需要后端工程师建置资料库的部份。

如此一来,前端设计师所设计出来的版面,才能在从对应的资料库中取出所需要的内容。定期的维护和运作,更是长保网站的寿命。

如同先前所说的,网站是品牌的呈现之一,也是品牌重要的数位资产。有好的视觉设计,也必须要有相呼应的后端技术,才能够让使用者有好的体验。因此,这一次我们邀请到普罗品牌进化的合作伙伴—得宽科技研究员范圣佑来分享,从一个后端工程师角度,告诉大家平常比较少注意到的部分。

圣佑表示:“一般来说,客户是品牌的拥有者,他们有完整的品牌概念与好的视觉设计,但是他们不知道该如何透过程式来帮自己的网站加分。因此我们根据客户的需求规划系统架构、撰写程式,协助客户提升网站的使用者体验。”

根据多年的经验,他对于好的网站的定义:

1.满足目标族群:网站必需满足目标族群的需求,比方说针对年纪稍长的使用者,字级设定要跟着调整。设计上要现代感一点?精细一点?这些都必需先清楚目标族群的特质。

2.广适性:现代网站必需能够广泛地适应不同的装置,也就是说可以在桌上电脑、平板、手机等不同装置上浏览。在显示与操作上也不是追求一模一样,而是在不同装置下有合理的操作方式。

3.最小路径:让使用者可以在最短时间、按最少按钮就完成预期的操作。

倾听客户需求

先前得宽科技和普罗品牌进化曾经合作两个案子,分别是“宇智顾问”和“益安生医”,由普罗先和业主进行沟通,定调品牌的视觉规划。圣佑表示,这两个品牌的产业不太一样,因此需求不尽相同。以益安生医为例,他们是一个新创的生医品牌,需要在客户和股东中建立品牌形象。普罗品牌进化先完成规划和建立品牌指南(Guideline),再让得宽接手。

他分享,当时益安生医有投资人专区的需求,必须要有股东报表、财务报告的呈现,由于该资料需同步上传至公开资讯观测站,而客户希望能简化工作流程,“我们为客户设计了一个自动撷取程式,让客户在维护时,只需要在公开资讯观测站上登记,就能同步呈现在他们网页上,不用费时费力地重复更新两个介面。”

然而宇智顾问是从事整合知识价值链中各要素、提供企业营运模式规划、商业计划谘询等服务的公司,需要多一点对外沟通和发送资讯的功能,于是得宽科技为其设计了“电子报”的功能,让发送电子报变得轻松容易,达到他们媒体宣传、曝光的需求。

1+1>2 品牌顾问联手网页设计

因此在这两个案子里,普罗品牌进化负责做品牌和视觉设计,先和客户接触,根据研拟出的品牌策略与设计概念来做延伸,告知得宽科技做成网页的基调会是如何,给予基本的静态模板(template)表达设计的理念。圣佑表示:“因为不同的装置有不同的解析度,得宽科技会对此静态模板,在品牌规范下进行微调,接着在切版与程式等动态作业程序中,也会根据品牌规范在没有设计到的部分进行延伸。”两方彼此就专业的方面,给予回馈。他说:“当我们和客户讨论拿不定主意时,普罗品牌进化可以给我们一些建议,让客户的需求更为清楚地被了解。”

关于网站设计,从后端程式工程师的角度而言,圣佑分享了几个一般视觉设计师在网站设计上比较容易发生的盲点:

1.许多设计师通常从视觉面出发,而不是使用者的角度来看,因此我们会从架构上来辅助他们做整理。

2.设计师比较专注在平面或是视觉上,对于实作细节,比较不了解。有时在规划太注重于视觉呈现效果,但并不了解此效果在不同装置不同层面上能不能完整呈现。

因此有专业网站建置设计团队的合作是最好的状况,他说:“你(品牌设计公司)想呈现什么,我们在技术上支持你,做出期望的视觉效果;或是在不同装置上可以有怎样的替代方案,确保良好的呈现模式。”

欢迎媒体转载、分享或进一步洽询采访,刊载请注明“Process普罗品牌进化”、链接URL。