網站設計與架設流程的6個步驟
在開始進行網站設計與架設之前，有些準備工作是必不可少的，了解網站設計與架設流程便是其中之一。透過流程，能夠了解各個階段的重點項目、應該準備的資源以及必須推進的行動，如此循序最近，最後才能順利完成網站設計與架設專案。本文將介紹網站設計與架設流程，不論是自己架站，亦或是與網站設計公司合作，都十分適合做為參考。
第一步：明確目的、受眾及功能需求
在最初的階段，一般至少需要釐清網站的目的、客群及功能需求等等。這些項目環環相扣，也影響了後續步驟的規劃方向以及最終產出的結果。因此，如果沒有明確的話，容易造成後續方向與預期不符，進而導致人力成本及時間成本的浪費。
網站的目的為何？
常見的架設目的有建立企業形象、傳遞企業資訊、展示產品、販賣產品等。一般來說，容易出現同時存在多個目的的情況。因此，需要將目的分成主要目的及次要目的，便能釐清規劃、取捨時的優先順位。
以製造工業產品的企業為例，這類型企業一般以業務拜訪為主要拓展模式，所以網站的主要目的是傳遞企業資訊，讓投資人或潛在合作對象對企業的事業內容有所了解，而次要目的才是展示自家所製造的產品。因此，規劃網站時，會以企業形象、事業內容為主，子頁則放置產品資訊。而若是以製造消費品的企業為例，則網站的主要目的有可能就會是已呈現商品、促進消費者認知為主，此時，首頁放置的內容可能就會強調產品的品牌個性及特色，而非企業的相關資訊。
網站的受眾為何？
網站的目的很大程度地決定了網站的受眾，而不同的受眾則應該提供不同的內容，甚至設計風格、網站功能。
以醫療健康領域的企業來說，網站的受眾可能包含醫療專業人員及一般患者。針對這樣性質迥異的受眾，就會需要提供不同等級的資訊，而若將資訊置於同一個頁面，則容易造成混淆。針對這樣的情境，一般會將網站區分出專屬區塊、頁面，甚至直接分成兩個網站。
網站的功能需求為何？
透過瞭解網站目的及受眾，才能規劃適當的功能，在預算有限的情況下，更能夠排列出實現功能的優先順序。
以製造工業產品的企業為例，若網站目的是要提升來自網路的產品詢問量，則網站規劃時可以設計個別產品的詢價功能。
相關文章
網站設計與架設前的8個思考要點
第二步：網站規劃
透過第一個步驟的討論，我們對網站有了模糊的輪廓。到了網站規劃的步驟，則是要將這個模糊的輪廓更加明確。一般來說，會針對以下幾個項目討論。
明確網站設計與架設範疇
以傳遞形象、資訊為主要目的的網站，需要明確出具體需要那些頁面，例如：關於、服務、聯絡等，這些頁面裡大概要有那些內容，有哪些功能是必須的。而已販售產品為主要目的的網站，除了要討論前述的內容外，更需要深入討論使用者流程及相對應的功能。舉例來說，一般電商的使用者流程為產品頁、購物車、結帳頁、感謝頁，在這個流程中，是否需要設置滿額免運等優惠方式，又或者在購物車頁面設置加價購，甚至修改結帳表單並讓網站後台符合企業內部作業流程等，都是需要加以明確的內容。
網站架構階層圖
具體的頁面確定之後，則需要以階層圖的形式繪製出網站架構圖。網站地圖能使設計師、工程師等合作夥伴系統性地了解網站整體，有助於網站頁面內容規劃、文案規劃、網站頁面設計、功能流程設計等。
以FirstHatch一起孵網站為例，首頁以下共有4個頁面，在專案列表頁及Blog列表頁以下，則分別有各自的文章頁面。
使用者流程圖
對於電子商務網站、會員網站等較為複雜的網站來說，繪製出使用者流程圖並做為討論依據，能夠協助釐清需要客製化的地方，減少溝通誤差。
以NGO/NPO領域的網站為例，若需要透過網站進行捐款，則進行捐款的使用者流程可能如下圖所示。
設計規範
設計規範是網站未來進行網站頁面設計的依據，根據網站的目的、客群及品牌個性的不同，設計規範也會不太一樣，一般來說，至少會包含風格、色調、各級標題的字型及大小，再嚴謹一點的甚至會包含網站使用者介面的規範，例如：選單、按鈕、邊距等，以及錯誤範例。
專案進度圖
透過專案進度圖，可以把每個步驟可視化，使得合作夥伴了解負責步驟的時間點以及專案進度，進而能在適當時機提供幫助。此外，也能夠藉由專案進度圖預估可能的風險，進而擬定對策，降低專案延遲的概率。
相關文章
顧客旅程及網站內容規劃
從行銷角度切入WordPress多語言網站架設
第三步：網站設計
網站設計的階段，可以分成線框圖及設計稿兩個部分。透過這兩個部分，確立網站各個頁面的的使用介面及體驗（UI/UX）。
線框圖與使用者體驗
線框圖，白話來說，就是草稿。透過線條與圖形的方式，呈現出網頁的各個元素及文案的編排。設計時，需要將使用者體驗（UX）納入考量，根據使用者的習慣，思考透過何種形式能呈現資訊較能達到網站目的，同時也帶給使用者最佳的瀏覽體驗。
設計稿與使用者介面
設計稿以設計規範為基礎呈現出網站整體視覺以及使用者介面（UI），完成的設計稿即是網站完成後應有的樣子。
相關文章
可以用WordPress製作客製化網站嗎？套版網站與客製化網站的差異
創造高轉換著陸頁（Landing page）的4個必備要素及4個製作步驟
從數位行銷的角度看行動呼籲（Call to Action, CTA）
多語言網站設計時的5個注意事項
數位時代的網頁閱讀習慣
第四步：網站架設
在網站架設階段，工程師依照設計稿、功能需求等，選擇適當的伺服器配置及架站方式，例如：WordPress。在架設的時候，除了要確保成品與設計稿一致之外，也需要注意網站程式結構的搜尋引擎友善度、網站速度、不同瀏覽器或裝置間的顯示、安全性等，才能讓網站最終發揮最大的數位價值。
相關文章
WordPress基本介紹，超過30%市佔率的內容管理系統（CMS）
製作高效能WordPress網站的Oxygen Builder網站編輯器
我不是機器人，在WordPress網站加入Google reCAPTCHA
第五步：品質確認
一般來說，網站速度、不同瀏覽器或裝置間的顯示、安全性等是這個階段的主要測試項目。另外，對於功能較為複雜的網站，例如：電子商務網站、會員網站等，則需要設計不同的使用情境，模擬使用者的真實情況，確認有無流程上的瑕疵。
相關文章
淺談網站品質測試計畫
第六步：上線並持續維護
在完成前述五個步驟之後，就可以讓網站上線了。然而，上線並不是終點，為了確保網站運作順暢，需要定時進行維護及更新，例如：伺服器管理、程式更新、資料庫清理、備份等。
FirstHatch一起孵的網站設計與架設流程
FirstHatch一起孵基本上就是依循這六個步驟來執行網站設計與架設專案。我們會透過系統性問答的方式，釐清明確網站目的、客群與功能需求，依照專案預算取捨非必要的功能，再透過顧客旅程的思維模式，規劃網頁內容，促進有效轉換。此外，FirstHatch一起孵一般以WordPress作為網站架設工具，注重網站的搜尋引擎友善度，使得網站較易取得良好搜尋排名。最後，專案經理會掌握整個網站設計與架設流程，調度相關資源，並協助客戶掌握進度以及網站完成後的樣貌，以此減少專案執行中的溝通誤差及延遲。如果有任何需求，歡迎立刻行動，聯絡一起孵專員。
