Making the Ibook- Using the Widgets

Placing all my elements together i started by using a simple layout since i knew my content was limited i knew that 2 pages per chapter was probably going to suffice, i placed each of my pre-made backgrounds after my main chapter patterns, i did have a few animations ready made, (butterflies flapping) and i initially wanted to place them as a background but i thought they looked too clunky so instead i kept my backgrounds clear and started by inputting my text, once my text was placed i then incorporated by images since my design revolves around them. 

i used image galleries on my monarch butterfly page and my Green darner but in order to illicit change i opted to place my hummingbird gallery in a scroll bar, i didn't think this was obvious enough though so i added a torn label up the top in order to draw attention to it. after which i framed the entire gallery with a segment of pattern with torn edges (the gallery didn't have an edge options) and it was the only way to soften the edges and make it work with my page. adding my illustrator made flowers at the bottom of the page also enabled me to introduce a pop over. 

i presented my text on boxes that i created in illustrator- i used two sets, one tan and one white (i used a specific art brush on the edges and thought that it would relate to and simultaneously contrast with the torn edges picture frames used on the i books author) and placed them behind my text which was written in my chosen typewriter font. i then edges the boxes with various squares and circles of 'stitched' pattern some of which used pop-overs.

this was the slide puzzle widget that i took from Bookry the image is its placeholder which is why ive labelled it to make sure that this was clear. once again a large section of pattern generates a base for the widget and breaks up the expanse of fill green background.

 i have two videos in my ibook and one audio both videos were presented with transparent fills and torn edges frames, each video has the option to become full screen and i particularly like the dot boarders to the title which frames the text without appearing too overwhelming.

the audio is a tiny circle with headphones, it barely takes up any space but in order to make the audio clear i opted to once again use a pattern to contain the element, the caption i placed next to it, jaunty angles to create the messy patchwork style.

i initially wanted to place my butterfly animation behind all of my elements but that proved too difficult since Ibooks author over rode the transparency settings on the mov file when dragged into the ibook, which gave my animation a black background that i didnt like. because of this i opted instead to place my animation on top of a patterned background and import it is so i became one of my many background patterned squares that lined the text and images.

 i mostly used the interactive image widget to incorporate some fun facts that i didnt think would read well within a paragraph, i only really used this widget once since i was trying to display a range of interactive elements.

i was a little worried that i had used the torn edges option too much but i think it works well visually so i plan to bring it up in crit and see if any of my peers have an opinion on the matter.

Ibooks continued 4....

i briefly found some other ibooks that used some of the widgets available on ibooks author although i had a vague sense of visual style i wanted to see how other i books used some of the widgets so i could integrate them into my own without being too clunky and forced. I want to ensure the overall fluidity of my ibook and make sure that is is both visually appealing and simultaneously engaging.

 The sliding puzzle widget is one that can be found on the Bookry site and also one that i plan on using, its fun, simple and doesn't rely on text so it would be best used within areas that are text heavy.

The widget above adds labels and zooms into the image where the points are placed i could use this to add small portions of text that aren't coherent, or important enough to place within my paragraphs, although using htis widget requires a high quality image.

 this is an example of the image gallery and how it can be expanded to full screen, i think ibooks does this automatically but it is once again reliant on high quality images.

the pop over as seen in the image above doesnt actually have to have a solid tap point, a transparent shape could be placed over an image, however i plan on using my pattern segments to do this which can be placed around my text and images.


having seen some of the other interactive elements used within other ibooks, i now have more of an idea as to how to incorporate the interactive elements, although the ibook examples above are text heavy and formal i plan on trying to give the widgets themselves some more of my own style to ensure the overall continuity.

Ibook continued 3....

i wanted to experiment with how im going to display some of my images, as well as an image gallery i plan on also making smaller thumbnail images that frame some of my text content. i plan on using the torn edges frame to continue my handmade/stitched style.

 using popovers on some of my images makes my ibook more interactive and adds an element of fun. I haven't really marked the image as interactive but i have placed a butterfly button on top as an indicator something that i could continue on my other pages.

 i also want to include some popovers that don't contain any text and are image based again using a torn edges frame to ensure the overall continuity.

using my patterns i plan on overlapping them within large gaps, possibly adding pop overs or other interactive elements to give them more of a purpose than simply filling up large areas of blanc space. adding dashed borders gives them a stitched feel and also matches my headings.

Ibooks continued 2....

Before fully beginning my ibook i did manage to find a couple of screen shots that gave me a flavour of  what an ibook could look like,

this one entitled road trip was the one that i liked best. i liked the jaunty angles and the frames which really corroborated with the pin board background, interactive elements could be added incredibly easily to each of the images, pop overs and scrolls would initiate some interactivity. mostly i just really liked how image based it is and how relaxed the overall style is so i plan on using the stitched style that i have throughout my logo designs and somehow combining that with some of my patterns to generate something bright and fun.

