After my pitch I decided my design was not up to scratch and thought the best way to highlight areas that needed addressing was through the use of a mock up.
I used a combination of Illustrator and Photoshop to create my website to the specifications I had outlined in my pitch and used basic shapes as place holders to video/images. I immediately felt the website wasn't working. The main issue I felt was the colour scheme. It was bland and brown and muddy. In the style tiles and small segments I had constructed previously this wasn't as apparent to me as there wasn't the sheer quantity of brown on the page so It didn't overwhelm the eye. I did like the idea of contrasting colours throughout however, as it enabled me the ability to create focus and be able to add emphasis to certain points. The orange and blue worked well for this. Blue is obviously the colour of water and the first thing that pops into your head when you think of the sea.
Blue is a primary colour. To find a complimentary colour to a primary colour (with an RGB colour space/wheel) you simply have to combine the two other primary colours. The colour that creates is a secondary colour. This is because it is the combination of two primary colours and thus is a tier down. If you create a colour wheel containing all the primary colours in an RGB colour space and all the secondary colours they produce then you can see all the complimentary colours visually as they are exactly oposite each other. This makes it visually intuitive to pick colours and you know they are complimentary as this technique was developed by artists and has been common place for years.
Here is an example of a colour wheel showing complimentary colours:
This is a rather crude representation of the theory however, I feel that it summarises the point perfectly and shows all the major complimentary colours. Of course this is only ballpark figures and there is a considerable amount of wiggle room within these parameters. You can select nearly any value of blue and orange and combine them and they will look good together. I know this combination of blue and orange works as it has been used in cinema and 3D animation an enormous amount. It is one of the most common (if not the most common) lighting set up in cinema and has really come into it's own in recent years. It works so well because both the colours contrast and so do their meaning and connoted emotions. Orange is warm and comforting while blue is cold and sterile. This creates physical, mental and aesthetic juxtaposition which just works in every aspect. This validated my choice in my eyes and I knew it was tried and tested.
All of these factors made me think that I definitely wanted to stick to complimentary colours; I didn't want a quantum shift to mono-chromatic or anything and I did want to stay within the blue range in complimentary with orange however, I couldn't get the orange to look right. It was a little too much and looked gimmicky. After some tweaking and trawling the web for inspiration I eventually tried a pastelle pink against quite a soft blue and was really happy with the results. It is on the very edge of complimentary colour rules as it is technically closer to violet that orange however, it does still work with aesthetics due to the high amount of white in both colours. It softens them and ceases the harsh contrast making it nicer to look at and blend better. Adding white values to the orange didn't have the same effect and didn't speak to me in the same way.
After a considerable amount of toying I was eventually able to convert this:
To this:
As you can see there are similarities between the two. The font face and spacing/metric style of the faces are similar the main changes come in the form of colour and background flourishes. I thought that the colour alone didn't do enough to really create interest and dynamism to my design. However, it did allow for a far greater amount of flourish and detail within it I felt. The pink and blue really opened up a whole new art style as it was fresh, modern and exciting as apposed to boring, old and quaint. This allowed me to toy with the ribbon idea and other pushed in and pulled out ideas. Both of which added subtly to the ocean theme with very small, yet present, ties to depth.
Overall this colour scheme and metric change looks drastically different however, it still shares almost all of the themes and ideas that I was so hell bent on including in my original pitched idea. It is simple. That was always the main goal to aim for. I wanted a website and iBook that would be simple to navigate. Easy to use. And aesthetically pleasing. My original idea, I see now, was overly simplified. The colour, the layout, the font, the amount of images/rich content and the little flourishes were all kept to an absolute minimum. This was something I was aware of when re-designing and I wanted to leave as many of those aspects as I could untouched. I think I have achieved my goal of updating the look and feel of the site whilst only really changing the colour a little, adding a little more focus on rich content and adding background flourishes and detail. Everything is still presented in more or less the same manor and the feelings/emotions evoked (although being slightly cooler as aposed to warmth) are the same. The designs are both clean, sophisticated, modern and minimalistic. I do feel as though the second design is just much more striking. The aesthetics work better and it echoes back to the content far more. It is the colour of water and the borders around the video and shadowing throughout really echo back to a theme of depth which is in my eyes the main thing connoted with the ocean.
No comments:
Post a Comment