#UIExplanations

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