Final info-graphic

Rationale 

For my info-graphic I chose the subject of Newtons laws of motion. I found that something based on a physical aspect would lend itself very well to the brief. To illustrate the three laws of motion I have used a small robot (New-Tron 4000) to show an aspect of a topic, often seen as boring.

In terms of style I wanted to create a very bold and eye-catching design, that would give off a sense of energy. For the character and object design, I have opted for a very simplistic style. This gives a very attractive overall aesthetic, the simplicity of the objects I think helps to emphasis the animation in the info-graph. Since my subject matter is something physical, animation became a very crucial aspect of my info-graph.

For interaction, I have a lever on each education page both explaining and demonstrating one of the three laws of motion. At the end of the these three educational pages I have a quiz. The quiz is what I really wanted  the viewer to engage and interact with, the questions in the quiz are all multi choice buttons. The questions are formulated on the same principle as their respective law, however challenge the viewer to think about it in a different way. For example the first law example shows an object in motion remaining in motion. But the question asks what would happen if an object at rest is atop a moving object. The user must come to the conclusion, based on what they have learnt that the moving platform does not have the force to overcome the robots inertia.

Info-graphic Progress

Some progress pictures from my info-graphic, which contains explanations and demonstrations of the three laws of motion. Along with these are three tests at the end of the info-graph, testing what the viewer has learnt. All the tests are simple true or false, or multi choice questions. I added the quiz at the end to add some more interaction to the info-graph that would have the user actually have to think about what they have learnt and apply it.

Imagery and Layout

My general layout, imagery and robot for my info-graphic.

Paper Prototype

Splash page has the title and definitions of the laws in old English. These are added in an attempt to confuse the viewer in a way to entice them to view the info-graphic.

 First Law; 

projectiles persevere in their motions, so far as they are not retarded by the resistance of the air, or impell'd downwards by the force of gravity. A top, whole parts by their cohesion are perpetually drawn aside from rectilinear motions, does not cease its rotation., otherwise than as it is retarded by the air. The greater bodies of the planets and comets, meeting with less resistance in more free spaces, preserve their motions both progressive and circular for a much longer time.

Second Law; 

If any force generates a motion, a double force will generate double the motion, a triple force the motion, whether that force be impress'd altogether and at once, or gradually and successively. And this motion (being always directed the frame way with the generating force) if the body moved before, is added to obstructed from the former motion, according as they directly conspire with or are directly contrary to each other; or obliquely joyned, when they are oblique, so as to produce a new motion compounded from the determination of both.

Third Law; 

Whatever draws or presses another is as much drawn or pressed by that other. If you press a stone whit your finger, the finger is also pressed by the stone. If a horse draws a stone tyed to a rope, the horse (if I may say) will be equally drawn back to-wards the stone: For the distended rope, by the frame endeavor to relax or unbend it self, will draw the horse as much towards the stone as it does the stone towards the horse, and will obstruct the progress of the one as much as it advances of the other. If a body impinge upon another , and by its force change the motion of the other; that body also (because of the equality of the mutual pressure) will undergo an equal change  in its own motion, towards the contrary part. The changes made by these actions are equal, not in the velocities, but in the motions of bodies; that is to say if the bodies are not hinder'd by any other impediments. For because the motions are equally changed, the changes of the velocities made towards contrary parts, are reciprocally proportional to the bodies.

To illustrate the laws a small robot, named New-Tron 4000, is used to give a fun aspect to the laws (previously seen as complicated).

To portray the first law I am going to have the robot roll along on a skateboard before hitting a wall and loosing his head. This shows the law of inertia.

For the second law will be shown with the robot being hit by a hammer in demonstration of the equation of acceleration (F=MA). 

The third law is going to be shown with the robot being shot from a cannon, and then the cannon rolls back showing the reaction.

Type options and colour palettes

Potential Colours schemes and fonts. I want the colours to be bright and quite vibrant, but not to overpowering. The type, being one of the more important parts, needs to be easy to read.

Write up of information

First law

An object at rest will remain at rest unless acted on by an unbalanced force. An object in motion will continue in motion with the same speed and in the same direction unless acted upon by an unbalanced force. This first law is often referred to as the law of inertia.

This means that objects have a natural tendency to keep on doing what they're doing. All objects resist changes in their state of motion. Without an unbalanced force, an object in motion will maintain this state of motion.

Second law

Acceleration is produced when a force acts upon a mass. The greater the mass (of the object being accelerated) the greater the amount of force needed to accelerate the object.

The heavier the object the more force is required to move it the same distance as a lighter object.

The second law gives an exact relationship between force (f), mass (m) and acceleration (a).

F=MA

FORCE= MASS times ACCELERATION

Third law

For every action there is an equal and opposite re-action.

