優秀開發技術 ≠ 優秀網站設計 — 淺談網站設計的完整流程
「我們公司的網站開發技術一流，懂最新的HTML5、JQuery、UI Design…我們一定能為你設計出優秀的網站！」不錯，擁有優秀的網站開發技術的確能幫助設計出優秀的網站，但很多網站開發者 (不論是公司、Freelancers或是PM)，都過份集中於開發技術上，忘記了網站設計本來的原意。
一個馬來西亞的罐頭品牌找了一間網站設計公司設計網站，網站設計公司使用了大量的JavaScript / HML5的特效讓網站介面充滿動感，設計非常出色，客戶也歡喜地收貨。網站上線後幾個月，客戶的大老闆打來找網站設計公司的PM，破口大罵！罵什麼？就是網站空有一身特效，卻沒有網站瀏覽者最想看到的「商品目錄」和「銷售點資訊」，網站根本沒有了解市場需求，壓根底兒是個不合格的網站！
上述的例子絕不是一個例外。其實，開發技術只是完整網站設計流程中的一小部分，過份集中開發技術的運用，往往忽略了市場需求和客戶的需要。以下是完整網站設計的流程圖：
圖片來源：http://web-design-packages.com/index.php/how-it-works
步驟一：Strategy 回答「為什麼要設計一個網站？」
先要釐清網站最原始的點子，如「建立一個服裝品牌網站讓使用者瀏覽我們的商品」，然後再進行Market research，了解使用者是否真的有這個需求，沒有的話，就要重新修改點子；確定有需求的話，就要再做Competitor Analysis，了解其他品牌的做法和優點，再「取長補短」，修改點子，如修改為「建立一個服裝品牌網站讓使用者瀏覽我們的商品，並提供詳細商品細節，和能提供網上存貨查詢功能」。
步驟二：Planning 回答「這是一個怎樣的網站？」
釐清網站基本的點子後，就要用「心智圖」、「Sitemap」等工具，規劃出網站大致的模樣，包括網站的功能模組 (Function Modules)，設計風格等。以服裝品牌網站為例，功能模組包括：
步驟三：Build 「開始動手設計及建立網站。」
利用「Sitemap」完成網站規劃後，才可動手及建立網站，包括Frontend Design、HTML Convertion、Scripting和Coding等步驟。等待前台完成和客戶與確定後，再設計CMS系統和建立數據庫。最後，在UTA做Testing及Debugging。這個步驟就是我們一開始提及的「技術開發」。
步驟四：Promote 「告訴別人這個網站誕生了！」
Testing及Debugging後，網站就能正式上線。在世界上，有過億個網站，客戶絕不會主動找你。要讓目標使用者知這網站已正式上線，必須進行一定的Online Promotion。基本的Online Promotion包括SEO、EDM和Shop Stickers；進階一點的包括PPC、Forum、Social Media、Offline Promotion等。
可能你會說：「Hey！我只收錢做技術開發的部分！」不錯，你的確可以只做技術開發的部分，不過你一定不能成為優秀的網站開發者。要成為一間優秀的網頁設計公司、一個稱職的PM和一個出色的Freelancers，不管你們是否負責這個部分，也必須帶領客戶一同了解整個網站設計的流程。
更多有關Frank Frank的Blog： http://frankwong.info
一個馬來西亞的罐頭品牌找了一間網站設計公司設計網站，網站設計公司使用了大量的JavaScript / HML5的特效讓網站介面充滿動感，設計非常出色，客戶也歡喜地收貨。網站上線後幾個月，客戶的大老闆打來找網站設計公司的PM，破口大罵！罵什麼？就是網站空有一身特效，卻沒有網站瀏覽者最想看到的「商品目錄」和「銷售點資訊」，網站根本沒有了解市場需求，壓根底兒是個不合格的網站！
上述的例子絕不是一個例外。其實，開發技術只是完整網站設計流程中的一小部分，過份集中開發技術的運用，往往忽略了市場需求和客戶的需要。以下是完整網站設計的流程圖：
圖片來源：http://web-design-packages.com/index.php/how-it-works
步驟一：Strategy 回答「為什麼要設計一個網站？」
先要釐清網站最原始的點子，如「建立一個服裝品牌網站讓使用者瀏覽我們的商品」，然後再進行Market research，了解使用者是否真的有這個需求，沒有的話，就要重新修改點子；確定有需求的話，就要再做Competitor Analysis，了解其他品牌的做法和優點，再「取長補短」，修改點子，如修改為「建立一個服裝品牌網站讓使用者瀏覽我們的商品，並提供詳細商品細節，和能提供網上存貨查詢功能」。
步驟二：Planning 回答「這是一個怎樣的網站？」
釐清網站基本的點子後，就要用「心智圖」、「Sitemap」等工具，規劃出網站大致的模樣，包括網站的功能模組 (Function Modules)，設計風格等。以服裝品牌網站為例，功能模組包括：
- 可由CMS控制的線上商品目錄
- 與公司存貨系統連結的網上存貨查詢功能
- 基本頁面如「關於我們」
步驟三：Build 「開始動手設計及建立網站。」
利用「Sitemap」完成網站規劃後，才可動手及建立網站，包括Frontend Design、HTML Convertion、Scripting和Coding等步驟。等待前台完成和客戶與確定後，再設計CMS系統和建立數據庫。最後，在UTA做Testing及Debugging。這個步驟就是我們一開始提及的「技術開發」。
步驟四：Promote 「告訴別人這個網站誕生了！」
Testing及Debugging後，網站就能正式上線。在世界上，有過億個網站，客戶絕不會主動找你。要讓目標使用者知這網站已正式上線，必須進行一定的Online Promotion。基本的Online Promotion包括SEO、EDM和Shop Stickers；進階一點的包括PPC、Forum、Social Media、Offline Promotion等。
可能你會說：「Hey！我只收錢做技術開發的部分！」不錯，你的確可以只做技術開發的部分，不過你一定不能成為優秀的網站開發者。要成為一間優秀的網頁設計公司、一個稱職的PM和一個出色的Freelancers，不管你們是否負責這個部分，也必須帶領客戶一同了解整個網站設計的流程。
更多有關Frank Frank的Blog： http://frankwong.info