CodepenDribbbleGithubInstagramTwitter

Charles Peters

Designer / Developer

Withdraws

Withdraws is an application that allows users to visualize their budgets & make understanding your expenditures easy.

Withdraws is a web app built with Ember & Firebase. Withdraws is an application that allows users to visualize their budgets & make understanding your expenditures easy. The goals of the app are simple: see your budget, add & manage expenses and view spending. It makes use of Chartist.js and Torii. Checkout the styleguide.

Need

I built this app mostly because my wife who does most of our budgeting had a hard time explaining the numbers in a spreadsheet. So we needed a tool that could emphasize the really important numbers in a budget and could visualize the information.

Withdraws Color Circles
For this project I went with a color scheme of bright colors to attract the eye and fading scale of color to imply relationship between elements.
Withdraws Submission Form Mockup
Mockup of the Expense Submission form.

Learning Ember.js

Spending some real time with Ember.js was something I really wanted to do for a long time. I've spent hours in aimless tutorials understanding Ember.js, but never really started to grasp these concepts until I had an actual purpose behind what I was building.

Withdraws makes use of Firebase, Chartist.js and Torii. I figured out how to hand roll my own form validation. I had a lot of help from Taras Mankovski and the Ember Sherpa team who walked me through a lot of my questions with routing and they encouraged me on how to breakdown issues I encountered.

Designing for Data

Building off the initial need that I had when I built this app. I focused on a central guiding principle: numbers should be easy to see/scan at a glance. All the key numbers are set in in a medium weight Sentinel which adds good contrast, plus are larger and in the list view are spaced to show relation but also with enough breathing room to be able discern.

Checkout the styleguide for more of a smaller scale visual breakdown of a few the components and basic design Elements.

Withdraws Numbers
Sentinel is a great typeface. Slab-serifs are a great choice for the numbers in this app because they have great display qualities but still have great legibilities.