Over the past few days, we have been working on developing our website for 'The Plastic Project'. We have included some attached screenshots within this blog post, and the photos have annotations with them to explain what we are trying to achieve, as well as what we are going to develop.
The initial page that appears is a pre-loader page. Which has just the navigation bar, a blue screen, and a white globe icon appear. Once the page has completely loaded, the blue screen slowly fades away and reveals our website. The navigation bar remains at the top, even as you scroll down the page. The tabs on the navigation bar change colour as they're hovered as an indication for the user to click. Each tab is linked to a section on the page, for example the 'Video' tab will take the screen down to our Plastic Project Video.
Below, is a screenshot of the initial page. We've experimented with using an image behind the heading, with white text. Even though it looks quite appealing, and the gradient aesthetic draws the eye to the heading, it doesn't quite fit with our aesthetic, which is looking at more of a clean, crisp appearance. Utilising three different solid shades of blue. The text is currently centred, although we will look to left justify this. We will also look to change the fonts in each of our headings, do varying font widths and sizes in order to make certain parts of the blocks of text stand out as headings.
The initial page that appears is a pre-loader page. Which has just the navigation bar, a blue screen, and a white globe icon appear. Once the page has completely loaded, the blue screen slowly fades away and reveals our website. The navigation bar remains at the top, even as you scroll down the page. The tabs on the navigation bar change colour as they're hovered as an indication for the user to click. Each tab is linked to a section on the page, for example the 'Video' tab will take the screen down to our Plastic Project Video.
Below, is a screenshot of the initial page. We've experimented with using an image behind the heading, with white text. Even though it looks quite appealing, and the gradient aesthetic draws the eye to the heading, it doesn't quite fit with our aesthetic, which is looking at more of a clean, crisp appearance. Utilising three different solid shades of blue. The text is currently centred, although we will look to left justify this. We will also look to change the fonts in each of our headings, do varying font widths and sizes in order to make certain parts of the blocks of text stand out as headings.
In the screenshot below, we have included a 'Statistics' section, which consists of some shocking statistics which we are looking to emphasize. This page is directly below the 'About' section, and can be located by either scrolling downwards or clicking on the 'Stats' tab on the navigation bar. We really like how the blue circles really pop from the page, and add a nice aesthetic. Again, we will look to play around with the fonts. However, we would like to play around with adding info-graphics above or below our existing statistics, that way we will have more than 6.
Below, we have got our 'Video' section, which can be accessed via scrolling or clicking on the 'Video' tab in the navigation bar. We just have a placeholder video in there at the moment, since we are still developing our Plastic Project video. The image in the background is again much like a placeholder, as we were simply experimenting with how to put an image behind the text by using HTML or CSS code. We are going to move this 'Video' section higher up the page, as it is one of the most important parts of our project, and the best way to make sure viewers want to know more about The Plastic Project. This will help us draw them in, and then if they want to know more, they can continue to scroll down the page for more information.
In the below screenshot, is the bottom of our website. Currently, it has a small description about the two of us involved in the creation of 'The Plastic Project', and a small message saying "Buy a Refillable Bottle, and Spread the Word". Below that, we have some links in the footer, which, when clicked, redirect the user to the respective part of the page. We also have a few social media links, which just link to Fraser Malpas' Facebook and Twitter pages. If we were to make this project an actual project, we would have these link to Facebook pages created for "The Plastic Project". We are looking to change the colour of the footer to a blue (to match our logo), and the text/social media icons to white. We will also play around with the fonts used.
We will take our website to class on Monday and Tuesday in order to get some feedback and critiques. Also, if there is anything we need help with in terms of coding (that we can't find on the intenet, we will ask Tim for some help. Until then, we will look at making a few minor adjustments to a few sections.
- Blake
- Blake
No comments:
Post a Comment