怎樣寫一份網頁設計企畫書

 最近看到一些朋友在接觸前端的網頁設計專案時似乎不是很有經驗，因此把過去幾年斷斷續續接了一些網頁設計專案的經驗，寫在這邊與朋友分享。-大抵來 說，在製作前端的網頁時（在這邊暫且不論使用了什麼後端平台、以及與資料庫連結的各種系統技術那類的專案），除了各種如HTML、CSS語法，還有常見繪 圖（Photoshop、Illustrator等）、製作（如Dream Weaver、FrontPage等）工具的熟悉之外，最重要的是專案的企畫階段，而特別是要製作出一份清楚的企畫書，藉由一份紙本，便可以為客戶先行勾 畫出最後成品的輪廓，讓客戶瞭解工作內容與進度，工作成員也能夠有清楚的分工、工作分派的依據，所以往往是在企畫、提案階段，花去最多的時間，但是在企畫 階段花上較多的心力，在後來的製作階段便可以省去許多修改上的不必要功夫。當然啦，製作能力重要，企畫能力重要，不過似乎業務能力更重要，往往是做案子容 易，找到找案子做難呵。

大概來說，一份網頁企畫書應該包含幾點：設計理念、視覺風格、網頁結構、使用技術、人力配置、時程配置、報價、品質保證等等，以下就這幾點分點說明。

一、設計理念：

以濃縮、精練、簡要的文字，呈現出設計最初的出發，以及最後設計成品所要表現的主題，比方說「健康」、「自由」、「溫暖」、「幸福」等，一名設計者 如果沒有理念，那麼便稱不上是設計。換言之，設計理念就是在純粹視覺表現之外，設計作品最重要的背後意識形態，此一意識形態須切合企業形象以及企業的行銷 策略。

二、視覺風格：

視覺風格的提案大概包括兩方面，造型風格以及色彩計畫。

造型風格主要是設計將要採取怎樣的文類（genre），比方說，要沿用東方的風味還是西方風味，採用傳統風味還是現代風味，寫實風格或抽象風格等， 或是要表現哪一種媒材的質感，如鉛筆、油畫、水彩、水墨等。除了版面與圖片外，還有標準字與Logo的定義。設計理念是決定造型文類的最重要因素，因為在 各種風格的母題（motif）使用上，往往這個母題本身便包含了意義。

色彩計畫在於定義出系統所要使用的配色，定義出要使用顏色的色票以及顏色運用的比例。

三、網頁結構

網頁結構決定站台導覽的方式，通常來說，有三種網頁結構：

1. 線性結構：單一入口導向單一結束，多用於敘事性質較強的網站，例如線上Flash影片等。
2. 階層結構：使用多層選單，使用者從單一入口，依據一層一層的分類、層級進入內容，目前大多網站都使用階層結構。
3. 網狀結構：系統提供多重入口，可以用各種方式瀏覽網站。

在企劃書上，網頁結構多以結構圖呈現。另外根據網頁結構，決定怎樣製作導覽方式，例如製作選單或網站地圖（Site Map）等。

四、使用技術

前端網頁設計中不受平台影響的技術部份，包括是使用HTML或XHTML、是否使用Java Script、CSS、是否內嵌有Flash檔案等，如果包含使用需要特殊環境、設備才能夠瀏覽的技術，應詳盡列出。另外，如果使用須伺服器支援的動態頁 面技術，需要採購方在前端之外，在後端予以支援，也應在企劃書中告知。

五、人力配置

安排人力分工，通常來說，會需要有一人負責擔任聯繫的窗口，連絡客戶，反應客戶要求以及通知其他設計成員。而成員間因為工作的比重，可能有人專注在HTML、有些則專心在Flash動畫、圖形或3D模型製作等。

六、時程配置

專案進行的時間表，專案進行的時程規劃大抵如下。

1.需求書、招標：採購方提出需求書，設計者取得需求書研究
2.企劃書提案：設計者針對需求出內容，進行設計企劃，企劃除了人力、時間及報價外，在視覺風格方面，多提出多組設計供採購方挑選。
3.比稿：多家設計者一同參與比稿，採購方從多家設計者中挑選理想的設計，或雖不符合理想，但先決定設計者，並繼續修改企劃書。在合理的狀況下，採購方應該給予每家參加比稿得設計者比稿費用，不過台灣往往並沒有這樣的觀念。
4.議價、簽約：根據企劃書內容簽訂合約。
5.製作：按照企劃書內容執行。
6.期中報告：報告製作進度，採購方在此階段可提出較多修正意見。
7.修改、完成製作：設計者依據採購方意見，修改先前設計進度，並完成製作。
8期末報告：檢核期中報告的修正意見是否修正完成，並檢查設計成果是否仍有問題需要修正。
9.最後修改：根據期末報告中的問題進行修正。
10.驗收、交貨：比對成果與企劃書內容，結案。

在實務上，會將一個專案拆成多個部份分工，每一項分工的時程也儘可能在企劃階段進行詳細規劃。

七、報價

坊間有許多什麼「一頁HTML八百塊」之類的浮濫報價方式，但對專業的設計來說,，合理的估價應該是，因為這類設計以人工為主，所需要的工作量，也 因為頁面的精細程度有所不同，因此該是設計者人工的合理薪資，乘上所需要的工時，所粗估的大概人事費用，加上稅金以及設計公司利潤等。

人力的估算包括網站的規模、Flash可能需要的精細程度，除了單純頁面設計外，會不會需要額外文案與腳本的人力，採購方材料支援的多寡也會影響設計者所需要準備素材的時間等。考量的範圍還包括是不是急件、要加成收費…等等。

八、品質保證

設計者應保證以下幾點：

1.設計中不含惡意程式碼（如電腦病毒或惡作劇設計）
2.可在多種通行的平台以及瀏覽器中順利瀏覽
3.設計成品不會引起著作權問題。

九、設計概念圖

在提案時，以Illustrator或Photoshop，先挑選重要頁面（如首頁或內文模版），繪製出網頁最後的視覺外觀，供採購方在挑選的時候作為主要的參考。而在修改企劃書所提案的視覺風格上，也是以修改設計概念圖為主。

十、其他

其他交貨方式、付款方式等。