永豐銀行|打造我的理想退休樹

ibrAin退休新智-打造我的理想退休樹

Cover

【永豐銀行】退休行銷網頁|用插畫與小動畫讓畫面更豐富

打造我的理想退休樹

Image

01 OVERVIEW

案例背景:理想的退休生活藍圖

每個人心中都有一個理想的退休生活藍圖,或許是在海邊每天曬太陽,或許是開文青咖啡廳,也可能是學一門新語言。

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

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

Image
Image

客戶的需求與網站規劃

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

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

1. 繪畫風格設計
2. Popup選單與行動呼籲(CTA)設計
3. 小動畫增加畫面豐富度

02 FEATURES

風格制定

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

與永豐進一步討論後,我們最後選擇了更接近真人比例的繪畫風格,希望藉此讓使用者更有帶入感,帶來對於退休生活的愜意憧憬。進入網站後首先會看到在辛苦種樹的人,代表著正在為了未來耕耘的你含我,陽光和煦、綠草如茵,為完美的退休計畫拉開序幕。

Image
Image

Popup選單設計

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

Image
Image

互動拉霸

比起單純的輸入數字,以拉霸的方式讓使用者輕鬆拖曳外,也增添互動的趣味性,提升使用者模擬試算的意願。

Image

圓弧形區塊分界

在網頁每個區塊的分界線上,特別以圓弧造型做設計,讓整個網站的視覺效果更溫潤柔和,呼應整個網站想帶給使用者的溫暖、清新感受。

Image

03 DESIGN

設計規範 UI GUIDE

色彩計畫

設計團隊在退休行銷網頁整體視覺設計上設定的色調,為強調栽種樹木的主題,因此以藍色與綠色作為網站的主色。

而為搭配插畫所營造的愜意形象,而採用飽和度較低的顏色為主,讓整體顏色不會過於強烈、增添柔和的視覺感受。

Image
Image

介面元素 ELEMENT

符合中老年人的元素設計

採用比一般網頁大1.5倍的文字設計,並加大按鈕及卡片的點擊範圍,讓此網站的TA,也就是45到55歲、有退休計畫的族群,也能不費力的閱讀和操作。

卡片

設計團隊將卡片結合插畫設計,對於每個族群每種型態的更精細描寫,女生16種男生16種,總共32種不同型態的卡片。依據性別、年齡、投入資金,對於個32人的外觀、表情、肢體、背景甚至是手中的植物都有不同的描繪方式,讓每張卡片更有識別度、也讓畫面更豐富有趣。

Image

按鈕與標籤

將網頁中最重要的按鈕結合插畫,一眼就區分主要的按鈕與次要的按鈕、除了吸引使用者點擊外,也讓整體視覺更為活潑、不呆板。

Image

04 Illustration

插畫設計結合小動畫

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

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

Image
Image
Image
Image

05 REVIEW

更多頁面

Image

Simular

如果您喜歡我們的作品

歡迎與我們聯絡取得服務說明