Contact
GEAR8 的客製化網站建置流程分享！
大家好，我是 Gear8 台灣的 Web Director – Ann。
常常會遇到很多人問我，網站製作為什麼都要花好幾個月，甚至半年、一年的時間？是否能在一個月內做出一個多頁式網站？
可以理解企業們期望在短時間內公開新網站，藉此盡早進行後續的推廣與業務，但其實一個完整的全客製化網站，為了避免有重複修改及大幅度調整、更新等問題，每一項步驟都是十分謹慎且必要的。
不論是對企業主或是剛踏入網站製作的新手 Director 而言，都需要事先了解每一步驟，所以今天想要跟大家說明一下，關於客製化網站製作的流程。
註：Web Director 是由日本延伸來台灣的網站總監職位，類似於台灣專案管理及專案企劃工作，Web Director 負責專案的整體走向，以更廣闊的視角帶動專案，需在各種場合擔任溝通、進度掌握以及利益評估的角色，是專案中不可或缺的存在。
Step1. 事前準備與定義
網站製作之前，首先有幾項事前需要確認以及定義的要件。藉由這些前提條件與需求，去決定網站所需要的頁面、功能等方向。
雖然在網站企劃進行的同時，為了不與目的脫節太多，有時候也會回到網站定義的階段，但整體來說盡量不要漏掉事前所需要確認的所有前提條件，避免後續一直回到前面的階段
確定網站目的
個人認為這是網站製作中最重要的一個環節，包含網站的最終目的與目標族群等。
透過目的與使用者輪廓，我們能在網站企劃時思考網站所需要的功能、風格、動線等，達到良好的使用者體驗與網站溝通。
另外，有時候我們也需要事先定義網站的 SEO 策略，需要做到什麼範圍、麵包屑導航（導覽路徑）的設置等等。
決定每項作業的負責人
由於客製化網站較為繁雜，不像套版網站一樣僅需要 1-2 人即可完成，通常一個團隊大約 4-6 人，包含 Director、設計師、前後端工程師，有時候因應需求還會需要文案師、攝影師等。
除了製作團隊的確認以外，企業主跟網站製作公司各別所負責的細項內容也需要確定。比方說文字與產品素材是由企業主提供，或是由製作公司產出。
確定網站各項功能
在網站正式製作前，需要釐清網站的所有必備功能。不論是後臺系統、動態頁面、動畫效果等都會對程式建置與系統開發階段帶來很大的影響，包含困難度以及作業時間，因此需要針對各項功能的必要性去做詳細的定義。
確認環境（主機、網域）
在網站製作前，需要先確認最後的主機環境以及網域要由哪一方申請。主機環境會影響到網站是否能正常運作、網站讀取速度等；而網域若由企業主申請並管理，網站上線前的 DNS 設定則可能要交由企業主執行。
Step2. 網站構成
製作時程表
根據步驟一的每項作業負責人與網站必要功能，製作詳細的作業時間表。通常 Gear8 做的時程表會以「天」為單位。除了每項階段的執行時間以外，也包含企業主所需要的確認天數，為了保留來回溝通的時間，通常會稍微拉長一些。
製作網站地圖與目錄
網站地圖（Sitemap）與目錄紀載了每一個頁面的階層、內容及網域目錄名，上面會註明是否要框架圖、設計、後台功能。粗略的網站地圖在事前網站定義階段時就可以撰寫，但實際開始企劃時，每個頁面包含的內容以及各頁面間的動線、連結等都會在此階段詳細表示。
Step3. 網站框架設計
構成圖繪製的事前會議
Gear8 在正式繪製網站框架圖以前，都會提供 10-20 個參考網站，並和企業主共同討論這些參考網站中可借鏡的元素，或是不希望表現的元素等。此目的是為了避免網站框架圖會反覆修改多次的狀況。
繪製網站框架
網站框架圖（Wireframe）是具體呈現網站的頁面構成圖，包含頁面的資訊配置、排版、大致呈現的方式等，也是 UX 的一個環節。
由於網站設計和一般平面設計不同，並不單只是「美感」而已，需要考慮到使用者易於操作的配置、流暢度高的動線設計且如何和使用者溝通等問題，因此在網站視覺設計前會先製作網站構成圖，以便想像整體頁面的資訊設計與架構。
工具上來說其實並沒有特別規定，即使是單純手繪就可以說是 WF。Gear8 大多是用Figma 繪製。關於 Figma 之後有機會的話可以詳細介紹，是一款簡單又方便操作的UI/UX 設計軟體。
Step4. 網站視覺設計
經過前面種種步驟，總算來到網頁視覺設計（UI Design）的階段了。Gear8 在網站製作上分工較細，團隊中會有專門的設計師，依據 Wireframe 進行設計。為了展現較為精緻視覺呈現，通常會使用 Figma、Illustrator、Photoshop 等軟體。並先從首頁開始設計整體網站的主視覺，待首頁及主視覺確認好之後才會進入下層其他頁面的設計。有時候設計師可能會依照自己的想法，而更動原先的網站構成圖；相反地也有完全依照網站構成圖的情形。
通常企業主在看到網站構成圖後還沒辦法想像整體網站的樣子，但一看到設計檔之後就會有很多想法了。為了避免會不斷反覆修正，Director 需要站在企業主以及企業主的目標族群的立場，先與設計師溝通調整過後，再交由企業主確認。最後，由於最終使用網站的人是目標族群（消費者），有時候也不能因為企業主個人喜好而調整，作為專業的網站設計公司，也適時地需要與企業主溝通。
Step5. 網站程式建構
HTML & CSS
設計都完成之後，就來到了讓網站實際運作的階段了。首先設計出來的圖檔，需要實際在瀏覽器上呈現的話，需要將這些內容以 html 撰寫，並以 CSS 加以設計、裝飾，用 JavaScript、jQuery 來製作有趣的動畫效果。
動態頁面、CMS架設
如果單純只是需要靜態頁面的網站，那 html 頁面確認、檢證並上傳到正式主機後就完成了；但若有需要動態頁面，那就必須要開發、串接後台系統。在後台系統架設時，前端程式跟後端程式需要有密切溝通，而 Director 作為中間的溝通橋樑必須要提出明確且具體的指示。
Step6. 檢證&網站上線
上述內容都完成之後，我們需要實際檢測網站是否能正常運作。在不同的瀏覽器或是不同裝置，特別是現在手機普及的狀況下，是不是畫面有跑版、崩壞的情形，以及後台是否能正常操作。Gear8 通常會請公司團隊（拿著不同裝置的人），一同確認網站。
另外，Gear8 同時會製作網站基本的標題（title）、摘要設定（description）、favicon、OGP 圖像，以及是否需要埋入 Google Analytics 的程式碼等較為細微的作業。若是有後台的網站，會再提供後台操作的指導手冊。
如果上述都沒有問題了，網站會上傳到正式的主機中，也就正式公開囉！
以上，便是整個網站製作的流程，這當中不包含攝影、文案撰寫等素材製作的步驟，由此可知一個客製化網站的作業是能很精細且繁瑣的。當然越謹慎的流程雖然花費的時間較多，但相對地網站品質也會越好。
最後，特別跟想成為網站 Director 的新手們提醒，從最一開始的事前準備到最後網站上線，最重要的都是需要良好的溝通。不論對企業主、設計師、工程師等，只要有共識的話每一項作業都能夠很順利進行。為了達到良好的溝通，Director 自身也需要不斷地增進網站知識喔！
