Initial Design Development: Mobile

I've been sketching in my sketchbook trying to work out the direction I want to take my design. I understood I needed to apply a similar design style to which I used in my iBook (as they've got to match and be seamless between each other) but my issue is that since then I've 'moved on' from that design and when I go back to look at it I can identify a ton of things that could be improved with it! What I decided to do, then, was go back and look at the original graphic I created (from which all other graphics were inspired and created from) and have a look at how I could take elements from it.

- Ribbon wrapped around an element (in this case it's a volcano)

- Red against the sea green background

- Shape of the volcano (I like its uneven, loosly cartoon style)

I decided to take these elements and try and incorporate them into one design (initially for mobile). I had a look on Pinterest from some inspiration of ribbons. I wanted to see the different styles, see if there were any conventions with their use and just generally have a look how they're used. I found this particularly useful image (below) and used it to inspire my sketches. You'll see in my initial designs below how they have played a part.

http://www.pinterest.com/pin/341710690449661469/

I took three potential designs that I felt were most successful and started to develop them more in illustrator.

Option 1

On paper this looked pretty good...on screen, not so much. A lot of the issues I'm having is the restrictions on my actual ability to design. For me it's sort of like drawing - I know what's in my head but it's the execution of the idea that isn't quite as good as what's in my head. Whilst I'm getting much more advanced on Illustrator and my ability to execute my ideas is improving, I don't feel that this design really works the way it is. It looks a little odd with how sharply the sides of the 'Volcano' drop off and I don't think I'd be able to include much of the stuff coming out the volcano due to the shape of it. If I make the shape any wider then the illusion of the ribbon wrapped around it won't be there, and if I make the peak of the volcano any lower it will ruin it's shape. 

Option 2

I do quite like this one, especially how uneven the ribbons wrapped around it are. I like how it allows the edge of the volcano to gradually move off of the page down to the corners, but it doesn't really allow me space for a logo. I am interested in making the logo quite a prominent feature, and this doesn't allow that. The colours are good, but the lack of red doesn't really relate to my iBook as much as I'd like it too.

Option 3

Out of all my designs, this is my favourite. I love the shape of the logo and the text within it, and I think the colours work well together. I'd like to rethink the colour of the text within the logo though, as it's the same as the red background at the moment. This design has allowed me to think about the possibility of having the red background stretch down and down and to have content 'attached' to it all the way down.

For a bit of fun, and also to have a look into the proportioning of elements within my design against a mobile device, I mocked up this design onto an iPhone. This also allowed me see what elements of my design may be cut off by things out of my control (e.g. on an iPhone, the search bar at the top protrudes into the screen, as well as the back/forward/navigation buttons on the bottom. The actual size of the viewing screen is significantly trimmed compared to the size of an iPhone screen)