Reflection on AF103/106

Overall I've found this combined unit to be a very challenging one. The task of managing 2 projects in parallel was something I found particularly difficult as one project was always being neglected in favour of the other one. The requirement to produce a production schedule was something that did help me quite a bit as it helped me place what I was doing on any day/week into the context of the whole project very effectively.

One aspect I did really enjoy about having two projects at once was the fact that if I got particularly fed up or stuck with either project I could take a break from it while still being productive and working on the other one. I also really enjoyed taking basically the same content and laying it out in two very different contexts and using two very different skill sets. Learning html and css in a structured way instead of the very poor self taught stuff I'd done before was also refreshing.

The fact that the whole class was working on separate subjects as part of the same series and getting to choose our topics was quite exciting and helped me get enthusiastic about the project from a very early stage. I think both my projects have turned out how I had hoped and that they retain a consistent design style across both, while adding just enough variety to keep them interesting.

Reflection on my Schedule

At the beginning of the project I drew up a production schedule to help me manage the project, as it was twice the amount of other projects:

At the beginning I stuck pretty well to my schedule but as the project progressed everything became far more compressed towards the end. The main reason for this was most likely my iBook being far more work than I thought, so it became slightly neglected and ended up running a little over the self-imposed deadline. My 2 weeks of finalising my website were also too much and in future web projects I will only leave one week for finalising, depending on the size of the project.

Using jQuery for my Sticky Nav

As I thankfully had the time to, I decided to try and implement a 'sticky' navigation bar using jQuery. The way it works is reading the scroll position on the page and when it reaches the point where the navigation is at the top of the page, it changes the position of the navigation element to 'fixed'. It is also assigned a z-index which allows the content to slide underneath it. To prevent the content from jumping up to the top of the page when this happens padding equal to the height of the elements that become fixed added to the top of the content wrapper.

The added z-index is also helpful in keeping the drop-down part of the responsive navigation above the main content of the page.

Making My Menu Responsive

To meet the requirements of the brief, I had to make my navigation system fully responsive using the @media screen and (max-width: npx) CSS function. To do this I controlled the column count, width, max-width and display properties.  Here is my navigation at full screen width:

When the screen reaches a width of 1006px, the triangle elements disappear using the display:none; function and the menu bar wraps in from the sides. The reason I did this was that the ribbon elements of the nav bar were fixed in place using absolute positioning, making it virtually impossible to scale and move them in a smooth and responsive way.

The next major break point for my navigation came at 720px (iPad portrait.) This collapsed the menu down into a drop-down format. The menu icon indicating a drop-down menu also became visible.

In order to have the contents of the menu slide down over the rest of the page, the nav element was assigned a z-index of 9999 (just to be sure!)

Live Storm Tracker

To make my website much more interactive, I decided to embed a live tracker for storms in Tornado Alley. After some searching I found an amazing one where you could stream live footage from over 100 storm chasers and comment on the inline feed that was linked to Twitter. It first I thought it would be as easy as reading through their source code, finding and downloading the flash element and then putting it up on my own website. Sadly due to the way their website was structured, most of the content was being stored on separate places within a server and being referred to by the flash element, making it impossible to use. I then decided the best way to include this information would be to use an iframe element to embed their entire web page into my own.

The only problem with this was that I ended up with the whole menu system, ads, logo and footer of the Tornado Alley Live website being visible. The change this, I placed a div element around the iframe and used the following CSS to zoom, fix and scale the contents of the iframe. I also removed the scroll bar from the iframe to make it impossible to accidentally move the contents, as well as keeping the scroll wheel functionality working on the Google maps portion of the embedded web page.

 Here is a screenshot of the live storm tracker and twitter feed running within my web page:

Menu Dropdown Logo

As a small design feature on my website I decided to part from the norm by slightly altering the what has now become standard icon for drop-down menus. I shaped the bottom 3 lines to try make it resemble a tornado.

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.