Dev log 9 – Overview of advanced techniques

What is parallax?

Parallax is a displacement or difference in the position is viewed along two different lines of sight. For example, in astronomy it is an irreplaceable tool for calculating distances of far away stars. It is the effect of where a position of an object differs when viewed in a different position. Parallax is also used to make a web design trendy, this involves in scrolling down the background imagery moves slower than the images at the front. This gives a 3D effect on a 2D webpage, this is created to give a sense of depth to a blog.

Task – Create a practice website for any campaign chosen using parallax techniques, design a parallax website aimed at promoting a range of fair trade products.  

For todays task I had to come up with a website that promotes fair trade products with the use of parallax in my design, I have began by selecting images that would be suitable for my campaign. As I am focusing on a campaign on chocolate in Fairtrade I used pictures of cocoa beans, chocolate & farmers to be my background image.

To achieve a scroll down parallax effect for my practice web campaign I needed to gather some images to create the three dimensional scroll down effect. I have done this by adding an image, adjusting the size so it fits the screen on the background overlay, I then added some typography to move across the page to add more movement on my web page.

Figure 5 – A quick tour for my Fairtrade campaign

For this video I have demonstrated what the viewer would see on my web page, I placed the Fairtrade logo on the very top, I added a wavy border as it matches the Fairtrade logo as it is also curved. To make the border more suitable I matched the colour to be the same light green shade the logo has. For the next image I added a photo of cocoa beans for the viewer to identify what topic the campaign is addressing. I added a heading to capture the viewers attention with more information to read underneath the footer for more context. I then placed another image of the farmer harvesting cocoa beans to show how Fairtrade is impacting the workers they are helping. I placed an educational animated video to understand even further why Fairtrade is important in the cocoa industry. Finally, I have added another border at the very end of the website to match the border on the top of the website.

References

Why Fairtrade? – Fairtrade America

Cocoa farmers – Fairtrade Foundation

Costs and benefits of Fairtrade activities – Ethics and the environment – Higher Business management Revision – BBC Bitesize

Images

Fairtrade Logo and symbol, meaning, history, PNG, brand (1000logos.net)

Amazing Cocoa Beans (choklat.com)

Cocoa Beans – Product Profile – NEPC

Cocoa – (fairtrade.net)

Chocolate: Fair Trade – YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *