ibrAin為永豐銀行的金融商品，主打方便的自動計算系統，小額定存也能輕鬆投資全球，可設定退休、旅遊、購屋、子女教育金等，為不同目的規劃投資計畫。

本次網站主題「打造我的理想退休樹」，為ibrAin的退休規劃行銷網頁，以樹為主軸，表達資本的累積就像種樹一樣，從年輕就開始準備，為自己打造專屬退休樹。

客戶的需求與網站規劃

此行銷網頁TA瞄準45到55歲，有退休計畫的族群。

風格上，希望顏色清新，不需要太過活潑，以Slogan的「打造我的理想退休樹」出發，運用綠色、植物、栽種等意象，打造親民、安穩、循序漸進的正面形象，目標是靠一頁式網站做產品介紹。

討論的過程

本次專案是為已經存在的金融商品制定，金融商品因牽涉個人資產與法律，許多用詞、表達方式都須經過法遵人員或上級機關核可，因此，比文字的變化，設計師更能在視覺上有所發揮，於是此次專案的視覺風格前後共出現了5個版本。

專案討論之初，我們的第一個提案是3D風格。

之所出現這個畫風提案，是因為做了市場調查後，發現彼時的金融商品市場，以3D畫風作為主視覺的案例並不多見，如果走3D風格，有更大的機會能被消費者記住。

除3D風格外，2D繪畫風格也先後製作了三個不同的版本。

由偏平面、美式的風格到更加比例、更加真實、偏日系的風格，我們的設計師試圖以不同的畫風，拼造出我們認為適合的風格，讓客戶有機會看到這個網站的各種可能。

最後我們決定的風格

與永豐進一步討論後，我們最後選擇了更接近真人比例的繪畫風格，希望藉此讓使用者更有帶入感，帶來對於退休生活的愜意憧憬。

進入網站後首先會看到在辛苦種樹的人，代表著正在為了未來耕耘的你和我，陽光和煦、綠草如茵，為完美的退休計畫拉開序幕。

接在這之後的是三張卡片，分別標示出退休計可能會遭遇的阻因，再來以背景結實累累的大樹提示有種樹才有果實。這棵大樹的設計，是以芒果樹為靈感，偷偷置入台灣的美味芒果！

接著，造訪者可以點按「立即開始打造」，填寫簡單的Popup，量身定制自己的退休計畫，或選擇退休時期望的生活方式，如穩穩過、順順過、好好過或爽爽過，就可以直接看到投資模擬報表。

最後一段則是ibrAin的三大特點展示，以及行動呼籲（CTA），還有經融商品必不可少的投資警語。

其中，我們的設計師花了許多時間在製作Popup的選單，想以井然有序卻輕鬆的方式，誘使造訪者想把popup點開來滑滑看。男生與女的icon，在各個階段的穿著打扮與表情、動作都有經過審慎地構圖與調整，讓人感受到設計師的巧思與用心。

小動畫增加畫面豐富度

說到增加畫面豐富度，基本技巧有許多，例如處理細節、使用跳躍色彩或圖案塞滿版等，但如果想要畫面同時保持乾淨又豐富該怎麼做呢？

在這個專案中我們的設計師選擇使用讓畫面精緻、細節滿分的小動畫，通常而言，動畫越多網站檔案越大，對小銀幕及低網速的裝置相對不友善，為此，我們選擇用Lottie Player（轉檔插件），將AE動畫匯出成json檔，直接用在網頁裡面，比起png或gif，檔案更小，效果更好！

網站有多動畫需求或是複雜動畫需求的網站主，可以到Lottie官方網站逛逛喔！

同場加映：設計師特別推薦小彩蛋

在原版Wireframe中，有對於每個族群每種型態的更精細描寫，是設計師的嘔心瀝血之作，女生16種男生16種，總共32種不同型態的卡片。

設計師依據性別、年齡、投入資金，對於個32人的外觀、表情、肢體、背景甚至是手中的植物都有不同的描繪方式。雖然最終無緣收錄於正式網站，但我想在這邊以收錄小彩蛋方式，給設計師的辛勞一個舞台，感謝辛苦的設計師！

結語

每個看似簡單的網站，都代表著網站的背後，無數提案、修改、溝通的過程，不僅僅是插畫，文字、版面也可能經歷數次修正，Practice Makes Perfect！有練習才有結果，如果覺得很累或是嫌麻煩，你也可以選擇跟我們一起練習，一起結果！