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

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

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

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

打造我的理想退休樹

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

介面元素

符合中老年人的元素設計

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

卡片

設計團隊將卡片結合插畫,對總共32張卡片進行系刻畫。依據性別、年齡、投入資金、表情、肢體、背景甚至手中植物皆有不同的描繪方式,讓每張卡片更豐富、更有識別度。

Image

按鈕與標籤

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

Image

04

Illustration

插畫設計結合小動畫

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



答案就是畫面精緻、細節滿分的小動畫。

面對動畫越多網站檔案越大的問題,我們的設計師選擇用Lottie Player,將AE動畫匯出成json檔,檔案更小,效果更好!

Image
Image
Image
Image

05

REVIEW

更多頁面

Image

Simular

如果您喜歡我們的作品

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