To look at how the same content can be presented so differently we briefly looked at CSS Zen Garden, where various artists have taken the same content about CSS but developed it in their own way. The amount of variety shown within this project proves to us that within the Sherlock Project there are endless possibilities to what we could make the overall style relate back to. I will look at some of the versions in this post and understand how each designer developed the different style.
The first example is by Andrew Lohman, and is called Mid Century Modern. This style has been shown with the separation of content by large coloured blocks of colour. The simple circular icons /illustrations contrast against the angles of the blocks of colour, along with this Lohman added black and white faded imagery of architecture - indoor and outdoor. Mid century style often involves mixing components and bright colours that ordinarily would not be paired together. Lohman does this well and creates a well executed design to hold the CSS content.
My next example is created by Dan Mall, and is called ’Garments’ - a textile based design with icons and texture relating back to clothing and fabric. The fixed background allows the textile referenced content to flow over it. The background colour is similar to a light wash denim with darker tones of the same colour used for type and headings. The contrasting colour of gold is referencing toward brown thread used in denim clothing. Every detail in this website relates back to the art direction and theme.
The third is created by Steffan Knoeller and is called ’Steel’. This theme runs off the idea of architecture within steel framing. Again, the fixed background allows the user to view content with the same landscape background set behind. A great frame for the theme of steel. The tone is monochrome, with no colour located anywhere within this site. The content is held in boxes which are framed with illustrated steel work, continuing the theme of the background imagery through into the content and pull the entire site together within the same art direction.
The next example I have chosen is by Trent Walton, named Apothecary. Compared to previous sites it is more based on an old fashioned theme and is almost western in nature. The old style illustrations relate back to this western period and the block serif type pairs well with this style - carrying the theme through the content. Walton uses italic serif type and block serif stamped type to separate the content, this works well and adds interest into the document. The colours again are monochrome but this time being mainly based off a creme and black palette - like that of a faded page - with contrasting additions of mustard, red and mint tones in sharp shapes to break up the stamped old style illustrations.
The fifth example I chose is by Elliot Jay Stocks and is called Screen Filler. This style reminds me of screen printing with large blocks of colour, screen printing allows for colours to be layered and build up with use of the opacity in the ink. Elliot uses this trait well within the site to separate and layer the content with the bright blocks of overlapping colour. He uses a sans serif type in a range of formants, the main titles being block sans serif with sub headings being lighter in weight and narrow in style, while the body text is a standard sans serif such as verdana or arial. His site is simple and does not include illustration, using the colours to be the focus point of the site.
The final site I looked at is by Meltmedia and is named A Robot Named Jimmy. This site is very illustrative and when the user enters the site they are immediately presented with a cartoon robot. The style of this site is childlike and presents the content with bold colours and iconography, content is split with blocks of colour and transparency through to make the robot visible. The type is a combination of a bold serif type for headings, paired with a standard sans serif type for maximum readability. The colours are based off the primary colours - with the addition of green - allowing for a gender neutral colour palette and shadow shown within the illustrations by using tone variants of these colours.
Looking at these websites was valuable process to show me the possibilities for my Sherlock project and how things can be presented in different ways depending on the art direction we chose to take. The main thing is that we relate everything back to this to create a full experience for the user and allow everything to be consistent in style,
Next Post:
Main Project page: