Sunday, 17 April 2016

OUGD505 Product Range Distribution - Development, Mocked-up Website (Studio Brief Two)

Firstly, I have decided to include a competition on the start of the homepage, which means I will have to create something that could be given away. For this, I am thinking of creating a t-shirt design with the stingsmoothies logo on. This will be quite easy to do, and would also get a lot of people involved in the project.

The first website flat I created can be seen below. The layout of this was successful, however I think the use of the icon logo was unsuccessful, however it did give me an idea for the enter page of the website, this can be seen below.

This is the gif idea I had from the previous website flat. The pollen particle icon would move away from the mouse. This incorporates my icon logo design into the website and means that I don't have to use it once the website has been entered. This is very helpful, as I was really struggling to position the icon anywhere.

This is the next website flat that I have created. I think it's a lot more successful as the use of colour is limited, however the website is still very bright and eye catching. This is the website that I am going to develop further and create more pages for. I have used an image taken off the internet as the main competition photograph, however I will edit this once I have taken some photographs of my own of the t-shirt that I will create. 

This is the next webpage that I have created for the products tab. I think it's really successful and uses my own images as links that would then lead to a next page. The image still uses the same grid as the previous page, which makes it consistent.

Below is a gif of how the hover button would work. When the mouse is hovering over a bottle, the image would change to a bottle filled with the smoothie. This adds an element of interaction and I think makes the website a lot more engaging.

This is the page that would pop up once the bottle was clicked. It is a pretty simple page and would explain the ingredients in the smoothie and all of the nutrition information of the smoothie, as this is something that a lot of websites lack, yet I know a lot of people would like to know if there is anything else in the smoothie other than fruit.

The next page is an explanation of the concept of the brand. Each page has used a single block of colour to add more excitement, and this page is no exception. The colour makes the text more engaging, and this is important due to the fact that this is where people will find out that the company would actually be helping to save the bees.

Finally, this is the last page of the website. This page is a lot more minimal due to the lack of content, however again the block of colour has been used to get rid of some of the negative space, and also to keep the website engaging.

Personally, I'm really fond of my website design and I will just need to go back and change the image once I have screen printed a t-shirt and taken my own photographs.

No comments:

Post a Comment