Recreate, break and iterate a UI

I started this exercise just to find a UI a liked the look of on Dribbble, replicate it, ‘break it’ then continue to iterate on it until I was happy with it.

The image on the left is something I found on Dribbble, which was described as a financial app with very little additional info. Replicating the UI (middle version) was relatively easy, although I couldn’t find a free version of the typeface they had used (DIN) at the correct weight so the numbers don’t quite match up. The colour palette originally caught my eye so it was the first thing I changed. The UI no longer worked so I set about tweaking it to see what else I could do to it.

I wanted to return to the colour palette but change the UI. Having looked at it in a lot of detail, I could see buttons and links that could be transitioned into a menu at the bottom. I also wanted to bring the bottom components closer to the main source of information, whilst increasing their affordance as links.

Having made the updates, I adjusted the palette again so see if it would still look as broken. This time the UI held together much better, so I continued to play with some of the main components to see if I could bring more detail to them. 

The final version on the right includes some updates to the palette and added detail to the ‘Revenue’ label to show it could also be used as a link.