Hype/Bookery widgets

I have used HYPE to create some HTML 5 widgets that are embeded within my IBook, they demonstrate some of the anti aircraft techniques used in the war.

https://dl.dropbox.com/u/16672274/PAC%20copy/PAC%20copy.html
https://dl.dropbox.com/u/16672274/PAC%20copy/barrage/barrage.html

They are made by adding key frames at specific points along the timeline and buttons which go to them and play.

I have also used Bookery which create custom widgets for ibooks. I have used the youtube and the google map widgets. They also have a web browser option which is good, this way people do not exit the ibook app and go to safari, it's all self contained.

Widgets

Gallery widget styles

I chose to do some alternate gallery styles so that they were not all the same. For the ones with the paper clips i was hoping to have a png with transparency over the top, however widgets automatically come to the top so i had to add a paper clip to each image.

The same thing had to apply to the images where the corers look as if they go under the page.

The corners had to be added to each image.

Questionnaire widget

The questionnaire widget comes with multiple layouts for questions like tick boxes and draggable objects. I decided that on one of my pages i would have one of these that related to the information found on the page.

Audio widgets

Where I have just audio i have these audio widgets that play audio when clicked, they also have a pause function

Video widgets

Video widgets have the option to play full screen only, this is helpful in some cases if you want your non to be played within the ibook layout.

Scrolling side bar

On a few pages I have a scrolling sidebar which enables the user to scroll to see more information, I hav used it so that i can get more information on the page.

Pop up widgets

I have used the pop up widget to show information about places on the maps i have within the IBook, it's a good way to show more information without cluttering the visual design.

Final page design (IBook author)

These are the almost final pages for the IBook, there are some small changes that I need to do.

Other page mock up's

These are all my PSD photoshop files. All widgets and text need to be added and will be done in IBooks

Presentation

Feedback from presentation:

The only bit of feedback that I got was the use of polaroid images within the Ibook, as they were not made during that period. I aslo did not have my interview done so that was not shown.

Polaroids need to be changed

Polaroids need to be changed

Post presentation mock up's

These are the three pages that I will showing in my presentation.

At the moment I have no page linking but the main content is there.

IBook design guidelines

Fonts:

The fonts I will be using will be Phoenix script for my had written styled accounts and American type write for blocks of information.

The theme i am going for is a book within an IBook, I will have content on the pages in a skeuomorphism themed design where I will have real objects as like my menu placed on and behind the book. The pages will also join up so that there are no gaps or lines between pages.

For images I want to them look like they have been developed and stuck on the page, my idea is to use things like paper clips, selo tape and cut corners to make it look as if the photos have been stuck in the book.
For my animations i want a realistic looking feel to them so i will be sing 3D models, and photos instead of hand drawn images.

IBook page mock up's

These are some of the pages in which I will show in my presentation to get feedback on, from there i can alter the design if necessary and apply it to the rest of the pages that i will be creating.

First of all I created a blank page witch i will use as a template for all my other IBook pages.

This page include 3d objects and a gallery

This page includes two galleries and a google map

This page includes 2 galleries.