Web Design Project #4: Phases


What:  Phases web page design

Date:  5 April 2014

Learning Outcome Statement (LOS):

  • Think, Design and Build a conceptual app
  • Sharpen design skills (from wireframes, to icons to later implementation?)
  • Financial Planning sense


Phases Front

Phases Select

Phases Blank Slate Phases with placeholders Phases Icons

Description:  Right. I got tired of last month’s blog based designs; Home Post About pages in the header, Lorem Lorem Lorem pages in the footer and some design in-between. The layouts were too vanilla header-body-footer. I wanted to stretch myself this month do something different. So I’m kicking off this month’s challenge with a purpose: to build web design x-financial planning app.  

Focus here is on personal financial planning app from the user’s perspective. It’s geared towards answering questions like “should I take that holiday?” or “I need emergency money for..” So here’s the layout:

  • Planned Events are upcoming events with financial impact
  • Current Position is your financial position
  • Changes is where you enter, simulate and save changes
  • Economy Local / World / Trends provides macro view 

Changes is the main focus where the user enters some financial numbers for any given change (planned or unplanned). The output presents the impacts to their current position and to their plans (planned events). In addition the user can check the impact on the 2 other future phases (Stabilisation, Retirement – assuming you’re in the Growth phase initially).

If it’s a future spend, then saving the change moves that spend to the Planned Events and immediately moves your financial position accordingly (tech-o: Change is like staging prior to a commit).

The Economy section provides the state of play at a Local, Regional and World level (with trends). The driver? Check the impacts of your financial decisions now before committing.

Here’s more, visually:

Phases description 1 Phases description 2Listened to this while creating this:  Red Hot Chili Peppers – The Uplift Mofo Party Plan. This is so random as I really don’t know what possessed me to pickup this classic album (their best, IMO). What does Me and My Friends, Backwoods, Skinny Sweaty Man, Love Trilogy and others have to do with this exercise? Well did you notice the splashes of deep orange?  Yes, the music brought colour!

What did I do immediately before creating thisFed my eyes with Graphic Burger and Behance, physical exercise with earphones bleeding music – then started playing around with colours and patterns.

Credits:  Sermons from Nick Pettit, Sarah Parmenter and Mat Helme (I jest – these are great)

Comment: I’m only ever going to design that 2nd page in Codepen.io if this design makes the cut. The other pages need more serious thought and to be honest, I’m cramped with time and it goes against my LOS.

(which is the reason why I held back some other major ideas for this.)

LOS check

  1. Thought, Designed and Mock-up built
  2. Design skills sharpened (the icon design was kinda fun)
  3. I held back so perhaps I’ll expand more another time

About this project:  Initial blog located here and here’s how implemented last month’s winning design. Basically this is a series of designs – 3x a month, beginning March and ending in May. If I have my maths right, that’s 9 designs between March and May with the 3 best designs to be coded here.

And I’ll be storing my collections here.

Until the next design, may your day be filled with colour!


2 thoughts on “Web Design Project #4: Phases

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s