The Problem with Piracy and Australia

Interface Design - Christopher Taylor

[christopher-james-taylor]

Project Reflection

-- Overall --

The project of creating the website was a challenge for myself in a couple of ways. For me I had never worked with bootstrap before and nor had I worked with skrollr either. Having these two options, as well as jquery available were a major help in creating the website that I wanted. Overall there were a number of plans that i wanted to complete, such as the block form for the ‘alternatives’ section. These however, did not happen due to time and knowlegde constraints. 

-- Design --

The design of the website did morph and change as I started to code. Through also studying typography I gained a greater appreciation for it. I decided to change the look of the website from being white font on a black background to change it to the opposite, black font on a white background. This was mainly decided as I didn't want a website that was too harsh to the eye but something simple and effectively told the facts in black in white. 

I decided to keep the logos in the website in their original colours to add some difference to the website, besides the large video.

 I used Raleway 100 weight as my main font for h1 and h2 text, the main body font for quotes was Kohinoor Devanagari weight 200. The  main reason as to why was due to the fact that Helvetica is not naturally occurring on windows devices, so therefore for many windows users the wanted font would not be known.  

It is well known that many people are visual and when they peruse websites they prefer visuals compared to lots of text as they may not even read it. Comparatively I decided to only implement a smaller amount of images as I didn't want to deter the reader from the main facts and opinions that make up the main justifications of the debate about online piracy. This is keep an on the fence attitude and not make it one sided. A ‘present the facts, and they can make up their own mind’ approach was taken. 

-- Improvements -- 

Further knowledge on being able to control elements and fix them in place for a full responsive design, no matter the screen size, would be one improvement that I would love to take on. Currently the websites elements, such as the alternatives section, start to break down depending on the screen size.

-- Future --

For future websites I would like to take on a more full on topic that has more graphic detail to tailor the website to a more visual spectacle. I would also like to learn more cursor and jQuery interactive elements so to create a more interactive intuitively design website. 

[christopher-james-taylor]

Website Progress - Update 3

The website has now been completed in all sections. Minor fixtures is all that is left to be done with the website.

[christopher-james-taylor]

Website Progress - Update

As of now three out of the four sections are complete. the third section still needs some modification for the hover information but that is easy enough. from there the last section will be completed and touchup made.

[christopher-james-taylor]

quick video showing the current progress of the website so far

[christopher-james-taylor]

bootstrap and skrollr elements have been implemented into the site as of now. when you scroll down the menu will lock into the top. as when you are at a particular section that sections menu item will be highlighted (as shown above). I have also implemented a “to top” button. this will send the user to very top of the page.

[christopher-james-taylor]

the creation of the website itself has officially begun. This is currently what the entrance page consists of. What I want to do it have the tabs at the bottom of the page then get them to move to the top. still deciding on what i want for the rest of the entrance or to just keep it plain and simple

[inspiremyweb]

CP + B

[christopher-james-taylor]

UI Inspiration

Large visuals with background videos that move as you scroll as well as blocked content that is interactive

[inspiremyweb]

Welcome to Thunderdome

[christopher-james-taylor]

UI Inspiration

entire screen interaction with large visual elements. Text that isn't static as well as background videos that create stimulating experiences for users of the website.

[christopher-james-taylor]

Competing Works - Infographics

One of the internets most popular forms of displaying structured information in an engaging way is through the use of Infographics. Infographics are just visual forms of information. It is easier for people to vie information in a visual way that is easy to read and understand then a list of information. People are more likely to read a webpage if it is visually stimulating.

The above infographics are of three different topics, piracy and its connection to the music industry, the cost of piracy, as well as what the most pirated content in the world is (as of 2010).

Infographic One - The Risks of Music Piracy in 2013

Infographic Two - The Music Industry and Online Piracy

Infographic Three - What’s the true cost of piracy?

Infographic Four - Online Piracy in Numbers

[christopher-james-taylor]

Competing Works - The Industry Itself

Other ways that information about piracy, is accessible is from the industry itself. Village Cinemas has released an informative webpage that explains what piracy does to the industry and their co-operation with the Australian federal government copyright body.

Whilst this does provide the facts about piracy and its affects in Australia, the webpage itself is not very engaging. Most Australians, would never find the page, never read it, nor be interested to get through the entire document of just words.

