這幾年來我們遇過台灣許多的大型企業，漸漸了解到「品牌形象」的重要性，從「傳統代工」轉向「自有品牌」，為未來企業經營的重要趨勢，因此陸陸續續在進行公司形象的改造。

而一間企業所帶給社會大眾的形象，除了產品與服務外，其中一項重要的因素在於企業識別系統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，為了要響應各種電子媒體，讓不同媒體瀏覽下，都能有最佳化的視覺效果，因此我們也同時為不同介面規劃它的版本。

【總結】

當以上所有作業完成後，緊接著我們將所有內容提交給網頁工程師製作網頁化，以及後台管理系統的部分，而與網站視覺設計師與工程師的溝通，也是相當重要環節，也因為我們有優秀的網頁工程團隊(好點子數位創意)協助，才能讓我們順利將視覺與程式完美的結合呈現出來！

這次華紙網站更新，又為華紙企業形象更新邁向了一大步！很感謝中華紙漿對於我們團隊的信任，認同我們的設計理念與我們在乎的種種細節，給予涂設計團隊很大的設計空間，幫助華紙的企業形象再次提升！

涂設計 2018.10

→欣賞華紙網站完整作品