profjilo.blogg.se - Personal budget budget pie chart

PERSONAL BUDGET BUDGET PIE CHART HOW TO
PERSONAL BUDGET BUDGET PIE CHART TV

This places the selected currency symbol as a placeholder in each input box and prefixes the resulting totals. The currency drop down allows the user to select one of 3 currencies.

PERSONAL BUDGET BUDGET PIE CHART HOW TO

Features Existing Features How to useĪt the top of the screen there is a how to use drop down giving a short description of how the calculator works. Iconographyįavicon created by myself as a. This was also for readability and Roboto is a recommended pairing for the Poppins font. The Poppins font was chosen for headings for readability purposes and the Roboto font for all other text. TypographyĪll fonts have been imported from Google Fonts. I chose this simple palette from coolors to highlight positive and negative equity on the site. The goal is to create a visually appealing site whilst maitaining readability and accessability. The final design plane looks at the aesthetic of the site. A wireframe mock-up layout has been made using Balsamiq. The site will be designed to look similar on all devices and will be displayed on one page. The calculate function takes these into consideration and calculates what the value would be per month. Once calculated, the user has the option to manipulate the form data and re-calculate to see where savings could be made.Įach user input box has the option to enter values per day, week, month, or year.

Offer tips on where savings can be made (build time permitting).

Return Outcome Balance (savings = green/negative equity = red).

Days Out (include parking costs, admission, activity costs, food, and drink).

Streaming Services (Netflix, Now TV, Prime Video etc).

PERSONAL BUDGET BUDGET PIE CHART TV

TV Subscriptions (Sky, Virgin Media, BT etc).Add box (option to add more boxes, name them and remove them).

The structure plane uses the information gathered in the strategy and scope planes to design a user-friendly layout for the site incorporating the wants and needs of the user. Ensure calculations are correct and user input is correctly validated.What dynamic constraints do we have to meet?.No back end to store user data for a month-on-month review. What constraints does the site or app have to conform within?.The user needs to input their data in an easy-to-use form and click the calculate button.What does the user need to do in order to achieve their objective?.The user wants to work out their budget for the month.This can be done in several ways by the user (writing info down and using a calculator or by creating a spreadsheet) but this site takes all the legwork out of it for them. Users want this to aid in the calculation of their finances.The site will be created with HTML & CSS and controlled with JavaScript. The site will be fully responsive and easily usable on all types of devices.Every effort is being made to make the user’s experience as easy as possible.Why are we so special? What sets us apart?.Form data is the best way to collect user input.

All content is stored as form data and is sectioned relative to the subject matter and to aid in the completion of the form.

Can we track and catalogue the content in an intuitive way?.

All content contains information about the subject matter. Content is supplied by the user and the results are a manipulation of the user’s data.

The site owner’s goal is to help the user to visualise where they can make savings by providing easy to read results and allowing them to adjust the form data to see where savings can be made.

The site owner’s goal is to provide the user with an easy-to-use tool to calculate their monthly expenditure.

The site users want a tool to easily calculate their monthly expenditure with results that make it easy to identify where savings can be made.

User Experience (UX) User Stories External User Goals: The form can also be manipulated further to show the impact of these savings after a recalculation. The results will show a percentage of each outgoing element so they can identify where they can make further savings. The calculator will give the user a visual representation of their finances with balances and a chart to show how much of their income they are saving or where overspending occurs. Personal Budget Calculator (or PBC) helps the user calculate their personal finances over the course of a month.