logo logo

Colophon

The Little Money Box is the place to come and learn more about money as a young teenager or parent who wants to teach their kids about financial issues. Filled with interesting facts and figures, along with interactive charts and more, this is the new exciting number one money website.

Executive Summary

Post thumbnail

Young people in today's society are struggling to manage their money properly and reports show that they are most likely to fall into serious debt problems when they become older. With that in mind, 'The Little Money Box' brand has been developed as an exciting new way to 'educate' young teenagers in financial matters and how to deal with money and financial planning properly before it's too late.

The website offers a platform for young teenagers to gain knowledge of the world of money, including information on setting up a bank account, borrowing, savings and using credit cards. The website has been purposely built interactive so that users can take part through social mediums, such as Twitter and Facebook and share facts with one another. Users can also see the little calculator feature to see how much they are spending and take the quiz to see how much they know about money. When users view the website during the day they will see that it is predominantly orange, however when they view it at nighttime, it changes to a purple background.

It is vital that parents also know the importance of teaching their young teens about money at a young age, and with that in mind the website offers a section specifically for parents to gain that knowledge.

The site has been built with the latest technologies including HTML5, CSS3, jQuery and some PHP. It is also been made responsive so that users can view the website on their iPhones and iPads, etc.

Tools, Technologies and Resources Used

  • Apple iMac - Designed and developed on an iMac running OS X 10.6 Snow Leopard.
  • Adobe Photoshop and Illustrator - both Photoshop and Illustrator were used when creating the little money box logo, mascots and background design.
  • FileZilla - was the chosen FTP program for transferring each file to the server.
  • Smultron - was the chosen text editor I used to code the webpages of the site.
  • HTML5 - the latest in webpage mark-up, several new tags have been incorporated into the site making the coding process a lot more straightforward as the elements are more semantic.
  • CSS3 - used to apply some animations as well as the implementation of rounded corners and drop shadow effects.
  • Modernizr - used for enabling of HTML5 elements & feature detects.
  • Respond.js - a lightweight polyfill used for min/max-width CSS3 Media Queries.
  • jQuery - was used to add animation and interactivity, including a stylish slideshow on the main homepage and the incorporation of the twitter feed. CSS Tricks proved to be an excellent resource to come up with some jQuery code that changes the stylesheet depending on the time of the day. Enhanced.com also provided me with a jQuery plugin that I used to generate random money facts from an XML file.
  • jQuery UI - was used to create the little calculator using the 'slider' feature.
  • Javascript - was used to create the 'save a penny' counter which uses cookies to count how many times the user has visited the website.
  • PHP - using the code provided by PaperMashUp as a starting point to create the twitter feed on the 'Ways to Make Money' page (along with some support from Simon Frazer). PHP was also used when creating the quiz.
  • Highcharts - was used to create the stunning interactive charts which appear throughout the website.
  • Facebook Plugin - used on the 'Home' and the 'Ways to Make Money' pages to add user interactivity.
  • Big Wet Fish - an excellent web hosting service that the TLMB would definitely recommend to anyone.
  • Add This - used to increase traffic and engagement, get free real-time analytics and understand my audience.

Typography

The fonts I have used for this website are hosted by TypeKit.

Cubano for the main headings and sub-headings. This font was designed by Chandler Van De Water.

Faricy New Web for the main text. This was font was designed by Moretype.