For every force there is a reaction force that is equal in size, but opposite in direction. That is to say that whenever an object pushes another object it gets pushed back in the opposite direction equally hard. 

Information gathering

Information gather on Newtons three laws of motion and some ideas about the kind of animations I could use to illustrate each law.

Info-graphic Brain storm

For my info-graphic I would like to explore or explain something to do with technology or science. For example something explaining components of a computer, what they do and how they work with each other.

For technology, in terms of style I think something that would contrast the typical look of technological. Something like using flat solid colours or even just a paper texture.

For a science info-graphic I think visually explaining a simple theory of aspect would be quite interesting. For example one of Newtons Laws, I think could produce some very interesting little animations to explain the laws of gravity or motion.

In terms of style I think something very bright and vibrant that would really capture the viewers attention would work very well. As some people may be put off due to the fact it's to do with science.

Assignment 2: Info graphics

Final Website

Rationale

For this brief I chose to do a redesign of the Adversity Gaming website- a New Zealand based competitive gaming community. For the site I wanted to create a very simple minimalistic layout that focused on clarity and easy navigation.

            To do this stylistically, I chose a simple colour scheme that consisted of one shade of dark grey for type and boxes with a shade of red for important titles and links.  I created a simple and functional layout using the 960-grid system. This way my site can fit into a browser with a width of at least 840px. I chose not to add any background images, or unnecessary aesthetics as I found they only distracted from the actual content of the site.

            Most other gaming related websites I researched appeared very dark and often consisting of grunge and/or metallic textures. I chose not to have a dark aesthetic for my site. Instead I went in the complete opposite direction and chose a mostly white colour scheme for the site. This is purely as it reflects the AVT brand better as their logo has a white font with grey and red outlines. This is reflected with a grey toolbar and footer to frame each webpage.

            The aim for my site was to give the target audience the information they require quickly and effectively. Based on my research into the community, I found the most viewed and used area of the site were the forums. The gaming sections of the forums were the most popular, telling me that more focus should be put on the games as opposed to social media, or galleries etc.  I have now introduced a separate games section with published guides/ strategy section and links to the forums. To retain the social media aspect, I included a small fixed toolbar along the top of the page. This toolbar contains account sign in and sign up links, along with this I have included outgoing links to AVT’s Facebook, Twitter and YouTube pages.  .

            To create my site I used DreamWeaver CS6 (HTML5) for all the pages. I used Jquery on the Starcraft II page to get tabs that change the content for the guides.

            Given more time to work on my website I would like to expand the forums. I would like to add some of the actual posts from the AVTs forum, or at least some of the sticky threads. The only other thing I think the site could use is a small profile page, although they weren't used all that often on AVT. A profile could have things like  preferences and settings for forum posts, for example: setting a signature image, profile pictures, maybe links to independant YouTube accounts etc.

          

        

*All screenshots taken on 1600x900 monitor 

Post test

After testing my site on a few people from the appropriate age group, only a few things needed to be changed: An about paragraph on the index page, briefly summarising AVT and what they do and are about. A sign in button along the tool-bar. Also to have the terms and conditions open in a new tab or window.

Website before testing

I have the all the pages for my site, and will now begin testing my site on the target audience. The target audience being young gamers (16-mid 20's) who are more interested in the competitive aspect of gaming. I have a number of friends, some of who are part of AVT, and range from age group specified.

 From my last post I have integrated a fixed toolbar along the top of the pages. These have links to AVTs Twitter, Facebook group and community YouTube channel. I have removed the background gradient as on some pages, particularly those with lots of content (guides section) became too cluttered for what I had intended.

A few screenshots of some of the finished pages

Website progress

Some screenshots of my website in it's current state. I have and will probably continue to try and refine my site to what it only needs, while still being easy to navigate. AVT's current site has a lot of content, however most of the traffic on the site, is in the forum section. Mostly do with the games themselves, so I have tried to make that more predominant. Also I have found that the media section of the site isn't all that useful, as all the photos from there can be found on AVT's Facebook site. Which I can assume means people prefer to use Facebook for viewing photos of events etc, instead of AVT's site.

Development

My initial site with the changes. I have begun codding my site using the 960 grid system as a layout template, to help me keep all the elements inline.

Changes to initial web concept

Some changes to my initial web concept. I am going to try and us the space of the document 1024x768. For the tool bar I may change it to a dark grey, or something that will contrast the white and grey background of the site, this will also help with drop down menus. A search bar function for the forum page. For the games the media option will be removed, as there is already a dedicated section in the forum. Scrims will be linked to the forum, guides will be to separate pages (if I am given permission to use guides from other sites). More space along the top of the site, for a larger logo (similar to the original site) along with a tool bar along the top with a link to sign in via Facebook and/ or Twitter and a create account button.

Wireframes

Wireframes from my website so far

Week 3: Learning divs

screenshots of clas