
目前 ES 配合的客戶,都是本身很喜歡我們的設計作品與特效,也常遇到一開始尋案的客戶想了解我們使用的特效技術(這篇會再請我們技術工程師生出來和大家聊聊~)和溝通流程,就讓大家來了解 ES 是如何在前期規劃中和客戶溝通「動態特效」的呢?
1. 創意發想的可視化會議
在功能架構、線稿規劃階段都和客戶達到共識後,ES 團隊會在由客戶提供的品牌資料,了解品牌核心價值後,開始進行關鍵字發想。
我們團隊常用的發想工具是 miro, 團隊可以共開一個 board 並在這區塊內共同編輯,腦洞大開,腦力激盪,創意聯想遊戲,由某個人的分支點想到另一個分支點,就這樣一直延續下去,這部分的工作階段 ES 就會開個約 2-3 次的內部會議,彼此交換意見,分享發想脈絡,和客戶的品牌價值有什麼關聯?
在這階段,團隊成員也會找到可視化的案例搭配說明,不論是平面視覺、看過的動態特效、一般的 motion graphic 都可以。
舉個我們做過的案例:
BOLON 波龍藝術是瑞典最大的編織地板代理商,整個網站使用方塊撲滿的動態特效貫穿,就是當時在做關鍵字發想時,由幾何圖形、編織、切割、拼圖、組合延伸出來的結果。
2. 保持耐心的共識會議
在內部會議確認後,ES 會製作一份完整的規劃提案和客戶進行提案討論,提案內容有:品牌核心確認、競品分析、關鍵字發想過程、網站風格/體驗提案、配色、品牌延伸運用等,內容會視不同客戶需求而有所調整。
在網站體驗的部分,會結合上一步驟 ES 所討論出的關鍵字,延伸出 2-3 種體驗方向,也會開找到的案例搭配說明讓客戶理解,有時我們自己發想的動態是市場上比較少人做的,這時我們也會做類似分鏡圖的動態示意讓客戶更能知道我們要表達的動法。尤其是在做有趣的3D特效網站時,更需要用分鏡圖搭配範例討論。
3. 視覺稿設計
客戶在給我們方向結論後,ES 會依照客戶的回饋與想法設計 2-3 款的首頁視覺稿,在設計的過程中,團隊成員會一直討論要如何結合視覺與動態、使用者體驗三方都兼顧的方式。
完成後再和客戶提案,ES 使用的是 figma 製作設計稿,我們會搭配動態案例效果和客戶講解區塊的動法,以及主要的動態設計。
選定首頁主視覺後,將會延伸風格到全部頁面的視覺稿。
4. 確認後進行開發
在所有頁面都和客戶進行確認視覺的動態,元件、設計之後,ES 將會開始進行程式開發階段,在這階段之前,我們會請客戶再三確認每個細節都無誤。
一旦開始開發,要修改與調整就是大工程了。 我們常比喻客製化網站就像是蓋一棟自己喜歡的房子,蓋好以後要改結構,那就是必須得砍掉重練的大事了….
特殊案例
ES 也有遇過客戶已經有 UI 設計稿,需要我們做前端視覺特效技術寫程式,像這樣的配合流程就跟前面提到的不大一樣。
我們拿到客戶的 UI 設計稿後,會先理解客戶提出的功能需求,以及針對 UI 細節與 UX 體驗上調整,這階段我們會融入雙方的設計意見總和,會議會進行個 2-3 次後,才會到下一階段:「針對每頁的設計做動態的建議,與案例整理討論。」
有些客戶在動態上有很多想法,也會很主動地提出與 ES 團隊討論,看哪些動態特效要怎麼做比較適合設計的風格。都確認無誤後,才會進入到開發階段。
專案時程
ES 會花比較長的時間在前期規劃溝通,即使是已經有了設計稿的客戶也是,因為少了任何一個步驟都會影響到接下來每個階段的工作流暢度,因此 ES 的專案時程,基本上都要抓3-6個月左右,視專案大小程度而有不同的時程規劃。當然,更大的專案會分階段進行完成時間,也有做了一年還在進行的專案。
結論
動態特效需要反覆多次有耐心的會議溝通,堅持溝通也是非常重要的一點!互相傾聽想法與回饋,才會有完美的成品。