什麼是創意開發?
創意開發介於設計與前端工程之間。一般的網站開發關心的是頁面能否正常運作、載入是否快速。創意開發還會追問:互動本身是否在傳達訊息,例如以轉場呈現兩種狀態之間的關係、以捲動序列依正確順序揭示產品,或以 shader 賦予品牌專屬的質感。
這一切都是用程式碼寫出來的,而不是用現成範本拼湊:包括動畫時間軸、捲動與游標邏輯、Three.js 或自訂 WebGL 場景,以及讓這些效果在一般手機上也能穩定運作的備援方案。如果你想要 Awwwards 風格的網站,這就是對應的服務;不過我們是為你的訪客而設計,而不是為評審,也絕不承諾得獎。
創意開發專案包含哪些內容
提案中會載明哪些交付項目在範圍內、各項素材由誰提供,以及每項如何驗收。你可以提供自己的設計師或其他工作室已核定的設計稿,也可以請 Dardo 一併負責設計與開發。
- 互動概念與原型,在正式開發前先回答高風險的問題
- 捲動與游標互動,並提供對應的觸控與鍵盤操作
- 動態系統:將時間、緩動與轉場統一運用於整個網站,而非零散的一次性效果
- 效能預算,以及針對減少動態、網路緩慢和不支援 WebGL 的裝置所設計的備援方案
- 響應式實作,並在你的受眾實際使用的手機與瀏覽器上測試
何時適合用動態效果,何時其他服務更合適
當互動能釐清產品、展示系統,或賦予品牌令人難忘的節奏時,創意開發才能發揮效果。我們會先界定這項任務,並以靜態畫格為序列繪製分鏡。如果沒有動態就說不通這個故事,動畫也救不了它。
如果訪客需要旋轉物件或在空間中移動,我們的互動式 3D 網站服務更合適。如果你需要的是清晰、紮實且動態克制的網站,請從客製化網頁設計開始。單一活動優惠通常適合做成登陸頁。
專案如何進行:先做出一個可運作的切片
在估算整體體驗之前,我們會先做一個具代表性的切片:一個使用真實內容的真實場景、其靜態備援版本與主要行動,並在目標螢幕尺寸下呈現。它能及早回答代價高昂的問題:這個構想不用說明也看得懂嗎?在手機上能運作嗎?素材載入緩慢時會怎樣?使用者不必等效果跑完,也能完成主要行動嗎?
切片會附上一份書面驗收紀錄,載明雙方約定的裝置、素材大小、鍵盤與觸控狀態、減少動態的行為,以及尚待處理的風險。完整提案隨後會將素材製作、實作、整合、相容性檢查與支援分列為各自的項目,方便你比較。
效能、無障礙與減少動態
我們會為初始素材、渲染工作與互動延遲設定預算,並以具代表性的裝置而非桌機展示為準,瞄準 Google 的 Core Web Vitals 門檻(最大內容繪製在 2.5 秒內、互動至下一次繪製在 200 毫秒內、版面配置位移 0.1 以下)。標題、文案與連結一律先以 HTML 呈現,因此內容絕不依賴效果是否執行。
開啟減少動態後,訪客會看到同一個故事的完整版本:視差與鏡頭運動會改為切換或由使用者控制的步驟。懸停效果有對應的觸控與鍵盤操作,焦點也始終清晰可見。分析數據可以顯示人們是否完成了行動,但無法證明是動畫帶來了銷售。
看得見的作品:Hyper 與 Janus Observatory
Hyper 是 Dardo 為一個 AI 客戶洞察概念所設計的產品故事。動態將客戶訊號連結到整合後的客戶輪廓,再將該輪廓連結到建議的優惠,讓每一次轉場都在說明意義的轉變。這是一個概念作品:其互動原型採用 Next.js 介面,搭配 Python FastAPI 原型,以合成範例運行,我們不宣稱任何轉換或客戶成果。
Janus Observatory 是與 Blue Marble Space 共同開發的研究體驗:包含電影感的開場、呈現十種可能未來的圖集,以及用來比較這些未來的觀測台。標籤與說明置於 3D 層之外,整個專案並受到套件大小預算、瀏覽器 QA,以及針對視覺回歸的發布檢查所規範。它展示的是互動內容的交付能力,而非客戶的商業成果。
哪些因素會影響創意網站的費用?
創意專案的報價取決於獨立場景與序列的數量、是否需要製作插畫、3D 或影片素材、設計是否已經核定、需支援的裝置、CMS 與整合工作,以及上線後的支援。詢問表單會請你選擇預算區間,從 5,000 美元以下到 60,000 美元以上,讓提案能據此調整範圍。
位於波哥大的資深工作室,配合美國工作時間
Dardo 是位於哥倫比亞波哥大的三人團隊,由創辦人 Nicolás Cerón 領軍,可使用英文或西班牙文溝通。波哥大採用 UTC−5,與美國東部及中部時間的工作時段相同,因此美國團隊能擁有一個可即時審閱、而非隔夜才回覆的近岸合作夥伴。我們同時與設計工作室和企業內部的上線團隊合作,提案中會載明審閱負責人、會議重疊時段、交接語言,以及程式碼儲存庫的所有權歸屬。
選擇前的常見疑問
創意開發工程師負責做什麼?
創意開發工程師是專精於網站體驗層的前端工程師,負責動態效果、捲動與游標互動、WebGL 和 shader。工作重點是讓這些效果真正傳達訊息,同時確保頁面載入快速、能在手機上運作,並尊重無障礙設定。在 Dardo,設計與開發由同一個小團隊負責,因此創意發想與實作會一起審視。
動態或互動式網站的費用是多少?
費用取決於工作內容:獨立場景的數量、需要製作的插畫、3D 或影片素材、是否已有設計稿,以及需要支援的裝置。我們會在評估一個具代表性的切片範圍後報價,因此價格反映的是你的需求,而不是固定方案。
動畫會影響 SEO 或網頁速度嗎?
動畫本身不會,載入方式不佳才會。搜尋引擎讀取的是 HTML,因此標題、文案與連結必須在任何 canvas 或動畫腳本執行之前就已存在。較重的程式碼應在首批內容出現後再載入,版面要預留空間以免畫面跳動,動畫也不應阻擋使用者輸入。上線前,我們會在具代表性的手機上檢查 Core Web Vitals,但不保證搜尋排名。
動態網站能符合無障礙標準嗎?
可以,前提是在設計動態時就一併考量無障礙,而不是事後補救。WCAG 要求,對於自動移動超過五秒的內容,必須提供暫停、停止或隱藏的方式,並建議讓使用者能關閉由互動觸發的動態效果。我們會遵循減少動態效果的設定、保持焦點清晰可見,並確保沒有任何內容必須等動畫播完才能看到。
創意開發專案需要多長時間?
沒有固定的時程,這取決於場景數量、素材製作與審閱回合。我們會在評估第一個可運作的切片之後,於提案中訂定日期,這也能提早發現容易拖延時程的風險,例如素材過大,或需要為觸控重新思考的互動。如果有固定的上線日期,請一開始就告訴我們。
我該選擇創意開發,還是互動式 3D 網站?
如果是在一般版型的頁面上,以動態、捲動與轉場來推動故事,請選擇創意開發。如果訪客需要以三維方式探索某個物件、場所或系統,則選擇互動式 3D 網站。許多專案會兩者並用。關鍵在於:訪客的操作是否會改變他們所學到的內容,還是節奏安排得宜的連續呈現就能說明得更好。
