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

SECTION: Homosexuality in the animal kingdom

Sources:


http://guardianlv.com/2013/08/homosexuality-within-the-wildlife/
http://www.learnanimals.com/giraffe/

Documentary that has given me a wider and better understanding of homosexuality and american religion.

SECTION: LGBT

LGBT = Lesbian, Gay, Bi-sexual and Transgender

Wireframe final. Basis of LGBT section. 

sources:
http://www.transgenderlaw.org/resources/transfactsheet.pdf
http://en.wikipedia.org/wiki/Bisexuality
http://www.rainbowhealthontario.ca/admin/contentEngine/contentDocuments/Bi_Health.pdf
http://factsaboutyouth.com/uncategorized/cdc-facts-and-statistics/
http://en.wikipedia.org/wiki/Transgender
http://en.wikipedia.org/wiki/Gay
http://en.wikipedia.org/wiki/LGBT_symbols
http://www.princeton.edu/~achaney/tmve/wiki100k/docs/Hermaphroditus.html
http://www.lambda.org/symbols.htm
http://www.galperlaw.com/gay-law-report/gay-facts-statistics-2013/
http://www.thebody.com/content/art2449.html
http://data.lambdalegal.org/pdf/158.pdf
http://www.diversityinc.com/wp-content/uploads/2012/05/LGBT2012FactsFigures.pdf
http://www.messenger-education.org/elusive_planet/merc_symbol.php
http://facts.randomhistory.com/facts-about-lgbt.html

SECTION: Marriage equality in countries

A3 scans of information gathered for info graphics, also a drawing of the purposed design for the pop up.

sources:
http://en.wikipedia.org/wiki/LGBT_adoption_in_the_United_States
http://www.freedomtomarry.org/

Imagery:

In the infographic I want this section to be one big map of the world with the countries where marriage is legal to be highlighted in a contrasting colour. Places like the USA, Mexico and Europe where the countries get quite small there will need to be a function to "zoom in" so these places can be seen clearer. Further information will be able to be reveal by a roll over function so when a country or a state is clicked information pops up in text and visual form. Some of this information I have in the paper work above.

Inspiration/Design:

http://www.freedomtomarry.org/

 

http://en.wikipedia.org/wiki/File:World_homosexuality_laws.svg

http://weddinglovely.com/blog/gay-marriage-infographic-by-simplybridal/

http://blogs.phillymag.com/gphilly/2013/05/15/infographic-united-states-marriage-equality/

http://en.avaaz.org/679/13-countries-doing-the-right-thing-on-gay-marriage

Colour pallet works well using the iconic pink and blue for girl and boy.

Template Research

To save time I am going to need to find an already made up map of the world and maps of Europe, Mexico and USA for the zoomed in parts.

Europe

USA

World

Mexico

 The grey ones are sourced from Wikipedia and are all blank, These maps look like ones other people have sourced for their own projects. The grey is fine and it should fit in my non aggressive colour pallet which I am trying to use. All of the imagery sourced are large images from the web, so heres hoping for no pixels.

Taking the blank map and adding pink in for the countries that same sex marriage is legal is and a yellow colour for the areas that have some states that allow same sex marriage (USA and Mexico)

To develop and design:
*USA
*Mexico
*Roll over template