interfacedesign-nicolenughe-blog

[interfacedesign-nicolenughe-blog]

TTE Reflection ~

It’s the year 2050, and the Great Barrier Reef is no more...This beautiful rainforest of the sea has vanished forever and now its only a memory to those who were lucky enough to be around, before the horrible destruction. Many factors were the cause to this terrible impact. One of the many factors includes Overfishing and Destructive fishing practices. This website was constructed to Call To Action people around the world in particular Australia to put an end to the destruction and help save The Great Barrier Reef and many other suffering coral reefs. 

This website enhances its users with interactive elements such as parallax scrolling trough the use of JavaScript and Jquery. Its ultimate purpose is to address the issue of Overfishing and Destructive fishing practices and how it is affecting our oceans coral reefs in particular Australia’s Great Barrier Reef.

 ~ Because the future of our reef are still at risk, and its up to our generation to put an end to the destruction ~ 

After experimenting with different screen sizes The Triangle Effect website is best view on a 13inch laptop via Google Chrome. 

[interfacedesign-nicolenughe-blog]

Future Opportunities ~

I believe the finalised version of The Triangle Effect website, demonstrates the expectations I had when designing for the brief with only some minor changes. However, if time and minimal experience of Javacript and Jquery weren’t a factor in this project, I would have loved to develop each page further and produced exactly what I said before in my proposed design layout.

Apply Responsive Layouts ~ A future opportunity for TTW would be to make the website more responsive in a way where it could be viewed on more than one device. At this stage the website can only be viewed on a 13inch laptop via Google Chrome. In the future I wish to extend this minimal limit and share the website not only through browsers such a Chrome but Safari, Firefox and possible Internet Explorer. This would benefit the Call To Action as it would reach so many more people and hopefully get them involved. Another factor would be to design the website for other screen sizes like a desktop and then for a smart phone and possibly a tablet. This would increase the comparability of the website and allow it to be viewed by more of its target users. This would benefit it in ways where the message could spread over more people and a change in society behaviour could occur more quickly and efficiently. 

Connect the User ~ Another future opportunity would be to connect the user from the Donate and Petition pages to a Facebook link where they can make an real donation using their credit card and sign a petition that will send through to WWF and help save The Great Barrier Reef. If time wasn’t a factor I would have happily suggested a link to an email opening in the users mail browser, as questions could also be sent to TTE campaign and a lot more interactive elements evident.

Interactive elements ~ As mentioned before if time and my knowledge of JavaScript and Jquery weren’t a factor I would have implemented a lot more interactive elements. These interactive elements may have consisted of a different type of Parallax scrolling, where the background would scroll rather then the text on top of the background. Transitions between each of the pages, maybe adding a fading effect rather then having a blank line rule out where one starts and finishes. With the impact page having each element appear after the user has either hovered over the position of clicked on the page, enhancing the websites interactive atmosphere and lastly the petition page. In my originally idea I wanted the envelope to be animated so when the user filed out their detailed and clicked “Sign Now” the envelope would close and fly off the page, representing the petition being sent to organisation.

However, due to time restrictions, I unfortunately could not implement all these factors and therefore have addressed them for the future.

[interfacedesign-nicolenughe-blog]

Problems ~

A Problem that occurred was an additional section that was attached after the last section being the Petition page. To embrace this problem and make is less then a problem and more of an opportunity I changed the background colour to suit my website and overall made it cohesively tie into the websites theme.  

Another problem that occurred but was successfully resolved was an additional section on each of the pages to the right that extended beyond the background image, much like the problem above. To resolve this I had to go back into the CSS and make my top, bottom, left and right codes margin-top, margin-bottom, margin-left and margin-right. This was so the elements in that code would move as an absolute freely in front of the background image rather then 100% from either side of the image, decreasing the additional section on the right. I managed to obtain the elements and fix the problem, which was a nice achievement as I was really stressed about it beforehand. 

[interfacedesign-nicolenughe-blog]

Additional UI Explanations ~

