I have user tested my iBook with my family and my girlfriend.

I asked them the following questions to weather it approves to the criteria;

How helpful was the iBook in terms of finding out new information    

Very,  good,  a bit,  not very

How easy was it to find interactivity on my pages?

Very,  good,  a bit,  not very

How easy was it use my interactive features?

Very easy,  standard,  a bit,  not very

What age group would you think it is aimed at?

3-5, 5-10, 10-15, 15-19 19+

How much did you enjoy using my iBook on a scale of 1 to 10?

1,2,3,4,5,6,7,8,9,10

Overall, would you recommend my iBook to anyone to find out more about Coral Reefs?

Yes, no, maybe

The feedback I received for my iBook was actually surprisingly good.  They particually enjoyed the graphics in the background.  They thought it was creative and represented coral reefs very well.

They thought my interactivity was done and presented very well using the 'Tap Me' icons to signify where the content is.

They enjoyed using the image gallery  they thought it was a fun way to learn new things in a creative way that differs from paper.

 

  

I have discovered a problem with my iBook.  My first page is currently A Coral Map showing the biggest and greatest coral reefs over the world.  However, as you can see below my map is rounded off to make it more circular like a globe.  When I preview this on the iPad it shows up as a rectangle square.  This is because this means that the map then covers up the graphics on either side of the page and doesn't look half as good quality.  I don't know how to fix this.  This Coral Map is an 'interactive image' widget.

Yesterday I was working more on my website.  I am behind with this as I find it such a struggle but I have been getting help too.  I have always planned to have a footer at the bottom of my web page as any other that you come across.  As part of my re-search I came across a website called 'thegreatbeardedreef.com'.  This is a website about a man that had a passion for looking after the Great Barrier Reef off the coast of Australia.  He wanted to become someone that manages the reef and looks after it general.  Sadly, this man didn't get it.  Anyway whoever designed this website for this man did a fantastic job in terms of graphic and simplicity.  This website has been my one inspiration for what I am producing.  It is graphically very rich.  This is the main reason that kept me on this page in the first place.    I found this website when looking at website inspiration in the first week of the project.  I have included screenshots of this site in my pitch and pitched the rich graphics to the class.  

Rich graphics from the great bearded reef

Below is a shot of the 'ocean sea bed'.  I think the colours used here are very well chosen without going for that ultra bight coral reef look & feel.  They are dark, perhaps suggesting mystery and of the diver shown in the graphics wanting to explore the reef.  The fact that the environment is very dark and the treasure chest is glowing, which is projected of this mans face really highlights that he may have found gold/diamonds.  You can tell there is a background and a foreground on this image.  Acting as 2 layers.  

This website is not a responsive website and I think that it doesn't necessarily need to be.  There is more graphic image than text therefore making it responsive could ruin it in a way.  Even thought when I shrink the window the sea bed moves inward towards the diver ad the chest.  From this you can tell they are on 2 different layers like I said before.

                            

As you can see beneath here I have attempted to re-create this reef environment in Illustrator.  I have used the same sandy ocean floor from my iBook.  This is because it remains my own theme and style which I want to achieve.  I have added a treasure chest and created my own gold coins.  I created these by creating a circle with (L) + Shift to create a perfect circle. Then created another one inside it.  After doing this I used the 'Type On Path' tool and drew a circular shape inside the coin.  I then typed Gold onto it and applied an engraved effect that actually turned it an off gold almost silver colour.  I added this coin to my symbols and used the 'Symbol Sprayer' tool to spray into the chest.  I also had to use other spray tools such as symbol shifter to make sure they sat nicely in the chest and onto the floor.  I created the green and purple corals as you can see below using the pencil tool (N).  I placed one of my sea creatures used in my iBook and placed it on the left next to my starfish I made.  

    

I have now come to the point where I want to place my footer in my web page.

I have virtually finished my iBook.  I have used various widgets on iBooks Author and Bookry to create an interactive experience for the user that differs from just being on paper.

Such widgets I have used include Google Maps, Interactive Image, Image Gallery.

I have avoided using others such as using the image as tiles and matching them up.  Also I have avoided using the question and answer widget.  This is because after crit I noticed everyone was using these.  I wanted to stay clear of them as I feel I want to be different.

I have made a decent start on my website.  I did not underestimate how hard this would be because when practicing I found it to be a big struggle.

Now however,  I have picked up a bit more as I was designing my website.  Here are a few screen shots of my website and different viewports;

Above here Is my website so far on a desktop computer.  I like how I have a big title attracting attention directly to this as you open the page.  I made the 'W' must larger than the rest of the text but still a lowercase letter.  I think this gives it a dynamic look and feel about it. 

Here we have the first section on coral reefs and some graphics which were inspired from various artists.  These are not correctly placed yet as they are all pushed over to the left hand side and over weigh the page in contrast to nothing on the right side.  I have yet to do this properly yet.  I have kept a 2 column layout even at desktop view.  This is because I feel 3 is just too much.  I have seen a lot of websites with 3 and that may be the most popular when displaying text.  I have also seen some with 2 and for me, this is a better option.  I have taken my same effect from my main large title and used a lowercase letter larger than the rest at the start of every sub-title.  This looks uniform to the rest.  I have a white line separating the columns to go with my colour scheme.  These match the titles too.  