Here are some of the backgrounds ive generated specifically for the ibook since i felt that hints of pattern would work better on top since it would be less overwhelming  than using my patterns themselves as backgrounds Although i do plan on using the patterns on my main chapter title pages.

  i used the orange from my colour palette, incorporated strips of pattern as borders and since this was intended for my monarch butterfly section i added blue butterfly outlines in a rough brush to add point of interest it also simultaneously directs the eye to the top corner.

i did the same to the rest of my backgrounds, alternating the patterns and colours depending on my subject matter and made sure i created the same backdrop with the borders on the opposite side so my pages would flow together. 

The black backdrop i intend to use as my explaining migration page which is why I've included all of the species that i have looked at. 

ideally i would use a pattern based background for my chapter headings as shown above. and the less overwhelming backgrounds as my pages which would flow across the ibook and match up when swiped across. since i dont have a great deal of content (because i want to keep my website relatively straightforward) i plan on cramming my information together so my page looks interesting and engages my target audience. 

I Books Research Continued...

i found it hard to research the i books since i dont have an iPad and most of the free sample books are literally just books without any interaction, so i decided that i would download i books author and explore the interactive elements that can be used with the software.

These are some of the widgets available in i books author and i defiantly plan on using most of them, since my designs are incredibly pattern based i feel that a rougher, scrapbook mismatched style is whats going to work best with my designs. so i was pleased when i found in the inspector that pictures could be given various frames that could highlight my theme. 

\

i even initially played around with the image gallery feature since i knew that they were going to be key aspects in my ibook. i wanted to ensure the visuality and make sure that my overall content wasn't too heavy and text orientated. i also wanted to ensure that my design maintained a fun, messy presence which i think not only concurs with my visual style but it also makes the ibook more user friendly and more engaging for my level 3 target audience.

A quick experimentation with how i could make my image galleries look, altering the frame to the torn edges option which softens and and simultaneously separated from the simple orange fill placed behind it.

i also looked into some Bookry widgets which contain some potential interactive elements. although some of them are a little too formal or contrastingly somewhat childish (and not in a way that i could integrate them in well)- the sketchpad being one example. However some of the widgets, the youtube one for instance, the i tunes music and even the slider puzzle all look interesting enough for me to include within my ibook.

So after my brief experimentation with the Ibooks software i feel that it would be more prudent to simply experiment with the tools to create my own visual style, most of the interactive elements are fairly easy to navigate and i think its more about the design and aesthetics so i don't have to worry too much about technological structure as i do with  the website. i actually have a lot of the content already made on illustrator although i may need to think about creating some blander backgrounds specifically for the ibook.

The Pitch

The Pitch went fairly well, i need to have a little more focus to my i book but my design was generally well liked, i started by displaying my basic research and inspirations focusing a little more on Orla Keilly patterns and Edwards typeface to describe my logos and themes.

 The american typewriter font is my choice for body text and captions, it works well in contrast to my softer hand drawn vintage headings and is clear and easy to read.

 My colour palette and the buttons themselves are very much inspired by my subject matter, orange black and white mirror the monarch butterflies, the red orange is in reference to ruby throated hummingbirds, whilst the 2 tones of green and blue relate to the green darner dragonfly. the tan tone was an extra addition to incorporate a softer tone to contrast against some of the brighter ones chosen, my colours are very warm which which is why i felt the need to add blue- which will work well against both the orange and the green. i dont plan on using as much of the red colour since its fairly similar to the orange.

 these are some of the patterns that i've create each referencing my subject matter, i think they are my favourite aspect of my project so far and i cant wait to use them, my peers felt that they may be overwhelming so i plan to be very careful with how i place them together.

 this is a general mock up for a one page website - which i am actually now having second thoughts on- i dont like the image based background so i may have to create some softer ones to offset and work better with my patterns. at full size my website would be 2 columns, 2 columns again for the ipad and a one column for smart phone. ideally i'd like it to be one long page each section separated by a pattern and heading with image galleries at the bottom of each 'page' to finish. i'm not really sure what css i'd like to include it may require further research but i'd like to have a basic website set up and then add to it rather than include that initially.

my i book is going to be more pattern based although not quite as heavy  in my vague mock up again im not sure on its overall interactivity but i plan to play with animation to give my book some movement.

My Logo/ Headings so far...

The migration square ism y main logo and the inspiration for all of my other headings, i really liked the hand stitched style textural quirky style that i researched (Elle Edwards) so i decided to give my logo a very hand made organic feel to fully reference the natural theme  "wonders of nature".  like most of my previous work i wanted the my website and i book to be fun and have a fun element which is why ive also opted to use the silhouettes. i also liked the idea of interlocking shapes mostly inspired by Edwards and my own need to ensure overall continuity, which is why the a's, r's, d's and c's all link together. the black frames behind each are not part of the design only a means to portray the torn edges- ideally these would be placed on patterns that ive created that correspond to each heading to create the impression that the heading has been ripped out. overall im very happy with my logo/ heading designs which really help to give me an idea of my overall style and what i want it to look like.