OUGD505 Studio brief 01 Product, Range and Distribution Website Development

When it came to the website design stage of this project I had already given it much consideration during the design of the other aspects, so that maximum continuity was achieved.

I want to achieve some sort of abstract collage made from the shapes of the perforation patterns of the poster, each of which would be the signature shape of a type of resource on the website.

When talking to Danny about this he suggested that I look at this piece of work by Leif Podhajsky It shows just the right combination of abstract shapes and harmonious placement that I would like to achieve with my website design.

I sorted through the shapes in each pattern and go the most typical of each to start to play with.

Manny arrangements and iterations ensued.

I started looking at opacity and how it might play a role in rollover buttons.

I then looked back at the piece suggested by Danny and evaluated why it was succeding where I was not. I found that the shapes are often placed so that the outlines flow effortlessly from one to the other, almost as if they are a composite shape. There is also a strong contrast of directionality with some pieces completely horizontal to contrast to the slightly off centre ones. I tried to implement these themes in my own work.

It finally clicked, I can't put my finger on exactly why but I am for once trusting my gut and saying that it feels right, which is what is important in this case.

I then looked at putting it in context with the title from the posters as the website header. I made the addition of an explanatory paragraph, in the campaign's signature Georgia, that stays in the same place throughout the website but changes content, sometimes explaining the somewhat abstract interaction design of the website and sometimes explaining content. 

Because of the overlapping nature of the collage I thought it might work to have the rollover buttons come to the front of the collage and reduce in opacity as their rollover function. However, this ruined the visual harmony that I had tried so hard to achieve.

So, instead a simple reduction in opacity seemed to suffice.

I worked beautifully throughout the four different resources and the four different buttons.