WebDesign 網站企劃|服務建議書之規劃與製作

網站需求與規劃

本單元以專題製作導向以及實際政府標案提案為範例,說明網站建置需求與服務建議製作與提案的做法,並應用於本課程作業,以實際體驗網站建置的真實意義與做法。

一般的標案提出需求後,約一到兩個禮拜要提出服務建議書,並於3-7天左右簡報,時程非常的緊湊,除了需提出規劃建議外,還需要提出基本的視覺規劃,包含首頁、基本模組化視覺設計等,因此多練習及累積作品是非常重要的,也期待大家在專案設計的實務練習中,能讓自己更具專業實務能力。


政府電子採購網|標案查詢

需求說明書

首先由業主提出網站需求說明書,廠商需針對需求,提出服務建議及視覺規劃,撰寫服務建議書。

視覺為主之官網改版案評選項目及標準案例
  1. 相關經驗、實績與能力
    • 公司簡介,人力與規模。
    • 創新及加值服務。
    • 主要經營項目與範圍。
    • 近3年營運狀況。
    • 承作本案相關之經驗及目前承作之專案(國內外大型網站執行經驗、網站無障礙與響應式設計經驗)。
    • 廠商企業社會責任(CSR)指標
  2. 專案需求之規劃與建議及其技術能力
    • 網站視覺設計之分析規劃與建議。
    • 網站內容之分析規劃與建議。
    • 網站UI、UX規劃設計。
    • 網站SEO規劃設計。
    • Web API銜接規劃與建議。
    • 網站RWD響應式設計與規劃。
    • 通過網站無障礙規劃方案及時程說明。
    • 網站效能提升規劃與建議。
    • 網站安全防護機制。
  3. 專案管理與維運能力
    • 工作項目、交付項目時程及品質保證說明。
    • 時程規劃與檢核點。
    • 預防資安事件及網站異常處理方式。
    • 專案人員管理及職掌與分工(含專案人員姓名、經驗、技術能力及相關證明文件)。
    • 後續增修建議。
    • 保固服務。
    • 通過網站無障礙規劃方案及時程說明。
    • 網站效能提升規劃與建議。
    • 網站安全防護機制。
  4. 價格合理性
    • 成本分析表,各項費用與成本分析包括直接薪資、管理費用、其他直接費用、公費及稅捐等。
  5. 創意表現
    • 其它可展現網站核心價值之創意。

官網改版案評選項目及標準案例
  1. 專案需求之規劃與建議及其技術能力|40%
    • 網站整體服務架構及網站內容之規劃建議與分析。
    • 網站開發之方法、技術與能力
    • 網站硬體環境之架構設計。
    • 網站安全運作機制。
    • 新舊系統資料轉換。
    • 創新及加值服務。
  2. 專案管理與維運能力|20%
    • 工作項目、交付項目時程及品質保證說明。
    • 時程規劃與查核點。
    • 網站維運與管理。
    • 教育訓練及後續擴充建議
  3. 廠商經驗與專案組織能力|20%
    • 廠商整體經驗與技術能力(列舉實例)。
    • 廠商或團隊人員獲得認證相關資料。
    • 專案組織架構、職掌與分工(含專案各成員之學經歷與年資)。
  4. 價格及成本分析|20%
    • 整體規劃、各項費用編列分析及運用之完整性及合理性。

需求規範說明書 |參考
  1. 財團法人國家文化藝術基金會|官方網站改版建置案委託廠商|評選作業說明|2018
  2. 客家電視網站建置與維護案|需求說明書|
  3. 國家通訊傳播委員會|102年度全球資訊網網站擴充委外服務案|徵求服務建議書說明文件
  4. 如何撰寫網站製作的規格需求?

服務建議書

服務建議書|企劃書|撰寫前準備資料的四大方向
  1. 廠商規模、信譽與實績
  2. 計劃主持人、專案人員等 相關經驗與能力證明
  3. 服務計劃與執行內容
  4. 價格之完整性與合理性分析

服務建議書|企劃書|呈現重點
  1. 須符合基本的寫作格式
  2. 頁面、頁數的配置要合理與精簡,不要濫竽充數
  3. 盡量以圖片、照片、表格、表單、流程圖等圖面化的元素,豐富服務建議書的可讀性與凸顯重點
  4. 簡報檔應搭配服務建議書製作,達到畫龍點睛、引導評審閱讀的目的

