#uiexperiments

After experimenting a a few different screen sizes it was evident that the website is best viewed on the Chrome browser and on a laptop screen around the size of a 13 inch. ~ This has been shown in the last image. For maximum experience I would also recommend viewing the website in Chrome and maximising the screen via the green button. :) 

125% ~  When viewing TTE website on a Windows 21inch desktop there were a few issues that occurred. The first issue was that the website had to be viewed at 125% and the second was that some elements weren't where they were meant to be when view on a laptop. This was because the measurements were out of proportion as I had designed everything for and on a 13inch Apple Mac. 

Normal Viewing: Command 0 ~This is what TTE website looked like on a 27inch screen viewed at 100%. As shown the background image hasn't maximised to fit the screen. This may be due to the html and css set up as I have purposely created the website to fit laptop screens. In the future I may change this factor and include other screen sizes to create a more comparable website. 

175% ~ I noticed when viewing my website on a 27inch Apple computer I had to maximise the screen to 175% in order for it to take up the whole screen. This was because I designed the website for a laptop screen. When viewed on the 27inch I noticed that everything still worked and the website was actually fine, other then the screen viewing increased. 

The first image is of my html and how I’ve had to insert each element into the web layout. The second image is of the css that was relevant with the making of the coral chart. This is where I positioned each element directly, one by one, to match the design layout of my Illustrator wireframes. The last image is of the Javascript that was used to create the interactive clicking. 

This video showcases my second interactive chart of how the issue of Overfishing is affecting our coral reefs. The first button is of 2000 and the coral to the right of it is looking alive and healthy. The second button is 2005 and this is where the coral changes colour. This colour change represents the impact of overfishing and how its affecting reefs around the world and in particular The Great Barrier Reef. The third button is 2015 and this too shows how overfishing and destructive fishing practices are affecting coral reefs as the coral has become whiter and has minimal colour. The last button, “button 2050″ represents what the future holds. This is basically suggesting that if we don’t act now in the near future we quite typically won’t have any coral reefs and The Great Barrier Reef will have been just a memory. It will have been complete whipped out. This is represented through the coral changing its colour from orange to completely white (death). 

To create this interactive chart I firstly structured its layout through html and used the css to determine all of the elements exact positions. With the help of Javascript I was able to create a clicking interactive element and seen through the video and evidently displayed through the third image. 

This video showcases my first interactive chart about Overfishing and who in society understands, has an idea, trying to stop it and people who don't think its important. As more people understand it is an issue I wanted to help that percentage and create a website that can cater for their needs and provide them with information and data, and ways they can prevent the issue and be apart of the solution. This website will also provide information and create awareness to the percentage that have no idea about the issue and hopefully change their perspective about it.