Data Analysis / Interactive Web Data

Flat UI :

Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. (Antonio Pratas (2004),

This weekend while working on the design aspects of the data visualisation project, I stumbled across Flat UI. Flat UI is a minimalistic approach that is entirely… flat. That is it is primarily 2-dimensional, using block colours and contrast to deliver a simple, striking pallet to display your content. The contrast between the understated design and interactive data visualisations can only enhance the impact of the visualisations. All-in-all I think Flat UI is the perfect platform for this project.

Bright Red / Pink (#ED002F)

Bright Red / Pink (#ED002F)

Microsoft is probably the single biggest developer of  Flat UI products. The Windows 8 Metro design has become a classic example of Flat UI. Love it or hate it, Windows 8 is a visual candy-shop delivering a bold interface that is instantly recognizable. Personally, I love it.

The colour scheme is made up of 4 colours; 1 bright-red / pink and 3 greys. There is an edginess to the pink that I really like. It’s not girly-pink – it is intense! The midnight blue is deep, and offsets the heat of the pink really nicely. While the ‘clouds’ and ‘concrete’ are much more subtle and offer quieter tones to the UI.


Midnight Blue (#2C3E50)

Midnight Blue (#2C3E50)

It is the contrast that appeals to me most. The contrast of the exaggeratedly simple design that puts the real content up front and center. I’m still not sure what my interactive visualisations will look like, but I am imagining something fluid and moving which will be in striking contrast to the Flat aesthetics of the web page. This can only help to enhance the effectiveness of the visualisations.



Clouds (#ECF0F1)

Clouds (#ECF0F1)

I now have a fully functional website, but with absolutely no graphic design. It is simply a collection on components thrown together. For the design phase,  I am essentially starting again. I debated whether I was better to start a-fresh or add the design into the existing project. In the end I chose to start again – there is real opportunity to refactor the existing code and simplify it while designing the UI.




Concrete (#95A5A6)

Concrete (#95A5A6)

There are things I tried to do throughout the first phase, that I don’t think I did very well (for example my efforts at small incremental development, followed by thorough testing were not very disciplined). This is a great opportunity to improve in these areas as I work through the design phase.





Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s