Work

About

Resume

Brief

Information
Architecture

Style Guide

Final Outcome

Lottie Animation

Embedded Code

CMS Collection

DollarMatter

A personal financial website built by Webflow.

This personal financial website mainly aims to practice my prototyping skills with Webflow. In order to make a comprehensive website with interactive features, I have applied several Webflow functions such as embedded code, CMS, Lottie animation and flexbox.
Individual work
2023/8
2 months

HTML, CSS
Javascript
Webflow CMS
Lottie Animation
Responsive Design
UI Design

The process behind..

Visual Design:

  • Information Architecture
  • Style Guide
  • Visual Outcomes

Prototyping:

  • Website Link
  • Lottie Animation
  • Embedded Code
  • CMS Collection

Information Architecture

The requirement of this course is to build a comprehensive website with at least 7 pages. I chose personal finance as my topic and searched for some reference websites to quickly build the information architecture and the basic functions.

References:

https://www.nerdwallet.com/home/dashboard/home

https://secure.bankofamerica.com

https://www.thebalancemoney.com/budgeting-calculator-5120904

https://mint.intuit.com/overview

Style Guide

I chose a saturated cornflower blue as the brand color. Since blue has been widely associated with responsibility and calmness in many cultures, I hope this color can convey a sense of trustworthiness for this financial website.

Visual Outcomes

Then I finished the visual design in Figma with both mobile and desktop versions.

Project Outcomes

Website Link:

Click here to experience the whole interaction and details of the website

Lottie Animation

I have made 3 lottie animation with After Effects in this website.

Piggy Bank animation

Loading animation

Line Drawing animation

Embedded Code

I have built the budget calculator with custom codes. I used html, CSS and Javascript.

CMS Collections

I built two CMS template pages in this website. One is the budget page, and the other one is the insight page.