[christopher-james-taylor]

“The idea that millions of Australians might be hunched over Pirate Bay, desperately downloading local films and television dramas initially sounds like a twisted kind of paradise to me.” - Jo Case

Competing Works - Opinion Blog posts

For the most part information about piracy in Australia comes from technology websites or opinion based blog posts such as above. Jo Case talks about how it has become very easy for Australians to obtain illegal entertainment content, as well as how most of them are smart people, who know what they are doing. The only reason though comes down to a very common fact: viewing the content from other sources, such as the cinema, or iTunes, is very expensive.

[christopher-james-taylor]

Website low-fi Illustration Concept

From the sketches that I posted previously this is what the website will look like. The pictures above show how the website will flow page to page, as well as what users will interact with.

Currently I am still deciding on what to do with the last page, titled ‘The Future’. Mostly it will be just a web page that describes possible way to stem the curve of piracy.

With the links to each section of the website I am also still deciding on whether I want them to be slightly highlighted, underlined or not. 

[christopher-james-taylor]

Website low-fi sketch

This is just a quick sketch of what the website will look like. As well it details some of the scroll manipulations that will occur as the user moves throughout the site. 

The site will be separated into 5 different sections.

Home page (image 2) 

Why it's a Problem (image 3) 

What the Australian government is doing to try and curve piracy (image 4) 

Current alternatives - such as pay tv from either foxtel or online streaming services. (Image 5)

The future - ways that piracy could be curved (image 6) 

Each section has different features that are coherent with current web design trends. 

Section two is separated into thirds, each with a bit of the title in it. As the user scrolls down the title fades away in that section that is being scrolled to appear.

Section three is having the piracy is a crime video playing as an entire screen block. As the user scrolls down the video blurs out as text fades into the display. 

Section four is only a large section that displays each alternative service. What I’m going to do with that part is to extend it down. So either when a user clicks on the title of the service the website moves down to information about that service or the information expands from where the services box is. 

The last section I still need to think about the best way of displaying the information.

Each section will be accessible from a navigation bar that will be locked to the top of the display at all times. From the home screen the bar appears at the bottom but when the user scrolls down the page it moves and stays at the top. The navigation bar will tell the user what section of the site they are currently viewing.

[christopher-james-taylor]

Web Design Trends - Movement through Scroll Manipulation

A major trend that engages viewers and visually entices them is content that moves and changes as the viewer scrolls through the website. Instead of scrolling vertically or horizontally down a page, viewers are “transported” or “flown” through the website as the scroll down the page, or going deeper into the website. This is mainly achieved through animations, transitions, and scroll locks. Viewers are usually unaware that they were being taken to a different section of the website.

Image 1 - La Haute Société

Image 2 - Boligreisen

Image 3 - SOZO

[christopher-james-taylor]

Web Design Trends - Animations

Whilst animations have been around on the web more many many years, one of the main reasons as to why is has become big again is due to minimalism. As minimalism has become a very popular theme, minor animations give websites a little more interactivity then just a plain website. The best use of animations are when they are not used for everything but in subtle ways that engage viewers into the content. 

Image 1 - Epic Newsletter

Image 2 - Nakuru

[christopher-james-taylor]

Web Design Trends - Interactive Block Content

Content that is layered in a block format is a major design trend. With the rise of mobile devices, content that is easily manipulable (depending on what device you are viewing it on) improves consistency between mobile and desktop devices. Each block includes an animation that either displays more content or makes the viewer aware of what they are about to click on.

Image 1 - GBR Graphics Business Registered

Image 2 - Fashionably Male

Image 3 - Guvera

[christopher-james-taylor]

Web Design Trends - Minimalism

most of the main trends that are seen in websites is minimalism. This is infused with plain text overlaid in front of a larger picture that takes up the entire screen.   This forces the viewer to direct their eyes towards the main content of the site, and nothing else. The viewer is not distracted by an abundance of unimportant information or links. The viewer is either within a few clicks of what they want or a scroll away. The main purpose of these sorts of websites is to visually entice people to explore more of the website. 

Image 1 - GBR Graphics Business Registered

Image 2 - HelloThierry