Above here we can see a problem which I have yet to overcome.  I have a jellyfish graphic on the right-hand side, however it is blocking up the colunms pushing the text to a different place.  This is a minor problem at the moment and will be easy to overcome but I do struggle with this and have tried different properties to move it.     

Here we have my website at smartphone view.  I have coral reef fish but it is over laying the sub-title.  This is okay for now as I also believe this is simple to overcome.  In my wireframes I wanted my graphics to disappear as they are no longer important at such a small viewing port.  I have discovered this as you can see from my previous re-search on responsive web design.  Most graphics get pulled out at a smaller size as priority is navigation and content.

On my last screenshot I have what the top of my page looks like at iPad view.  I am pleased with this as my navigation splits down to the 4 buttons just after my columns split to just one.  

So far I am pleased with how its turning out, but I think its clear I still have a lot to do in terms of adding more content and creating this to enhance the user experience. 

Part of my ongoing research has been about inspiration from other artists.  As you can see from previous posts I am keeping a colourful theme.  This seems appropriate as I'm doing Coral Reefs.  Its not the only reason I chose to do use vibrant colour.

I have been looking at Brosmind.  Brosmind is a studio based in Barcelona founded by 2 men who are also spanish.  Their style is fresh and optimistic and always combines fantasy and humor. Their illustrations have been awarded with the most prestigious international awards.  They have also worked with companies like Nike, Volkswagen, Microsoft and Virgin.  

I started looking at their work before I came to the decision about designing my graphics.  I chose these people because their style is so unique.

I don't know much infomation about these images as there doesn't seem to be anything about these.  All I know is that they are known for using few elements using simplicity.  They both studied Graphics in Barcelona and have won various awards for these.  I find this image above very bizarre but the weirder, the better as this is so creative.  As I've said I'm not sure what this is about but I gather from looking at this design that they are putting across a message 'You are what you eat'.  I love the 2 main colours because it keeps it simple and eye catching.  The drops dripping off this person seem to be grease, giving a feeling of slime, slop and sweat.  I like their style.  By this I mean that their way of designing  is cartoon-like without going over the top sending out a children's vibe.

I asume from the above image that these are the two designers themselves.  Again cartoony, more than the first.  Another thing in common with the first design is the simple colour palette.  Green and pink is used here.  These are a strange combination in my opinion but they work.  The one on the right has bones shown inside him suggesting he may be skinny but I'm not too sure.  The other is an ape like illustration with a texture.  

The design above I find very very striking and quite vivid.  This is a commical design,  With a pork chop saying 'Fork-You' as it kicks the fork off the steps.  I think this is great.  Its creative and the standard block colours in the lines almost act as an illusion.  Again, simple colours = most effective.

This design looks very whacky.  Block colours being used again, this seems to be a theme right across their designs.  Vibrant colours this time as well with bright green, purple, blue and yellow.  

I have no clue as to what this design is.  I just like the cartoon graphics.  The attention to detail is quite precise in the right of the image without breaking their (as it seems to be) rules of their work.  

From looking at Brosmind's work I discovered almost everything is outlined by a thick line.  I was looking at their work in inspiration for my own graphics but I have since done these now considering everything I have talked about here.  As you can see in my iBook screenshots, my graphics have no black outline round them and I did try this because It creates impact and gives a bold effect.  This however did not work on my own pieces because I felt like it took you're eye away from the content itself.  I want to the graphics to be noticeable obviously, but not so much that you concentrate of them more than the content.  I have however decided to go down the route of playful imagery, using cartoon images from the web.

Following my iBook background solutions I now want to show what a couple of pages look like with content placed on them.
They are as follows;

I am currently very satisfied with my work so far on the iBook.  I like my gradient I made which contrasts well with my webpage which alos has the same background gradient.  I used animal creatures which I have said they are not my work, these images are from the internet.  I have however added a dark, sand like ocean floor to add depth and a sense of a reef environment.  On the topo left you can see I have used a thumbnail widget for viewing different photos.  This is a good way of putting images and photos into your iBook because it doesn't take up much space and you can still view more photos from the thumbnail.  I have also used a widget from 'Bookry' called Google Maps.  This is where you can list a link to the part on Google Maps and imbed it within your page.  Once being viewed on an iPad you can click it and you can (in my case) look around the Great Barrier Reef.  I have done this because Its a great way to engage with interactivity and opens up a lot of information for the viewer. 

My page after that is again as I have already explained same background gradient with the ocean floor. I have used a fish on the left and some sea-monkeys/seahorses on the right. I think for every page it would good to have what the page is about on the right hand side.  In this case it is 'Great Barrier Reef Formation'.  I have used a font called 'Stamp' and positioned the text on its side.  This is to give the effect that someone has literally come along and stamped the page.  I did this because it gives a different/slightly unusual feel to it.  It works in my opinion and to keep that uniform I will do this to every page. 