服務建議書|企劃書|目錄與內容建議
  1. 相關經驗、實績與能力
    • 公司簡介,人力與規模。
      • 公司的基本資訊
      • 成立日期、資本額、員工人數、營業項目等基本資訊。
      • 組織架構圖
      • 依組員專長分工,有時規模較小之公司,會擔任多項職掌,如專案主持人與專案經理是同一人,視覺設計小組也只有一人或兩人,需擔任全部之工作。

        以下為網站設計專案組織架構圖,請依公司規模調整。


    • 主要經營項目與範圍。

    • 承作本案相關之經驗及目前承作之專案。
    • 可將製作過之案例列表後,部分代表案例詳細說明,以下僅為參考示意
      承作相關之專案設計
      年度 專案名稱
      2016-2019 金門瓊林再造歷史現場|御賜瓊林網站
      2019 台北市室內設計裝修商業同業公會|官網改版

  2. 專案需求之規劃與建議及其技術能力(詳見課程說明)
    • 網站視覺設計之分析規劃與建議。
    • 網站內容之分析規劃與建議。
    • 網站UI、UX規劃設計。
    • 網站RWD響應式設計與規劃。

    • 網站視覺化設計流程

  3. 專案管理與維運能力
    • 工作項目、交付項目時程及品質保證說明。
    • 時程規劃與檢核點。
      • 甘特圖 Gantt


    • 專案人員管理及職掌與分工(含專案人員姓名、經驗、技術能力及相關證明文件)。
      • 依組員專長分工,有時規模較小之公司,會擔任多項職掌,如專案主持人與專案經理是同一人,視覺設計小組也只有一人或兩人,需擔任全部之工作。
      • 專案人員執掌與分工

      • 專業團隊成員介紹(依工作職稱|分別介紹)

  4. 價格合理性
    • 成本分析表,各項費用與成本分析包括直接薪資、管理費用、其他直接費用、公費及稅捐等。
  5. 創意表現
    • 其它可展現網站核心價值之創意。

服務建議書 |參考
  1. 「服務建議書或服務企劃書」- 撰寫資料準備與基本呈現重點
  2. 【企劃教學】不知道怎麼寫標案企劃書?直接帶著你寫

相關案例介紹


  1. 金門瓊林再造歷史現場|御賜瓊林網站
  2. 為鼓勵瓊林聚落傳產業者及有志青年齊心投入聚落文化創意產業復興與培力發展,本案將藉由聚落識別系統設計、聚落文創再生經營管理、聚落傳統文化藝術教育等工作,做為活化再造瓊林聚落歷史現場風華之基礎,配合地區進士宗祠歷史文化、自然生態觀光資源及戰地民防軍事主題等,推廣瓊林文化創意產業及觀光行銷,鼓勵扶植地區文創產業發展。




  3. 流新語|專題網站
  4. 我們能從流行語的演進變化,得知時間的動向、文化的演進。因此建立一個響應式(RWD)網站,可以輕鬆了解流行語,幽默學習並增加互動。


     服務建議書|成果報告書|參考


專題網站製作說明

請針對政府標案模式,找一主題|指定主題,或以專題製作方向,模擬一完整之真實網站製作:
  1. 期中報告前
    • 可組織團隊製作(也可一人製作),於第三週前繳交組員名單,並請於企劃書|服務建議書中,詳列每位成員的專長、案例及負責項目。
    • 針對主題內容及製作方向,選擇一個版型範例為視覺設計規劃方向。
    • 針對網站製作方向,撰寫企劃書|服務建議書|需含視覺規劃。
    • 以企劃書|服務建議書內容,製作提案簡報|需以規劃風格為主,具視覺美感。

  2. 期末成果
    • 針對服務建議書方向,完成一個專業RWD多頁網站|至少10頁(基本60分,並依團隊人數斟酌給分)
    • 撰寫成果報告書(包含後續推廣規劃)。
    • 以成果報告書內容,製作結案簡報|需以網站風格為主,具視覺美感|並請精簡報告。

 服務建議書|成果報告書|期中期末報告|學長姐範例參考


澎湖旅遊網|網站設計案

威尼斯影城|網站改版案

小叮噹科學園區|網站改版案

台灣失智症協會|網站改版案

家扶基金會|網站改版案

應用類型

  1. 畢業專題應用|RWD|多頁
    1. 流新語|入圍金點新秀設計獎|數位多媒體類|
    2. 流新語|第一版

    3. 這不是禮品店|紅點設計獎|華麗禮物背後隱藏的現實與真相,性暴力議題

    4. 盲思特|認識怪獸家長

    5. 品次方|品格教育

  2. 專案應用|多頁
    1. 中國科大視傳系網頁
    2. 金門瓊林再造歷史現場 產業創新與管理培力計畫

    3. 中國科大規劃與設計學院4E計畫成果|OnePage延伸
    4. 臺灣亞洲交流基金會
    5. 玉山論壇|亞洲創新與進步對話
    6. 台灣佛教傳道協會
    7. 京都亞洲研究國際聯盟