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

最近看到一些朋友在接觸前端的網頁設計專案時似乎不是很有經驗,因此把過去幾年斷斷續續接了一些網頁設計專案的經驗,寫在這邊與朋友分享。-大抵來說,在製作前端的網頁時(在這邊暫且不論使用了什麼後端平台、以及與資料庫連結的各種系統技術那類的專案),除了各種如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,先挑選重要頁面(如首頁或內文模版),繪製出網頁最後的視覺外觀,供採購方在挑選的時候作為主要的參考。而在修改企劃書所提案的視覺風格上,也是以修改設計概念圖為主。

十、其他

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

Be Sociable, Share!

9 thoughts on “怎樣寫一份網頁設計企畫書

  1. 幫阿粽補充一下,一般來說只有大型專案(應該說是公家機關的專案)才會用上這種囉唆的企畫書,即使是大型商業網站,除非合作內容包含了網站規劃的部分。然而這類包含網站規劃的案子通常前後台不會分開外包。
    如果只是中小型的案子一般只要口頭溝通,頂多提一份網頁結構圖,再從提版型樣本的過程中修正雙方設計上的誤差就行,我想應該不會有人為了幾萬塊的案子傻到提一份那樣長篇大論的企畫書吧!?

  2. 謝謝… 正巧接到一個國外公司的網站案子 (雖然老闆還是華人)
    就如老艾所說中小型的案子一般只要口頭溝通,但我以前的經驗..笨笨的我,怎麼溝通對方都不會懂.. 還是需要簡單的企畫書
    感謝這麼詳細的解說呦~~~

  3. 目前比較麻煩的情況應該是『沒有人願意為設計付費』
    就像設計名片一樣,區區幾張紙成本多少?何必那麼貴
    當完整的分工出來時,合理的酬勞也提高不少
    雖然說這正驗證了一分錢一分貨,但市面多以一頁一千元以內的報價來看
    業務除了要與對手競爭,還需要灌輸客戶基本知識,壓力非常大!

  4. Pingback: palmpilote了無心意的布拉格)

  5. 其實在企畫書爬文中~客戶最在意還是價錢~大部份的客戶看完網頁品質~就開始喊價錢了~企畫書只是輔助的工具~我個人覺的還是要運用到你的三寸不爛之舌打動客戶的心呢。

Comments are closed.