Following pitch I have finally decided on a deffinate font for my iBook and website.  I am keeping them both the same because of simplicity, theme and recognition.  This font is called 'Cavier Dreams'.


This is a screen shot taken from my website.  The blue background is my gradient background.  I chose this font out of pure elegance and smart feel about it.  On my website the title is large which has increased the thickness of the font but I think it still applies well to what I am doing.

Above here is what the font usually looks like at regular size without expansion.  I love how big and wide the 'O' of the 'of' is in comparison to the other letters.  This font gives a clean, natural feel about it and fits my title very well.  I chose for my iBook and website to have this in white because it just looks so sleek.  It looks fresh, modern and natural fitting it's purpose perfectly.  I am having this font for my content as well as my main headers.  This is because even though the brief states there is no overall theme I want for example, someone to look at my iBook who has never seen it before then look at my website and think these have been produced by the same person and they link together.  I found this font on Font Squirrel which has hundreds of web fonts to choose from.  On the navigation side bar I clicked on elegant and this one is the one that looked perfect to use.  

I had inspiration before finding this font from Disney's 'Finding Nemo'.  I really like the font they have used as It looks and feels like It has a flow to it.  The font is really pure and thick.  All the characters in 'Nemo' have been cut off (some more than others) then underlined with a wave line effect.  Without this added to the font face It wouldn't work as well at it does.  I got inspiration from the font colour as well. I know this is only white and might not be that creative but it works just fantastically well.  Using 'Cavier Dreams' with Disney's white on blue style I found my own style which fits Coral Reefs, Wonders Of Nature.  Here below is some other fonts I have been researching into;

This font above is called 'SF Cartoonist Hand' and again I grabbed this one from Font Squirrel.  I think that this font has potential to be body text because it looks freely hand drawn.  This font in my opinion would be easily readable in paragraph text.  It is also playful.  It isn't first noticeable but if you look at the 'F' in reefs or any of the characters really but mainly the 'F', it looks un-professional hence the name 'Cartoonist'.  I included this font in my pitch but the favourite was 'Cavier Dreams'.

Above here we have 'Komika Text'.  This one came off of Google Fonts and I think again it would suit body text format.  Its quirky and has a feel of movement about it the way it leans to the right but only slightly.  Between that and italics.  Reading an article or paragraph I think this font would make it more enjoyable for the reader because in my opinion it looks lively.  Neither 'Komika Text' or 'SF Cartoonist Hand' would be suitable for a header/title because it simply doesn't give that striking feel that a title should do.  A title needs to grab your attention and keep the viewer interested and for me, neither of these fonts did this except 'Cavier Dreams'.  All of these fonts are in my pitch.

I have since been changing the look of my iBook.  I did have a background of my web gradient which is the two different blues merging into each other.  Below is what my original background for my iBook looked like;

I made this in Ai.  I used the same background that I used for my Web page.  I choose these colours to represent a coral reef.  It feels and looks vibrant.  I made the border from animal stickers that I found on the web.  I changed their colour to black and re-sized them to fit my design.  I did this because I wanted to maintain the coral reef vibe but thought this was lacking in colour.  I did have further thoughts as to if it was much more colourful it would distract from the content. This would look way too much.  I have therefore changed my background.  I have done a little research into professional presentations and presentable backgrounds to content.  For every page in my iBook will be a new background.  I am keeping the background gradient.  For my iBook I will have my reef gradient on every page followed by coral marine life around it.  These will be images acting as a type of border for my content  

My solution is below;

The animals are images from the web and I have not made them.  I have tried to keep the same theme across both the website and the iBook.  Using the same background was a great idea because it links in with using the same content.  They will be different on every page with different marine animals to add variety and to keep the up the flow of the iBook.  Content will be placed within the background but not over lapping the creatures.

I have since been design my iBook.  I have planned through every page of my iBook starting with a reef environment page.  I want this page to look colourful and exciting to gain the interest of the viewer to read through my interactive book.

I have done some re-search on other people's iBooks but this has been a challenge because I do not have regular access to an ipad.   I want to make mine interactive.  Using the benefits of my content being viewed digitally other than a paper page.  My second page will consist of a world map showing different relevant coral reefs over the world.  I have successfully done this and named them with a drop down menu box for interactivity.  Here it is below;

I simply took an original map image that looked authentic and rough.  This is because it gives a feel of discovery and this links in to finding the coral reefs being explored.

My 3rd page will consist of the listed reefs in the map but a bird eyes view image.  This will then list facts about that reef in a small dialog box and I'm looking to add in different widgets to make it more enjoyable.  I feel this is important because if i do not include any of this, it might as well of been on paper.

This will be same for the other reefs listing the reef on different pages and listing facts about inhabitants etc.

I also want to include a lot of images as well.  This will be educational as the brief stats the content needs to be relevant for A level students.

One point I'm including in my project is the formations of the reefs.  I want this to be interactive thumbnail style images that have moving arrows showing you what happens step-by-step.