Why Clicking? ~ Originally I was going to have all interactive elements work through the use of the user scrolling. Although, through exploring the Javascript and Jquery I decided due to my knowledge of the two to change the scrolling idea to a button clicking idea. This minor change allowed more flexibility with time as I wasn’t putting as much pressure on myself as I wasn't too confident with Jquery and JS. I made it that when these buttons were clicked the page automatically scrolled to its <h ref > link.

Here are some examples of clicking rather then scrolling ~ 

In this case the first image when clicked would automatically scroll to the second image. The user could either click, “TAKE ACTION”, “The Triangle Effect” or the TTE Logo for this to work.  The second image displays the two options of making a donation or signing a petition. When these buttons are click they do the exact same. They scroll to the linked page that adressses that topic. Although there is the clicking option the user can still scroll through the page manually, changing to the next page in their own time. 

[interfacedesign-nicolenughe-blog]

UI Explanations ~

Through the entire website I have used parallax scrolling. This interactive element is very simplistic and reflects the mood of the website. Every page in the website displays an interactive element which enhances the user. This has also been reflected through simplistic and minimal text and the use of imagery. I wanted to include a four page introduction for TTE website as I wanted the user to know what the issue was and basically what the whole website was about until they got to the Title page and into the data and information.    

The following pages are two that stand out the most as they can be considered as the most interactive ~ 

These two pages have been developed and designed with the use of Illustrator, Html, Css and Java Script. Each image has been design in Illustrator and imported to the correct position via CSS and Javascript. This JS code enabled my visions for the interactive charts to come to life and evolve.

[interfacedesign-nicolenughe-blog]

Additional ~ UI Experiments ~ Screen Sizes 

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. :) 

[interfacedesign-nicolenughe-blog]

UI Experiment ~ Different Screen Sizes

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. 

[interfacedesign-nicolenughe-blog]

UI Experiments ~ Different Screen Sizes 

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. 

[interfacedesign-nicolenughe-blog]

UI Experiments ~ Different Screen Sizes ~

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. 

[interfacedesign-nicolenughe-blog]

UI Development & Experiments ~ Coral Interactive Chart ~

Through the use of Java script I was able to achieve my vision of creating an interactive chart that would enhance the users experience, connecting  between themselves and my website. 

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. 

[interfacedesign-nicolenughe-blog]

UI Development & Experiment ~ Interactive Charts

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). 

[interfacedesign-nicolenughe-blog]

UI Development & Experiments ~ Interactive Charts  ~

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. 

[interfacedesign-nicolenughe-blog]

UI Development & Experiments ~ Interactive Charts 

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. 

[interfacedesign-nicolenughe-blog]

Additional ~ UI Development ~ JS & Jquery

By using the cloud example I was able to link the JavaScript and Jquery plugins to my very own pages and create a parallax scroll effect. This effect was not only utilised for each section transition but also in a href for specific buttons. This effect is evident throughout the website. If time wasn't a factoer I would have liked to incorporate this interactive element to the background of each section rather then just the context and imagery. This would have enhanced the user a lot more then the present design. 

[interfacedesign-nicolenughe-blog]

UI Development ~ Parallax Scrolling

Html & Css: These images demonstrate the coding I had to utilise to achieve the parallax scrolling evident in my website. From 12 sections in the html representing each page to the 5 factors in css creating the navigation scrolling. Both html and css work hand in hand together, without one or the other, mistakes and errors, this parallax scrolling feature may not have worked the way I had wanted it to.

Inspiration ~ http://parallax-scroll.aenism.com

[interfacedesign-nicolenughe-blog]

UI Experiments ~ Parallax Scrolling 

This Parallax Scrolling video demonstrates how a user visiting my website would navigate their way through each page. As the user scrolls the text on the pages slightly move down with the scroll. The navigation bar also uses parallax scrolling as when the user chooses a page number the screen automatically scrolls. Overall, I’m really happy with how the the scrolling turned out. In the future incorporating some sort of faded transition between each page may increase the websites interactively, but for the amount of time I had to produce a 12 paged website I am still really happy with the end result.