Making Some Changes

There was one particular change that I wanted to make in my design as well as an additional one suggested in the pitch I did yesterday. These were the design of the home button and the direction/shape of the arrows that divide each 'section' on the main home page.

Home Button
I want to feature the home button separate from the main central ribbon, but have it float just like the navigation bar does and have it 'stick' to the top of the page. My initial design of it was pretty boring and not interesting.

There's not really much well considered design that comes into that...so I decided to do a bit more work on it so it doesn't look like so much of an after thought. 

All of these match the design style of my website, and enable me to have the ribbon coming out of the edge of the page, making them a good design to make 'sticky' at the top of the page. 

I am leaning more towards the 3rd, right hand side version. I like how the I've made the corner flick up, and as I'm writing this it's given me an idea!

Have the corner flick up as the mouse hovers over it. I don't really like the idea of having a change of colour in it's 'down' state, so I'm thinking of keeping the over state for the down state too. 

I've also now decided to move the home button to the top left of the screen rather than the top right, as it feels like a more natural place for it to sit. 

Page Dividers

A suggestion in my pitch was to change the direction or shape of the page dividers - which happen to be in likeness to an arrow. The design of these was not initially meant to represent arrows, but they are obviously in a similar shape to them.. The worry was that the fact that they are pointing upwards counteracts my want to provoke the users scrolling down the page, so the suggestion was to turn the arrows around or change the shape.

The first change was the shape.  In these examples I have changed the shape to match the outline of the volcano that is featured in the logo.

In this example I have changed the arrows to point down. I do not like it!

I do not like it as it seems to protrude a lot into the section rather than out of it. A point made my tutor has made me lean back towards my initial design of having the arrows point up. It makes each section appear like a tab in a folder and is something that is quite prominent on the web today. 

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."

http://www.creativebloq.com/graphic-design/what-flat-design-3132112 

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.