Interactive iBook Graphics

After looking at some other iBooks, I noticed that the use of interactive images made using the iBook a far more enjoyable and engaging experience. I decided on making some pop-up images to entertain people a bit more. I decided to take the information about each of the States in Tornado Alley and put them into an interactive image, where the information pops up when tap on certain buttons. To achieve this I inserted a map of Tornado Alley as a regular image and added my own 'Pop-Over' buttons using the iBooks built in widgets. Below is my mockup in my sketchbook, as well as a screenshot of how it turned out:

Another opportunity I saw for interactivity was the content about storm shelters. For this I drew up a cross-section of a typical storm shelter and inserted it into the iBook as an interactive image. I did this so I could create more dynamic and zooming views using the set view button, to create some variety from the other pop-up style widget I used. The whole image was created at 3x the normal iPad viewing resolution to ensure clarity even when zoomed right into a portion of the diagram.

Color Scheme Change

I've also decided to change the colour scheme slightly and desaturate the whole palette because I felt it was distracting and the coloured text made it very hard to read.

First colour palette:

New palette:

My aim with the change was to get it looking a lot more punchy but easier to read. I also brightened up the background very slightly to rebalance the colour and to avoid the whole site looking a bit too grey.

Logo Change

I had pretty much finalised my logo design but I've had a change of heart and wanted something much simpler and something that could easily have a transparent background, so as not to distract from the rest of the design. I also wanted to work in 'Wonders of Nature' somewhere to highlight that its part of a series.

The original logo:

And my revised version:

I think it comes across and far more modern but still keeps a sense of fun with the sketchy texture of the clouds. Overall I am happy with it.

Redrawing Graphics

As explained in my previous post I needed to redraw my graphic showing how storms are formed to look more professional and cleaner. Below is my version:

 And the original:

I think that used much more muted colours has definitely given the graphic a cleaner look and that it will fit into my design far better.

Post Crit Feedback

After the Crit I received a number of feeback points, some of which will be useful when I start to refine my designs. The graphic I planned to use to illustrate how tornadoes form (below) was generally seen as a bad choice. I have now decided to redraw the graphic using Illustrator, in a way that better suits the overall feel of my designs. I also need to make it look a little bit more professional.

 

Another criticism was that the font I used for my logo didn't go with the rest of my design as it was too detailed. I plan to explore some other fonts to try and recreate my initial idea but in a cleaner and simpler way. 

Some people also felt that my colour scheme could be a little more muted, but this is something that I can change as I go along.

Style Tile

In order for me to gain and idea of my visual style without worrying too much about structuring, I designed a Style Tile to showcase my chosen visual language. These visual choices will be used on both my website and my iBook to keep consistency between the two. 

For the heading and body font I chose Lato, a free webfont available through Google Fonts. I chose this particular font because it came in a variety of weights and styles, making it very versatile. For my colour scheme I used photographs of tornadoes as my inspiration.

 

Wireframes

To help me plan out my website and give myself a clear idea of what to do when I begin coding I used the online tool Moqups to generate my wireframes. I've designed them at a mobile, tablet and desktop size but I will define actual break points when I start coding.

Style Tiles

To demonstrate our visual style for the pitch I need to design a 'Style Tile' showing my visual choices. Style tiles contain all of your visual design but with little to no reference to the actual structure of your website. Below are some good examples of style tiles I've found with researching the topic:

Research Into Responsive Design

To help me keep my design relevant I decided to some research into existing responsive design. One site that I really liked was the Mozilla website, below is the full sized desktop view:

The first break-point (tablet view) only restructures the second banner, bringing the list items below the 'Different by Design' text. The logo and top navigation are also scaled to give the site cleaner vertical alignment.

The next break point (mobile/small tablet view) brings the first drastic change to the structure of the site. The top navigation is condensed into a drop-down box to help optimise space. The logo and banner are also totally restructured, losing the bullet points.
The content boxes are stacked vertically, rather than arranged side by side.

The site also accommodates much smaller mobile phones with its last break point. Apart from scaling, the only thing that changes is the 'Different by design text is stacked.

From looking at this website and others (Starbucks, Mashable) the most drastic changes happen when changing from tablet down to mobile view (structure and navigational changes), with the difference in tablet and desktop view mostly being about visual reordering.

Gathering Assets

For the content of my website I've been using the Weather Explained site (http://www.weatherexplained.com/Vol-1/Tornadoes.html) as a source for most of my text, as its a fairly exhaustive and well ordered article on every aspect of a Tornado. Images I've gathered so far have been from a combination of Google image searches, scientific websites and personal blogs, including storm-chasing blogs.

Tornado at Union City, Oklahoma Credit: NOAA Photo Library

Hierarchy of Information

Now that I've decided that my chosen angle on storms is going to be tornadoes, I organised my information groups to help inform the structure of my website and iBook. 

Intro to AF103/AF106

In this assignment you are going to produce a piece of interactive documentary narrative which utilises a wide range of media, delivered as an iBook for the iPad, and as a responsive Website that will display on Desktop, Tablet and Smartphone devices. 

Although all of these products will be part of a ‘Series’ there will be no overarching ‘theme’. You will all develop your own visual approach that will be consistent across your own products.

  
I think this project is going to be more demanding than the previous ones and that time management is going to be crucial to succeed. I think working on 2 projects for the same content is going to be refreshing but I'll have to make an effort to make sure neither is neglected.