網站設計與前端工程,接案實作四例

這篇文,將以四個網站接案為例,介紹接案過程會碰到的實際狀況與流程。包含:聯繫、確認需求、談價、出設計稿、程式開發、網站佈署。給有意製作個人網站、活動策展網站、企業官方網站、後台系統,或想知道接案流程的人作為參考。

我在多年網站接案工作中,從各式管道獲取案源,每位業主都有不同需求與特殊狀況。例如有人會要求特殊動態效果、複雜圖表呈現,或是常見的多國語言切換、明暗度切換,我也曾接手國外公司購買的網域,需要用印尼語溝通。從這些各式業主中,我自己也新學不少新技術,擴展自己接案技能的邊界。

這篇文中,將舉出四個實際網站接案例子,他們分別來自不同管道,有一件是陌生聯繫,兩件是不同時期的朋友介紹,最後一件是曾經合作過的公司再次合作。分別是 Sunmoon、PT ALPHA、小王子、慾望劇團。

接著就來一一介紹:

Sunmoon 信用預測分析官方網站-接案實例

Sunmoon 信用預測分析官方網站。

我從 2020 年開始,經營個人品牌「西打藍」,擁有自己的部落格、粉專,最近也新開 IG。除了常常收到自由工作者、接案有關詢問來信,也有不少人找我合作接案。Sunmoon 就是其中一例。以下稱 Sunmoon 創辦人為阿明。

阿明從部落格文章中找到我後,從「這裡」聯繫我,他需要一位網站工程師製作圖表類型的客製化網站。他已經請一位 UI/UX 設計師規劃網站視覺與設計,只需要我來負責寫程式,完成網站前端工程任務。

在網站功能上,除了有基本 RWD,還有多樣圖表顯示,以及明暗度切換。其中較複雜的功能,是切換明暗度後,圖表顏色也要相對應改變。並當取得數據的大小不同,圖表線條配色也不一樣,總計約有 4 組顏色變化,共 8 種顏色。

我和阿明的溝通方式,全程都是透過 Email 和 Google Meet,阿明是相當要求設計細節的業主,我經常需要修改設計細節。我們總計花費 2-3 個月時間完成網站,阿明也相當迅速地付款。

完成委託後,阿明接著請我找後端工程師開發 API,要串接至網站上。我找了前同事協助,前期讓他們倆自己溝通,等 API 完成換我串接時,我再加入溝通。想不到他們倆的溝通過程,對工作內容有誤會,一度將要解除合作。我趕緊和他們開會,釐清誤會後,才又重新開始進行。最後也順利完成 API 串接任務。

整體而言,我很喜歡這次的委託案,原因之一是網站設計好看、業主好溝通、付款乾脆。有趣的是,我們重頭到尾沒碰過面,全靠線上溝通完成客製化網站以及 API 串接。有接 API 的網站不便公開,歡迎點擊「此處」觀看網站 DEMO。

PT ALPHA 國際貿易官方網站-接案實例

PT ALPHA 國際貿易官方網站。

自由接案後,多數案子來源,都是朋友合作與轉介紹。PT ALPHA 官方網站即是一例。創辦人 Mike,是我前同事父親的其中一間貿易公司負責人,公司需要製作英、印尼文雙語網站,產品是銅線、光纖、WIFI 線材。

由於他們沒有網站專責人員,所以從網站設計、工程開發、佈署,皆由我包辦。Mike 是主要與我對接的人,溝通過程中,我沒有讓 UI/UX 設計師參與討論,而是由我負責溝通,再將需求傳遞給設計師。我們的工作順序如下:

確認網站需求、架構、設計風格 > 報價付訂金 > 設計師製作第一版 > 業主確認設計 > 來回修改設計 > 進入網站工程 > 業主最後確認網站 > 佈署上線

過程中,Mike 額外提出兩個設計需求:一個是調整、美化線材照片,另一個是型錄設計委託。我將前者交由合作設計師處理,後者的時程太趕,我建議 Mike 以當前版本製作就好,重新設計耗時費力,有可能趕不上時程。

我們最終約花費三個月時間完成網站,只差最後的佈署工作。Mike 的公司位於印尼,他在聯繫我之前,已經透過印尼網域商購買網址。為了綁定印尼網域商的網址,我花了不少時間和印尼網域商的客服員溝通,最後順利準時上線。

