A New Year: FDA Year 2 |

|'ve now started my second year of my foundation degree. Our new brief was issued this morning and it entails us making a 20-30 second animation about activities that will reduce Co2 emissions. Here's a brief overview of this module:

"This module gives an introduction to animation practice by looking at existing commercial uses of animation, identifying underlying principles universal to all animation types and exploring specific animation techniques."

• The General Message
• Food
• Transport
• Consumption/Lifestyle

Our animation needs to be positive and encouraging. It should inspire others to act in a positive manor towards the environment. Whether that's through cycling instead of driving or being careful with non-recylable product consumption.

So far I'm keen on producing an animation geared towards one of the options below:

• Food Transportation
• Transport

Food transportation could be an interesting one to promote i think. It would have to address supporting locally sourced food, instead of ones that have come 1000's of miles over the world to arrive at their door. I'd like to find something that's different from my class mates, and I'm hoping that this will be. 

Here's an example of an art style I really like. Its simple and effective, utilising basic geometric shape.  

I'd like to also use stop motion in a small segment of my animation. I don't think that with the time constraint I've got I can achieve 20 seconds solid of stop motion, but to get in a few seconds in would be great. 

Evaluation |

Pre-pro:

As I'd stated in my initial post about the brief, I was expecting this to be a challenging assignment to do as it entailed learning a lot of new technical skills in order to complete the website. I quickly got stuck into doing side projects of my own, trying to learn my way around HTML and CSS after a few lessons and tutorials writing up simple websites. This spurred me on to do sketchbook work (brainstorming, visual language, styling and sketching etc) and get ideas down for my wireframes etc. By doing this early on and deciding on where I wanted to go with the site made the process a lot smoother than it could have been. Unfortunately I ended up having to change my design due to a design vs technical hiccup. Fortunately I had thought of a simpler design that would work responsively so I went with that. 

Production:

I was eager to continue designing after having a go at doing a side project by myself. I quickly got addicted to coding due to its constant problem solve nature. Its fun learning how to put the bricks together and take it apart, and then rebuild it again. Less challenging in some aspect was the iBook which I began working on a couple of weeks after the website. I felt because there was a lack of technical difficulty with this one that I had to make my layouts, imagery and all other visual language extra special to get the attention of the examiners.

Post-pro:

After I'd finished creating my iBook and Website I went onto do validating/accessibility tests. I used W3C markup validator service to search for any problems within my code that I needed to iron out before user testing began. Once this was done I used a variety of people to use my website. In a previous post called "User testing" you can see the screen recordings and my reviews of how things went. It was very important to do the user testing and I feel it has boosted my confidence in my design quite substantially. I also feel it will be very valuable later on when I could be working in a Ue/Ux team. This was in fact one of my favourite parts of the web process as it gave me some really good feedback on how things physically worked not just about how it looked.

This has definitely been my favourite project of the year, it been much more technically challenging due to learning HTML and CSS. I found the iBooks author fun to use also, but i don't think its something I'll find as valuable as learning how to code a website. I feel I've worked well with iBooks alongside my website which was something I thought I'd struggle with. I think the schedule and having a weekly 'to do' list has really helped me keep focused.

Testing | Validator + Accessibility

Site validation and accessibility testing successful! Above are screen shots as evidence. 

I then went on to run my CSS through Css Lint and W3C Css validator. As you can see from the screen shots above it has passed them both!

Testing | 1st test

As part of my website testing I have asked a few of my friends and family to test my website. I did the first one over skype hence why I'm in the bottom left giving instructions of what to scroll to. I found that my website didn't work nearly as well on this size screen (17" widescreen monitor). As you can see my girlfriend had to go to the normal scroll bar on the side before the actual navigation popped out, but as soon as it did she noticed it and began to use it. She commented about the smooth scroll feature and the navigation being very obvious even after some issues to start with. She faultlessly found all the things I was looking for and didn't get confused. This has increased my confidence in the usability of my website, but I am fairly disappointed with how the website responded at this size. 

For the next week I will be working on getting my website to work at this size as well as mobile size as it's currently not responding as i'd like. 

Organisation | Asset Register pt.2

Here is my second asset register that holds links and descriptions as to where all my content is sourced from. I used a total of 4 sources as you can see below in the spreadsheet. The most helpful was the BBC natural world source, and it was by far the most reliable too due to being broadcast by The BBC. 

Below is the final part of my asset register. It holds information about where i got my jquery scripts from for my website. I used smooth scroll effect on my navigation and a responsive image gallery in the first section of my website, both of which are documented in this document. There's also the fixing script i used on my scroll script to smooth it out. 

Organisation | Asset Register

Throughout this project I've been adding to my asset register. It is used to keep a record of where I get my images from and what they're used for. Below are numerous screenshots of my video/images asset register, it features 44 elements, with URL's and descriptions to support. I also have a text and jQuery code one which I will upload in due course.

Evidence of interactive design | Web + iBook

One of the main learning outcomes of this project was designing something interactive, taking into considerations interactive design principles and practices. Below are a few videos of the interactive elements that can be found in my iBook and website.

The following interactive elements can be found in my iBook:
- Scroll box
- Interactive images
- Pop-up boxes
- Google Maps widget
- YouTube widget
- Multiple answer quiz


And below are the interactive elements found on my website:
- Click button start with rollover
- jQuery image gallery
- Smooth scroll navigation
- Sticky horizontal navigation bar with interactive hover (opacity/position change)
- Hover sensitive images (rotate/size decrease)