Sunday, 9 March 2014

Research into Flat UI

Whilst I was searching for existing iBooks I came across some examples of a design style called 'Flat UI' this was extremely interesting for me as I thought it looked very similar to previous work that I have done in this Digital Media Design course, so I decided to take a closer look at it.


You can see in this image a great example of Flat UI design. The general theme throughout is very professional making the information easy to digest which is a very useful attribute when making an effective educational iBook. The flat colours make it easy to look at and work out. The blank background also allows your to force the attention of the reader into a certain direction.


In terms of displaying information which is directly relevant to my topic of Forests this image is a great help when looking for inspiration. The clear cut graph with simple headings is a really effective way of displaying information quickly and allows people to look at multiple graphs without getting overwhelmed or confused. Below the main blue graph you can see a pie chart with a very simple layout and I am definitely going to pursue this path of design as simple is a good way to convey a lot of in depth information.
On further analyse I realised that in the recent years a lot of big blue chip companies have been moving over to a move flat UI design style. In this picture you can see exactly that. Xbox, Facebook and Microsoft have all moved over to a more simplistic style in terms of brand icon this is as the market moves over onto smart phones and responsive web design as simpler more basic images are more easily readable on small 5" screens.

Image sources:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9HXP3jZvNVV9Fvluz6OrGGRqv9UXh4vEoz4CIiLIT7BuWKAlj3-aVo_s7g41-tRqCty1l_gnvxlq2Laebzyz5RAjrycvxlmo6dE7evgbhVknfrwdTQBpoc_rJxsSyBHOtpD_GqNHRvk/s1600/Logos.png
http://bastha.com/portfolio/wp-content/uploads/2013/05/flat_ui_kit.png
http://www.certifiedui.com/wp-content/uploads/2013/12/flat-ui-kit-wip.png

No comments:

Post a Comment