ENsearch btn

2022-08-10
Eric Wang

網站建置製作如何進行?網頁設計流程的必看重點

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

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

 

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

 

網站建置前的準備工作

對於公司網站的建置來說,有很大的機率會直接找網頁設計公司進行網站建置。網站建置的技術與細節很多,在網站建置前(也就是簽約前),有哪些是需要提前準備的工作呢?

 

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

 

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

 

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

 

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

 

 

如果你還沒準備好這些準備工作,歡迎參考下面這篇文章

延伸閱讀:接手公司網站架設好煩惱,推薦6個與網站公司討論的準備重點

延伸閱讀:合理的網站架設製作與網頁設計費用通常包含哪些?解讀網站報價與價格行情

 延伸閱讀:網站設計作品案例這麼多,該如何挑選網站參考範例?

 

 

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

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

 

首頁設計

首頁設計是整個網站設計風格的關鍵,首頁的配色與設計元素的應用決定了後續整個網站的UI/UX介面設計,當然也包含了整個網站的使用體驗。

首頁是網站的主要入口,網站首頁就像是一間公司的10秒PPT簡報,首頁的配置也是外來訪客理解公司定位的重要關鍵。

 

功能頁版型設計

完成首頁設計後,緊接著就會是各單元的版型設計。系統性的版面設計如產品頁、最新消息,只要版型確定,就可以在後台無限制上架各頁面的資料。

 

簡介頁編排設計

與版面設計同步進行的,是各頁面的編排設計。編排設計有別於單元版型設計,主要是在於需要設計編排的頁面,例如:公司簡介。通常這些頁面屬於介紹性的說明頁,透過有質感的編排設計,可以讓網頁更顯獨特。

 

 

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

 

 

 

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

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

 

網站系統建置

網站後台管理系統將會在這個時間進行導入與建置。CMS內容管理系統提供網站日後在管理上強而有力的基礎。

 

各單元網頁切版

切版,代表著前面設計階段的網頁設計稿都將在這個時間逐一切版成為真正的網頁,同時與CMS網站管理系統整合成一個可供執行運作的網站。

 

客製程式撰寫與功能整合

網站依需求難易而有不同程度的資源投入,越是客製的網站,就需要更為深入的客製程式撰寫與資料庫整合。

 

 

延伸閱讀:CMS是什麼?透過網站後台管理系統,程式小白也能打造專屬網站!

延伸閱讀:RWD是什麼?圖解輕鬆搞懂RWD和AWD的差別

 

 

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

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

 

DEMO網站上線

當本地端的開發工作進行到一個段落後,接著就是讓DEMO網站上線,這個階段就可以讓網站在DEMO主機上線,於此同時,客戶就可以透過DEMO網站瀏覽網頁。

 

網頁內容上架

在DEMO網站上,不管是由網頁設計團隊或由業主客戶,都可以在這個階段從後台進行文字及圖片的上架。

 

圖文內容校稿

資料上架完成後,就進入了校稿階段,讓企業客戶內部人員、網站專責單位對網站內容進行校對。

 

第二語言版本建置

完成主語系網站後,即可由企業客戶提供各語言版本文字稿,進行第二語言版本的網頁建置。語言功能與網頁介面建置完成後,日後可於後台進行各語言版本的內容更新。

 

 

 

流程四:網站正式上線與驗收

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

 

正式上線

網站經過前面層層關卡程序,終於可以上線。在這個階段需進行網站轉移與網域指向。網站轉移至正式主機環境並完成網域指向後,網站即可在正式的網址上線。

 

教育訓練

網站上線後,當然不可少的是網站後台操作的教育訓練。透過教育訓練課程,可以讓日後負責維護的行銷人員和資訊人員進行網站日常維運。

 

驗收

驗收是專案的最後一個流程,確保網站的每一個環節被確實執行。

 

  

延伸閱讀:合理的網站架設製作與網頁設計費用通常包含哪些?解讀網站報價與價格行情

延伸閱讀:SEO是什麼?網站SEO優化初學指南全解析!

延伸閱讀:網站架設方式如何選擇?架設網站流程步驟、優缺點一篇比較

 

 

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

 

 

更多網站設計要點歡迎參考:

網站/網頁設計公司這樣挑不踩雷!5大原則教你找到專業設計公司

 

 

 

 

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

 

 

 

網站設計服務諮詢

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

 

您可以直接填寫諮詢表單;撥打諮詢電話 04-22210688;或加入凱士LINE由專人與您聯繫。

line qrcode

 

 

cadiis

Eric Wang

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

 

 

 

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

 

需要網站設計服務嗎?

凱士為您設計製作優質網站

形象網站、公司網站、企業網站、
及各類型客製化網站系統平台

 

立即填表諮詢

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

line