優秀開發技術 ≠ 優秀網站設計 — 淺談網站設計的完整流程

「我們公司的網站開發技術一流,懂最新的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),設計風格等。以服裝品牌網站為例,功能模組包括:
  1. 可由CMS控制的線上商品目錄
  2. 與公司存貨系統連結的網上存貨查詢功能
  3. 基本頁面如「關於我們」
而設計方面,則以簡潔的白黑色為主。



步驟三: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

如果喜歡我們的文章,請即分享到︰