Information Graphics

Tuesday, October 15, 2013

Rationale

The chosen info graphics theme, homosexuality, is to be used to create awareness and help people understand more about what it actually means to be part of the LGBT community. The user then becomes a school kid or young adult, being educated through facts. This meant the info graphic had to invite the user to interact and hold their attention. I have done this by the colour and over all aesthetic, keeping the style simple and consistent. By keeping the body of it simple it allowed me to use spot colour to draw attention to parts and incite people to go deeper. The info graphic has particularly strong interaction and facts in the marriage equality page where users can use a timeline to show change over time, click on countries for information to show up and even zoom into Europe and the USA to look at those smaller areas. What is also a key element of this info graphic is that it is quite humble, a nice compliment to homosexuality being so political and opinionated, it still allows for the viewer to make up their own mind, but is left knowing more about homosexuality.

If the info graphic was to be taken further a development of interactivity and animation of the facts and imagery would be beneficial. Also getting the scroll through the LGBT sections would complete that section and bring a more complete sense of flow through the info graphic, this could also be bought through to the whole info graphic - having smooth transitions through the whole site. this will take away any crudeness and help the user to keep a sense of where they are.

Final infographic

Home page - the home page also acts as a main nav point, the user can go to all the pages from this page. This page is also the basis for the rest of the design throughout the infographic.

Mariage Equality Page - this page has the most interactivity using clicks on the country to bring up info, interacting with the timeline to change the visibility of the countries according to what year marriage became legal in the country. It also has two zoom functions for the smaller areas (USA and europe)

Mariage Equality USA zoom page

Mariage Equality europe zoom page

LGBT page, break down of the terminology. Nav bar down the bottom, shows what page you are on and how many pages to go.

roll over function to reveal the definition of each letter

For the transition in pages I wanted it to slide along, but due to time I wan't able to apply this to the rest of the section. So I involved it in one place to show what it would look like if there was more time to further it.

roll over to reveal the meaning of each part of the flag

coming out page, provokes the user to roll over the people to challenge them if they have an idea of the fact already.

fact reveals itself

this page doesn't have much interaction, but if there was time it could be furthered to involve animation or interaction by playing on the scale and weight idea.

another page that could do with further development and interaction, at the moment the fact appears when you roll over the country.

Discrimination page - on this page I have focused on bullying in school against LGBT students, using the apple as a focal point to relate to school.

roll over the dots to reveal a fact about bullying, with an image mirroring the fact in and outside the apple. Not all the buttons are working as time limited making them all active. So five are working, the top three on the left are non active.

Animal page - dingbat like forms for the animals are interactive when you roll over them, bring up a fact and some sort of imagery to show the fact visually.

example of what happens when you roll over.

if the info graphic was to be taken further a development of interactivity and animation of the facts and imagery would be beneficial. Also getting the scroll through the LGBT sections would complete that section and bring a more complete sense of flow through the infographic, this could also be bought through to the whole info graphic - having smooth transitions through the whole site. this will take away any crudeness and help the user to keep a sense of where they are.

Development of homepage

development of my homepage, also creating a base for my overall design aesthetic

Wireframing

Home page, symbols are shown to indicate the 4 pages, with a hover function to show the name of the page

Marriage Equality page, click on the country to bring up pop up information. Time line changes colours highlighting the countries to indicate change over time.

Lgbt main page, information starts right away, click next to go on, nav bar down the bottom so you always know where you are.

further pages, 7 main ones in totally

Lesbian page. elaborates on the L section of LGBT

further pages in the lesbian section, 5 total pages

Gay section

further gay section

Wireframe of infographic

http://en.wikipedia.org/wiki/HMNZS_Canterbury_(L421)
http://www.behance.net/gallery/Homeless-Youth-Infographic/1154207
http://www.b2bmarketinginsider.com/strategy/8-great-marketing-infographics-to-inspire-your-2012-objectives