Mark Argent
Creativity design composition spirituality work with organisations

Design of this site

It’s all about serendipity... pulling together some diverse strands, naming some personal resources that I tend to take for granted and not think about, and drawing on some design elements found by chance. Or perhaps it’s not so much chance, as spotting what is under one’s nose and chosing to run with it. Perhaps I should have made the site more compartmentalisd, with significantly different sections for different parts of life, but that feels rather less than integrated — though there are a few offshoots to things that do make more sense on their own.

Design elements

Changing images at the top

An earlier version of the site had a set of orange circles, each of which switched between yellow and orange in a random pattern. The effect and a sense of life but the circles felt too constrained. I experimented by dropping ink on paper, but the result was still a little too well-behaved and regular. Then my eye fell on the wonderfully vibrant, organic shape of bird droppings on a road.

Generating the changing images
The original image
after exaggerating the difference between light and dark
after tracing outline with illustrator
the final image (with transparent background), which should be recognisable as the second image on the right.

Convention would lable these as bad, or at least as dirty, but it takes only a tiny subversion instead to see these as expressions of the life and freedom of the bird soaring above, which could be seen as fertilising the ground. Over a few months I photographed dozens of splats on the road, which became the starting point for the irregular images across the top of the pages of this site.

On the face of it, the way forward would have been to replace the dark background with transparency and the white foreground with the actual colour I wanted to use. Life’s not quite that simple: it’s easy enough to replace black with blue and white with orange, but not so easy to replace the intermediate colours. Fortunately I was more interested in the organic feel than the exact shapes, so the next stage was some digital editing — exaggerating the difference between light and dark in Photoshop, painting over the centre of the shape if too much dark was showing, and then getting Illustrator to trace round the edge, saving the result as PostScript (EPS).

The elegance of PostScript is that what comes across is a mathematical description of the shape, a background colour and a foreground colour. Next I took the PostScript and altered the background colour to match the main background of the site, and created different versions for each of the foreground colours. This meant I could then open the PostScript in Photoshop and rely in it to produce credible anti-aliasing between background and foreground colours. This offered two real advantages: one is that I can accurately reproduce the same foreground colour across a range of images. The other is that I can remove the actual background (as the background at the top is not constant). By setting all the pixels of the background colour in the image to be transparent, I ended up with something where the edge of the image is not visible, but intermediate colours between more-or-less background and foreground are available.

The changing colour is achieved by a little piece of jQuery, which selects an image at random and changes it. The colours are softened a little by setting them to not be fully opaque.


 

Main background

But the main background was still a little too even. A relatively recent technique enables the creation of backgrounds that fade — adding two of these at the top made it possible to fade from pale to slightly darker blue, and then (at the very top) to fade to an appreciably darker blue, but the main background was a little too even.

The photo of part of a hoarding which was the basis for the background (click to enlarge).

The solution appeared in the form of a wooden hoarding round a building site, where the wood itself had been created by pressing and glueing together large chips of wood, and the paint had suffered a little in the weather. The result was a pale bluish colour and rich texture — with the colour a little distorted, and set to a low level of opacity, it provides an effective background texture.

There is danger of the textured background making the text harder to read, so there is a semi-transparent .png forming the background to the text, which lightens the general background a little.

Careful use of z-indices means it is possible to put this background on top of the changing images, which softens them and links them with the rest of the page more organically.

 

A palaeontological postscript

An intriguing extra layer to this design came in the form of a dream while it was being implemented. The dream involved some rather strange sea creatures, which I associated to the fossils in the Burgess Shale from British Columbia: it seems apt to let whatever was going on inmy unconscious inform the design of this site.

In terms of the history of palaeontology, the Burgess Shale fossils were very important. People talk of the “Cambrian explosion” — an apparent explosion in the fossil record. A more accurate description is this was the time when many more organisms developed hard body parts, making them more likely to form fossils. A particular combination of circumstances meant that the Burgess Shale includes a lot of soft-tissue fossils, providing a rich insight into the sea life of this time which is not normally preserved. Not having shells, those organisms are flattened into distorted shapes — though a surprising number can be related to modern organisms. Some of the highly-edited bird splats remind me of these squashed and fossilised creatures.

The re-constituted wood of the background is also a snapshot of what pressure can do — in this case pressure from machines, rather than the pressures acting in rock-formation.