Tuesday 4 March 2014

Visual Research: Flat UI

Whilst looking into existing iBooks and developing ideas for my own, I've been considering Visual Styles.

When I initially imagined my iBook, before I'd done any research, I imagined quite a simplistic, vector shape based design that reflected current design trends. I've had a browse on Pinterest to have a look at existing interfaces and general graphic design to get some more inspiration. I've noticed a lot of 'Flat UI' designs.
"Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations."

Examples of inspiring 'Flat UI'
Example 1                                                                Example 2

Example 1: Brilliant example of a Flat UI graph which would work well for presenting statistics in an iBook. Each graph is very easy to read and eliminates any unnecessary shapes (e.g. the x and y axis on the line graph).

Example 2: Given me inspiration on how I could incorporate icons into my iBook. If I'm going to have images enlarge upon click, is there going to be an 'X' icon to close them? Will I have a home button?
Example 3                                                                     Example 4

Example 3: From this I've started sketching out some potential layouts for the introduction/contents page and am considering how I could present information like this. It seems a good way to present everything at once, mixing in with images to break it up. Reminds me of a tumblr layout - perhaps that's an advantage being aimed at teens? 

Example 4: Another idea for the design of presenting statistics. Relevant to some of the information I need to present - where in the world is there Volcanoes? Love the minimal use of colours and sticking to one colour and using varying shades.
Example 5                                                                      Example 6

Example 5: I'm now sketching ideas for incorporating a sidebar into my iBook. Would this be too intrusive? Is it even possible in iBooks author?

Example 6: A similar style to Example 3. I like the margins between each elements. Quite a logical way of organising, but then quite confusing in some ways. Unsure how this could work in the 'Volcano' sense. 

I'm really quite interested in the idea of using a Flat UI design style. It's very current, and just from looking at the 6 examples above I can see how it's very flexible and rather unlimited on how you can use it. I particularly like the way it's been used for presenting statistics visually (see Examples 1 & 4) and can see that working in my design quite successfully. 

No comments:

Post a Comment