Friday 22 January 2010

Client - background image


After meeting and deciding upon the modern white-space design, the next consideration was to give the site a complimentary background image.




The main cause for this was the white-space was too over powering and thereby made it a little too bland.

After a brainstorming session, it was decided that something natural, be it through the content, or its colouring, would perhaps work well.

--

The following were backgrounds we subsequently tried out:


The client and I shared the opinion that the first one, with the fresh green leaves proves a nice backdrop. Furthermore, a select colour, from one of the hues of green, could be picked out to become a highlight colour used within the main body of the design. It appears fresh, natural and has an alternative remedies, natural feel about it.


The autumnal coloured one appeared nice, it's colours being quite vibrant and rich, yet alongside the orange, it proved a little too much and didn't quite fit with the core content.


The last one creates a holiday feel and the colours tie together well - the white of the wave with the transparency layer, the blue contrasting with the orange, the sand complimenting the nude colouring of the pictures. The foot prints are viewable when the white layer is given a transparency effect, however they aren't otherwise that noticeable.

--

To implement the fullscreen backdrop, which currently proves evasive through HTML and CSS, I intend to use some Javascript. The site demo-ing this and offering the solution is Supersized.
It is clear to see the effect a full screen image can have in the browser. It stands out superbly.

One of the beneficial features of Supersized is the ability to slideshow the background images, however, I realise this could prove more distracting, so for now we're just going with the green leaves, static.

@

1 comment:

Dan Ryland said...

Last one looks really good!
With regards to you wanting the image as a fullscreen backdrop, have a look at this article on CSS Tricks - http://css-tricks.com/perfect-full-page-background-image/ I've used the second technique in a web design and it works brilliantly. There is no need to use any Javascript, unless you want it to change through a selection of pictures.
Hope it helps!