網站架設接案，四個實際接案範例詳解過程
這是網站接案範例的第二篇文，對本系列有興趣，可以一併看第一篇文《網站設計與前端工程，接案實作四例》，分別是不同案件的詳細過程介紹。
我本身從事網站接案多年，在此篇介紹的四個案件中，兩個是透過朋友轉介紹的案子，另外兩個是與夥伴創業的網站。其中，有的業主完全不熟悉網站，也有和業主方的專業設計師合作經驗，製作過程中碰到的難題與設計方式，有相當大的差異。
本篇介紹的四個接案網站，分別是 Reborn、雅硯、雞籠怪奇、實境解謎遊戲。以下就來一一介紹：
Reborn UI/UX 設計課程官方網站－接案實例
我在 2020 年初離開正職工作，剛開始擔任自由工作者時，我在個人臉書頁面向臉友表示自己的新狀態後，當時 Reborn 創辦人之一的一粒，很快聯繫上我。
一粒本身是相當專業的資深設計師，我們是在網路上交流認識。當時他與另一位創辦人剛草創 Reborn，Reborn 一間專門做 UI/UX 設計教學的公司，正在找尋適合工程師合作製作網站。
透過遠端會議談妥合作後，我們開始固定時間開會。團隊中，也慢慢加入其他設計師、插畫師、後端工程師等夥伴。
正式製作網站時，我是以每月收固定費用的方式進行，由於公司本身在做 UI/UX 設計教學，因此對網站設計細節相當注重。團隊為了做出符合公司調性的網站，光在我製作期間，總共就更換過三次設計師。
在最後的完稿中，是一粒親自出馬和我一個個比對設計細節，從桌面至手機版本，每一區塊元素都講求對齊、等寬，以及完美。
Reborn 網站本身，並沒有過於複雜的功能或版型，前端工程的製作速度很快。我們多數時間，都是在針對版型設計與文字細節進行調整。
我們最後實現出來的功能，除了基本版面外，還有會員登入、金流繳費串接等功能，並將網站架設於 AWS 機器上。
整體而言，我很喜歡和他們合作，共同經歷一間新創公司從無到有的完整過程，也和相當專業的設計師合作，完成質感滿分的作品。
歡迎點擊「此處」觀看範例網站 DEMO。
雅硯室內設計官方網站－接案實例
我還在新創公司擔任前端工程師時，我一位設計夥伴接到雅硯室內設計公司的網站製作需求，找我一起合作。
雅硯位於台中，業主並沒有太多網站架設的經驗，為了清楚說明網站製作流程，我和夥伴一起搭車下台中一趟，詳細談妥網站需求與報價。
我們確認了頁面數：首頁、關於、聯絡、作品列表、作品介紹等頁，以及需要有簡繁體轉換、表單送出功能，並需要協助購買網域、佈署程式碼，以及定期維護作品更新。
雅硯對網站設計不熟悉，我和夥伴花費長時間溝通，一再確認設計稿。然而在工程製作完第一版後，業主表示不是他內心預設的風格。
我和夥伴討論後，也認為應該再多做確認，才進行工程步驟，自己需要檢討。於是我們決定不額外收費，重新製作新一版設計，最後成品獲得業主滿意評價，順利過關。
製作雅硯網站過程中，有長達一年的空白期，原因是室內設計作品太多，整理不易。雅硯設計師花費好長一段時間才給齊素材，因而耽擱時間。
整體而言，我相當喜歡設計師精心規劃的網站質感，以及雅硯提供的精美圖文與對設計細節的要求，都是成就網站視覺的關鍵。
此外，雅硯付款相當大方，溝通窗口也十分認真。過程中，曾經歷一次的設計大調整，也讓我學到必須確認客戶意見的一課。
歡迎點擊「此處」觀看網站 DEMO。
－雞籠怪奇官方網站－接案實例
同樣在我離職後，剛開始擔任自由工作者時，有幾位基隆朋友正好在討論一項新專案，也就是研發一款新遊戲，於是邀請我一起加入。
在我加入團隊自我介紹後，我們才決定要做一款手機版實境解謎遊戲。在開始以後，我們前後兩年共製作兩款遊戲，也因為遊戲內容不同，我們分別製作兩個官方網站。
兩個網站，都是由同一位設計師操刀，設計師本身是以藝術創作工作為主，網站設計較少碰觸。
一般討論網站設計時，通常會使用 Figma 或是 Zeplin 討論，若給業主參考時，則會轉成 PDF 檔案。而這次設計師是以 Wix 製作完成，再交由我以程式製作。
在網站整體風格上，可以感受出一股奇幻感，營造出神秘與都會城市的氛圍，符合我們設定玩家在基隆街上，體驗實境遊戲的調性。
在第二款網站中，有較多的特殊動態效果，增強與使用者互動。兩個網站的主要功能，是以展現遊戲介紹內容為主，並無過多複雜功能。
這是團隊的創業網站，大家各自付出專業技能，最後有盈餘時再平分，而非如往常一般，單個計算網站費用。由於設計不複雜，我花費少量時間即完成網站。
雞籠怪奇實境解謎遊戲網站－接案實例
承上一段雞籠怪奇網站，團隊製作的第一款實境解謎遊戲，是由我負責開發。
在開始製作遊戲以前，團隊並沒有網站概念，我們花費許多時間討論頁面呈現，光是開場方式就調整了數次。
在遊戲成果上，共有四大關卡，加上開場、終極關卡，內容相當豐富。每一個關卡中，有著不同的解謎遊戲，需要配合道具包，以及在基隆實地觀察，才能解出答案。
關卡中，還會因為選擇答案的不同，而導致提前結束遊戲，無法獲得隱藏劇情與寶物。
在遊戲上，除了有基本的問答外，還有掃描 QRCode 獲取寶物、左右點擊移動遊戲、歷史知識累計考驗等多種遊戲方式。
在遊戲主選單中，還可以掃描道具包進入指定關卡、呈現卡片收集狀態，以及劇情解說，功能多元。
整體而言，這可說是我經歷過最複雜的網站之一。且在團隊不熟悉網站的情況下，更改了無數次的頁面呈現，花費我相當大的精力製作。
歡迎點擊「此處」體驗遊戲 DEMO，建議使用手機開啟。
接案總結
每一次接案，都很期待有新挑戰。從這次的接案分享中，可以看出相較上一篇文，有著十分不一樣的網站開發方式。
網站功能日新月異，除了基本頁面呈現，也漸漸可以製作出複雜動態以及小遊戲。對業主方而言，可以透過網站設計專業，做出比其他同業者更不一樣的品牌網站，讓客戶對你印象深刻。
為了符合業主的新需求，我也花費許多時間持續精進，例如我近期正研究 2D、3D 動態網站的呈現，將在下一個專案中使用，甚至會開始製作小型遊戲專案。
從上述四個案例，相信讓你對網站有更多的了解。若你有規劃網站的需求，或想嘗試接案工作，都可以參考以上案例。若有任何進一步想討論，都歡迎「聯絡」我，也歡迎參考我的「網站作品」。