網站架設接案,四個實際接案範例詳解過程

本文將以四個實際網站架設接案為例,詳解接案過程中,實際會執行的流程,以及各式臨時狀況。我會從案件聯繫、確認需求、談價、出設計稿、程式開發、網站佈署一路說明,給有意製作個人網站、活動策展網站、企業官方網站、後台系統,或想知道接案流程的人作為參考。

這是網站接案範例的第二篇文,對本系列有興趣,可以一併看第一篇文《網站設計與前端工程,接案實作四例》,分別是不同案件的詳細過程介紹。

我本身從事網站接案多年,在此篇介紹的四個案件中,兩個是透過朋友轉介紹的案子,另外兩個是與夥伴創業的網站。其中,有的業主完全不熟悉網站,也有和業主方的專業設計師合作經驗,製作過程中碰到的難題與設計方式,有相當大的差異。

本篇介紹的四個接案網站,分別是 Reborn、雅硯、雞籠怪奇、實境解謎遊戲。以下就來一一介紹:

Reborn UI/UX 設計課程官方網站-接案實例

Reborn UI/UX 設計課程官方網站。

我在 2020 年初離開正職工作,剛開始擔任自由工作者時,我在個人臉書頁面向臉友表示自己的新狀態後,當時 Reborn 創辦人之一的一粒,很快聯繫上我。

一粒本身是相當專業的資深設計師,我們是在網路上交流認識。當時他與另一位創辦人剛草創 Reborn,Reborn 一間專門做 UI/UX 設計教學的公司,正在找尋適合工程師合作製作網站。

透過遠端會議談妥合作後,我們開始固定時間開會。團隊中,也慢慢加入其他設計師、插畫師、後端工程師等夥伴。

正式製作網站時,我是以每月收固定費用的方式進行,由於公司本身在做 UI/UX 設計教學,因此對網站設計細節相當注重。團隊為了做出符合公司調性的網站,光在我製作期間,總共就更換過三次設計師。

在最後的完稿中,是一粒親自出馬和我一個個比對設計細節,從桌面至手機版本,每一區塊元素都講求對齊、等寬,以及完美。

Reborn 網站本身,並沒有過於複雜的功能或版型,前端工程的製作速度很快。我們多數時間,都是在針對版型設計與文字細節進行調整。

我們最後實現出來的功能,除了基本版面外,還有會員登入、金流繳費串接等功能,並將網站架設於 AWS 機器上。

整體而言,我很喜歡和他們合作,共同經歷一間新創公司從無到有的完整過程,也和相當專業的設計師合作,完成質感滿分的作品。

歡迎點擊「此處」觀看範例網站 DEMO。

雅硯室內設計官方網站-接案實例

雅硯室內設計官方網站。

我還在新創公司擔任前端工程師時,我一位設計夥伴接到雅硯室內設計公司的網站製作需求,找我一起合作。

雅硯位於台中,業主並沒有太多網站架設的經驗,為了清楚說明網站製作流程,我和夥伴一起搭車下台中一趟,詳細談妥網站需求與報價。

我們確認了頁面數:首頁、關於、聯絡、作品列表、作品介紹等頁,以及需要有簡繁體轉換、表單送出功能,並需要協助購買網域、佈署程式碼,以及定期維護作品更新。

雅硯對網站設計不熟悉,我和夥伴花費長時間溝通,一再確認設計稿。然而在工程製作完第一版後,業主表示不是他內心預設的風格。

我和夥伴討論後,也認為應該再多做確認,才進行工程步驟,自己需要檢討。於是我們決定不額外收費,重新製作新一版設計,最後成品獲得業主滿意評價,順利過關。

製作雅硯網站過程中,有長達一年的空白期,原因是室內設計作品太多,整理不易。雅硯設計師花費好長一段時間才給齊素材,因而耽擱時間。

整體而言,我相當喜歡設計師精心規劃的網站質感,以及雅硯提供的精美圖文與對設計細節的要求,都是成就網站視覺的關鍵。

此外,雅硯付款相當大方,溝通窗口也十分認真。過程中,曾經歷一次的設計大調整,也讓我學到必須確認客戶意見的一課。

歡迎點擊「此處」觀看網站 DEMO。

-雞籠怪奇官方網站-接案實例

雞籠怪奇官方網站 1。
雞籠怪奇官方網站 2。

同樣在我離職後,剛開始擔任自由工作者時,有幾位基隆朋友正好在討論一項新專案,也就是研發一款新遊戲,於是邀請我一起加入。

在我加入團隊自我介紹後,我們才決定要做一款手機版實境解謎遊戲。在開始以後,我們前後兩年共製作兩款遊戲,也因為遊戲內容不同,我們分別製作兩個官方網站。

兩個網站,都是由同一位設計師操刀,設計師本身是以藝術創作工作為主,網站設計較少碰觸。

一般討論網站設計時,通常會使用 Figma 或是 Zeplin 討論,若給業主參考時,則會轉成 PDF 檔案。而這次設計師是以 Wix 製作完成,再交由我以程式製作。

在網站整體風格上,可以感受出一股奇幻感,營造出神秘與都會城市的氛圍,符合我們設定玩家在基隆街上,體驗實境遊戲的調性。

在第二款網站中,有較多的特殊動態效果,增強與使用者互動。兩個網站的主要功能,是以展現遊戲介紹內容為主,並無過多複雜功能。

這是團隊的創業網站,大家各自付出專業技能,最後有盈餘時再平分,而非如往常一般,單個計算網站費用。由於設計不複雜,我花費少量時間即完成網站。

歡迎點擊「此處1」「此處2」觀看前後兩個網站 DEMO。

雞籠怪奇實境解謎遊戲網站-接案實例

雞籠怪奇實境解謎遊戲網站。

承上一段雞籠怪奇網站,團隊製作的第一款實境解謎遊戲,是由我負責開發。

在開始製作遊戲以前,團隊並沒有網站概念,我們花費許多時間討論頁面呈現,光是開場方式就調整了數次。

在遊戲成果上,共有四大關卡,加上開場、終極關卡,內容相當豐富。每一個關卡中,有著不同的解謎遊戲,需要配合道具包,以及在基隆實地觀察,才能解出答案。

關卡中,還會因為選擇答案的不同,而導致提前結束遊戲,無法獲得隱藏劇情與寶物。

在遊戲上,除了有基本的問答外,還有掃描 QRCode 獲取寶物、左右點擊移動遊戲、歷史知識累計考驗等多種遊戲方式。

在遊戲主選單中,還可以掃描道具包進入指定關卡、呈現卡片收集狀態,以及劇情解說,功能多元。

整體而言,這可說是我經歷過最複雜的網站之一。且在團隊不熟悉網站的情況下,更改了無數次的頁面呈現,花費我相當大的精力製作。

歡迎點擊「此處」體驗遊戲 DEMO,建議使用手機開啟。

接案總結

每一次接案,都很期待有新挑戰。從這次的接案分享中,可以看出相較上一篇文,有著十分不一樣的網站開發方式。

網站功能日新月異,除了基本頁面呈現,也漸漸可以製作出複雜動態以及小遊戲。對業主方而言,可以透過網站設計專業,做出比其他同業者更不一樣的品牌網站,讓客戶對你印象深刻。

為了符合業主的新需求,我也花費許多時間持續精進,例如我近期正研究 2D、3D 動態網站的呈現,將在下一個專案中使用,甚至會開始製作小型遊戲專案。

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

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