MENU

大家好,我是Gear8台灣的Web Director – Ann。
常常會遇到很多人問我,網站製作為什麼都要花好幾個月,甚至半年、一年的時間?是否能在一個月內做出一個多頁式網站?

可以理解企業們期望在短時間內公開新網站,藉此盡早進行後續的推廣與業務,但其實一個完整的全客製化網站,為了避免有重複修改及大幅度調整、更新等問題,每一項步驟都是十分謹慎且必要的。

不論是對企業主或是剛踏入網站製作的新手Director(企劃、PM)而言,都需要事先了解每一步驟,所以今天想要跟大家說明一下,關於客製化網站製作的流程。

 

 

Step1. 事前準備與定義

網站製作之前,首先有幾項事前需要確認以及定義的要件。藉由這些前提條件與需求,去決定網站所需要的頁面、功能等方向。
雖然在網站企劃進行的同時,為了不與目的脫節太多,有時候也會回到網站定義的階段,但整體來說盡量不要漏掉事前所需要確認的所有前提條件,避免後續一直回到前面的階段

確定網站目的

個人認為這是網站製作中最重要的一個環節,包含網站的最終目的與目標族群等。
透過目的與使用者輪廓,我們能在網站企劃時思考網站所需要的功能、風格、動線等,達到良好的使用者體驗與網站溝通。
另外,有時候我們也需要事先定義網站的SEO策略,需要做到什麼範圍、麵包屑導航(導覽路徑)的設置等等。

決定每項作業的負責人

由於客製化網站較為繁雜,不像套版網站一樣僅需要1-2人即可完成,通常一個團隊大約4-6人,包含Director、設計師、前後端工程師,有時候因應需求還會需要文案師、攝影師等。
除了製作團隊的確認以外,企業主跟網站製作公司各別所負責的細項內容也需要確定。比方說文字與產品素材是由企業主提供,或是由製作公司產出。

確定網站各項功能

在網站正式製作前,需要釐清網站的所有必備功能。不論是後臺系統、動態頁面、動畫效果等都會對程式建置與系統開發階段帶來很大的影響,包含困難度以及作業時間,因此需要針對各項功能的必要性去做詳細的定義。

確認環境(主機、網域)

在網站製作前,需要先確認最後的主機環境以及網域要由哪一方申請。主機環境會影響到網站是否能正常運作、網站讀取速度等;而網域若由企業主申請並管理,網站上線前的DNS設定則可能要交由企業主執行。

 

Step2. 網站構成

製作時程表

根據步驟一的每項作業負責人與網站必要功能,製作詳細的作業時間表。通常Gear8做的時程表會以「天」為單位。除了每項階段的執行時間以外,也包含企業主所需要的確認天數,為了保留來回溝通的時間,通常會稍微拉長一些。

製作網站地圖與目錄

網站地圖(Sitemap)與目錄紀載了每一個頁面的階層、內容及網域目錄名,上面會註明是否要框架圖、設計、後台功能。粗略的網站地圖在事前網站定義階段時就可以撰寫,但實際開始企劃時,每個頁面包含的內容以及各頁面間的動線、連結等都會在此階段詳細表示。

 

Step3. 網站框架設計

構成圖繪製的事前會議

Gear8在正式繪製網站框架圖以前,都會提供10-20個參考網站,並和企業主共同討論這些參考網站中可借鏡的元素,或是不希望表現的元素等。此目的是為了避免網站框架圖會反覆修改多次的狀況。

 

繪製網站框架

網站框架圖(Wireframe)是具體呈現網站的頁面構成圖,包含頁面的資訊配置、排版、大致呈現的方式等,也是UX的一個環節。
由於網站設計和一般平面設計不同,並不單只是「美感」而已,需要考慮到使用者易於操作的配置、流暢度高的動線設計且如何和使用者溝通等問題,因此在網站視覺設計前會先製作網站構成圖,以便想像整體頁面的資訊設計與架構。
工具上來說其實並沒有特別規定,即使是單純手繪就可以說是WF。Gear8大多是用Adobe XD的軟體繪製。關於Adobe XD之後有機會的話可以詳細介紹,是一款簡單又方便操作的UI/UX設計軟體。

 

Step4. 網站視覺設計

經過前面種種步驟,總算來到網頁視覺設計(UI Design)的階段了。Gear8在網站製作上分工較細,團隊中會有專門的設計師,依據Wireframe進行設計。為了展現較為精緻視覺呈現,通常會使用Illustrator、Photoshop等軟體。並先從首頁開始設計整體網站的主視覺,待首頁及主視覺確認好之後才會進入下層其他頁面的設計。有時候設計師可能會依照自己的想法,而更動原先的網站構成圖;相反地也有完全依照網站構成圖的情形。

通常企業主在看到網站構成圖後還沒辦法想像整體網站的樣子,但一看到設計檔之後就會有很多想法了。為了避免會不斷反覆修正,Director需要站在企業主以及企業主的目標族群的立場,先與設計師溝通調整過後,再交由企業主確認。最後,由於最終使用網站的人是目標族群(消費者),有時候也不能因為企業主個人喜好而調整,作為專業的網站設計公司,也適時地需要與企業主溝通。

 

Step5. 網站程式建構

HTML & CSS

設計都完成之後,就來到了讓網站實際運作的階段了。首先設計出來的圖檔,需要實際在瀏覽器上呈現的話,需要將這些內容以html撰寫,並以CSS加以設計、裝飾,用JavaScript、jQuery來製作有趣的動畫效果。

動態頁面、CMS架設

如果單純只是需要靜態頁面的網站,那html頁面確認、檢證並上傳到正式主機後就完成了;但若有需要動態頁面,那就必須要開發、串接後台系統。在後台系統架設時,前端程式跟後端程式需要有密切溝通,而Director作為中間的溝通橋樑必須要提出明確且具體的指示。

 

Step6. 檢證&網站上線

上述內容都完成之後,我們需要實際檢測網站是否能正常運作。在不同的瀏覽器或是不同裝置,特別是現在手機普及的狀況下,是不是畫面有跑版、崩壞的情形,以及後台是否能正常操作。Gear8通常會請公司團隊(拿著不同裝置的人),一同確認網站。

另外,Gear8同時會製作網站基本的標題(title)、摘要設定(description)、favicon、OGP圖像,以及是否需要埋入Google Analytics的程式碼等較為細微的作業。若是有後台的網站,會再提供後台操作的指導手冊。

如果上述都沒有問題了,網站會上傳到正式的主機中,也就正式公開囉!

 

***

 

以上,便是整個網站製作的流程,這當中不包含攝影、文案撰寫等素材製作的步驟,由此可知一個客製化網站的作業是能很精細且繁瑣的。當然越謹慎的流程雖然花費的時間較多,但相對地網站品質也會越好。

最後,特別跟想成為網站Director(企劃、PM)的新手們提醒,從最一開始的事前準備到最後網站上線,最重要的都是需要良好的溝通。不論對企業主、設計師、工程師等,只要有共識的話每一項作業都能夠很順利進行。為了達到良好的溝通,Director自身也需要不斷地增進網站知識喔!