ENsearch btn

2020-12-31
Eric Wang

網站建置流程有哪些?網站架設前必看重點

網站建置5大階段流程,每個階段也各有不同的細項與時程。架設網站前,你可能會想知道網站建置各階段的準備工作有哪些、預計花多少時間完成。讓我們進一步解說,讓你了解各階段的重點。

網站建置流程圖 - 凱士網頁設計

 

網站設計從零到有,將會歷經網站規劃、網頁設計、網站建置、網站測試上稿、上線驗收這5大階段流程。我們先來了解網站建置前的準備工作,後續再一一為大家介紹網頁設計流程的各階段工作。

 

 

網站建置前有哪些準備工作?

對於公司網站的建置來說,有很大的機率會直接找網頁設計公司進行網站建置。網站建置的技術與細節很多,在網站建置前(也就是簽約前),會有哪些準備工作?下列這幾點通常是決定性的重點,給各位參考。

 

  • 準備好你的網站架構表 - 網站架構表代表整個網站設計的工作範疇,有了網站架構表,至少網頁設計公司比較知道你的網站是大是小,有沒有什麼特殊功能、有沒有什麼特殊版面、適合用套版或是客製化的方式進行網站建置。

  • 找出至少5個目標網站參考範例 - 網頁設計的需求品質與風格很難用口語或文字表達,但通常可以在網站參考範例看得出來。提供網頁設計參考範例可以讓網頁設計公司很直覺來理解你對設計品質的要求程度。

  • 提出預算範圍 - 網站製作的預算範圍可以從5萬到100萬,就像蓋房子一樣,預算決定了你可以蓋多大的房子,決定了室內裝潢能做到什麼程度,提出你的預算範圍有助於讓網頁設計公司評估你的預算是否能達到你的期望。

  • 決定你的上線時間 - 網站建置通常有一定的時程,尤其是客製化的網站,製作細節很多,也會花比較多時間。讓網頁設計公司了解你的上線期限(例如跟前網站製作公司的合約到期、或是要趕著參展時程),有助於掌握網站時程,避免什麼事都規劃好了,才發現沒辦法在預期時間內將網站上線。

 

延伸閱讀:【架站前必讀】推薦你4個與網頁設計公司溝通前的準備重點!

延伸閱讀:網站架構有什麼設計參考範例?來準備網站架設前的第一份文件

 

  


 

建置流程1:網頁設計階段 | 確認版面設計與操作流程

簽約後即可開始進行網頁設計。從首頁開始,透過訪談及需求匯整後,提供提案稿給客戶進行討論,確認後再進行設計稿。首頁是整個網站設計風格與樣式的基準,首頁定稿也就代表網站風格定下來了。完成首頁設計後,就可以往下進行各內頁的設計,並確保各內頁設計風格的一致性。完成各內頁版面設計並經雙方確認後,即可進行下一階段的網站建置工作。

 

  • 首頁提案稿確認
  • 首頁設計稿確認、網站設計風格定稿
  • 各內頁設計、對稿,建立設計說明書
  • 網站客製功能版面設計(UI)、流程規劃(UX)、資料庫規劃
  • 建立切版說明書

 

預估時間:4~6週

網站進度:10%~50%

 

 延伸閱讀:談網頁設計流程:如何進行視覺設計溝通?

 


 

建置流程2:網站建置階段 | 穩定開發、建立網站整體建構

這個階段的工作包含前台網頁切版(html+CSS)、CMS後台系統整合、資料庫與程式功能建置。這段時間可以進行網站上稿資料的整理和歸檔。

 

  • 網站進行本地端開發與測試(於設計公司內部開發環境)
  • 網站選單架構建立
  • 網站切版工作、RWD響應式網頁
  • 網頁前端CSS樣式、網頁動態效果
  • 網站客製功能撰寫、邏輯測試、單元測試

 

預估時間:3~4週

網站進度:70%~80%

 

延伸閱讀:什麼是CMS網站後台系統?在網站建置有哪些優勢? 

延伸閱讀:什麼是RWD響應式網頁設計?圖解說明讓你3分鐘搞懂手機版網站 

 


 

建置流程3:網站測試、上稿 | 細心校對網頁每一個細節

網站在測試流程中有幾個小階段,當網站於開發環境初步建置完成後,就會在開發環境中依網站架構表(sitemap)進行選單/內容建置、基礎功能性測試,待網站轉移至demo site後,就可以讓客戶看到約80%網站的樣子。在這個階段可以驗證網站是否如規劃書和設計稿呈現在網路上,RWD及網頁瀏覽切換也可以在這個階段得到實際的反饋。網頁內容上稿的過程中,也能用來驗證當初的版面規劃是否符合實際上稿的情況。各語言版本的資料也會在第一語言版本確認後開始進行。這個階段會經過反覆的測試和微調,確認無誤後,就可以進行網站正式上線,轉移到正式主機。

 

  • 網站轉移進行實機測試(於demo主機)
  • 網站架構流程檢視
  • 網頁內容上稿、測試、確認
  • RWD網頁檢視、跨裝置測試
  • 多語言版本功能建置、資料上稿

  

預估時間:2~3週

網站進度:80%~90%

 


 

建置流程4:網站正式上線與驗收

網站在demo site經過檢驗和測試無誤後,即可擇日轉移到正式主機,並進行全案驗收。這個階段會進行網站後台操作教育訓練,讓網站維護無後顧之憂。後續如有網站行銷工作,也會在這個階段展開。

 

  • 網站轉移正式上線(於正式主機)
  • 網站教育訓練
  • 結案驗收
  • 後續維護/年度合約

 

預估時間:2週

網站進度:90%~100%

 

 延伸閱讀:網站設計費用包含哪些內容?  

延伸閱讀:公司網站架設完成後如何進行SEO?推薦新手從零到有的4個學習步驟 

 延伸閱讀:網站設計流程:從時程表一覽網站製作過程與所需時間

 

以上就是整個網站建置流程,希望能讓你對於網站製作的過程有初步的了解。如果對於網站建置、網頁設計、網路行銷有任何問題,都歡迎聯繫我們

 

 

 

* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司

 

 

網站設計服務諮詢

為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。

 

您可以直接填寫諮詢表單,或撥打諮詢電話 04-22210688

 

 

cadiis

Eric Wang

凱士網頁設計公司 專案經理 Eric,擁有設計、理工、管理等跨領域背景,樂於和不同領域的專業工作者進行分享與討論。在專案工作外,同時也兼任大學行銷系業界講師,長期致力於「網頁設計白話文運動」。

 

 

 

好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用者體驗與企業形象。

 

需要網站設計服務嗎?

凱士為您設計優質的

形象網站、公司網站、企業網站、
客製化網頁設計

 

立即填表諮詢

想進一步了解網頁設計服務?