我和 Mike 同樣從頭到尾沒碰過面,都是用 Line 和語音對話溝通。Mike 付款也非常迅速。在網站製作上,除了選圖上多花費一些時間,其他方面都很順利,甚至 Mike 還委託我,明年幫他找設計師製作新型錄。歡迎點擊「此處」觀看網站 DEMO。

小王子策展網站-接案實例

小王子策展網站。

我還在新創公司擔任正職時,有位朋友在集資公司上班,曾發案給我做一款一頁式募資網站。而這回是集資公司第二回發案給我,需要我和一位 UI/UX 設計師製作小王子策展網站。

當時,我常配合的設計師正在幫我做另一件案子,於是他推薦我另一位設計師協助。這是一個複雜網站案,在溝通群組中,除了有集資公司的窗口,也有小王子策展團隊的 PM、策展人。雖然是件急案,好在大家非常好溝通,我們前期進展相當順利。

策展網站的特殊,在於期限。我和設計師除了要在開展前完成網站,還需要維護網站 4 個月,直到展期結束網站關閉。在網站設計完成後,小王子需要經過送審,讓擁有版權的法國人審查,審查設計上是否符合小王子品牌形象。確認過審後,我才可以往下製作網站。

小王子網站中,有相當多動態效果,例如進場後,小王子會從左上角緩緩移入,配合星空背景與月球旋轉,營造氛圍,其他還有輪播、翻頁等效果。同時,這也是我第一次製作 Mobile first 網站,也就是手機版優先的網站。網站中,我們也埋了不少追蹤碼,密集觀察流量與行銷的狀況。

整體而言,這是我相當喜歡的案子,不但能當網站作品,動態方面也設計得有趣,並且有團隊共同完成大案子的參與感,溝通上也相當順暢。花費較多時間的部分,是審核過程中來回間的修改。網站上線後,策展人為了加強行銷效果,接著還會製作有趣的小網站,由於尚未公開,我就不在這裡破梗。歡迎點擊「此處」觀看網站 DEMO。

慾望劇團官方網站-接案實例

慾望劇團官方網站。

我本身是基隆人,正和基隆夥伴創辦 「雞籠怪奇」,產品是一款實境解謎遊戲。我們共有十個人,分別來自各個領域,其中幾位是來自「慾望劇團」,他們剛好要製作新的官方網站,就直接找我協助。

他們的經費有限,於是我們不聘請設計師規劃,而由我們自己設計網站,再交由我來製作。主要設計者,是劇團的專案執行-小哈,他以 PPT 作為設計稿來討論版型,我則找來網站參考範例,一同規劃。

這次的網站,我們花費超過半年時間製作,主因是劇團的圖文素材較多,需要時間收集,我在中間有好幾個月的空窗期。直到素材整理到位,網站製作就相當迅速。小哈設計的網站風格相當可愛,有別於一般常規網站的整齊元素,多了許多圓角與鮮豔用色。

整體而言,劇團網站製作相當單純輕鬆,小哈本身就是我朋友,溝通上不是問題。唯一較花時間的,是整理網站中的圖文素材。歡迎點擊「此處」觀看網站 DEMO。

網站接案總結

這四個案子,我都做得很開心:Sunmoon、小王子網站具有挑戰性、幫劇團朋友製作網站有成就感、PT ALPHA 網站要和印尼人溝通網域,也是一種新體驗。有趣的是,這四個案子配合的設計師都不一樣,可以看出四種不同設計風格的差異。

四個網站的業主,重視的地方也很不同:

Sunmoon 業主重視設計的細節,他會很仔細要求我修改某個網站小元素;

小王子業主則在意美感與質感,特別在意網站呈現效果;

PT ALPHA 則注重產品呈現,要求突出產品質感;

劇團網站同樣重視作品呈現,在圖文選用上花費較多心力。

接案者如我,需要清楚業主在意的重點,以此來規劃網站,這也是客製化網站的重要工作。因此多數時候,是由我親自溝通需求,再交由夥伴負責執行。近期,我也在慢慢練習,減少自己的溝通工作,在適當時間點讓夥伴參與討論。

從上述四個案例,相信讓你對網站有更多的了解。若你有規劃網站的需求,或想嘗試接案工作,都可以參考以上案例。若有任何進一步想討論,都歡迎「聯絡」我,也歡迎參考我的「網站作品」

siddharam
Siddharam
西打藍
寫程式的文字人,
期待每一次火花。
西打藍 Siddharam © All Rights Reserved.