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.