Drag-and-drop self-build website services brag about their ‘most popular stunning template designs’ but what makes a design stunning?
If a website design is ‘stunning’ then it needs to stand out from all the others. The design should communicate and distinguish. It should illustrate what the website is about and do it in such a way that a visitor knows if they have seen this site before, or if it is the first time they have visited it. It needs to be unique.
The bare essentials
At ground level, website pages are no different to printed ones – they are composed of words and pictures which are displayed in a way which makes sense to the viewer. Picture in this box, words in that one.
Self-assembly websites providers like Wix, Weebly, Squarespace, Shopify et al provide drag-and-drop solutions which make it easy for someone with no technical knowledge to populate a simple framework. Developers argue about which system is the best for building the framework, whether to use themes on WordPress or hand-code in HTML, or a completely custom frame. But the truth is, developers are not designers and creativity is not a function of the canvas, it is what the artist brings to it.
Creating a unique website
The framework is the website designer’s canvas and may contain artwork which is integral to the design but separate from its content. These elements are referred to as ‘page furniture’.
Clues are in the design
This panel is a design inspired by the days of print production before Apple Macs brought Desktop Publishing to the party.
The masking tape securing a piece of paper to a pasteboard, the scalpel, propelling pencil and the printer’s marks are all visual cues familiar to anyone who knows old school print production.
In this panel, the only content are these words. The visually rich look is a consequence of the typography and the page furniture.
The page furniture elements are integral to the website design and are programmed into it. In the panel above, the artwork you see is built into the design. The website user does not need to upload any of the graphics or place any code, the furniture is placed around the user’s content automatically.
Note too, how the use of fonts helps to set the scene. The manual typewriter body copy and the Dymo embossed labelling-look heading are both call-backs to when making pages was a hands-on practice.
We can use clichés to get the ball rolling. For example, if we are choosing a font for a website about Wedding Services and another for a , there are established tropes we can draw on. The same two fonts, however, would work equally well for websites about writing long-form poetry and gothic fairytales so from here, we tailor the design to the client’s project.
Illustrating the point
Drag-and-drop website providers do not design your website. Similarly, the ‘create your own logo’ automated online tools, at best, apply only the broadest strokes in the most common formats. The analogues which perform these functions work literally because that is the way computing works.
But a designer thinks laterally and metaphorically. When designing a website for ‘Cloud Cycles’ online bicycle rental service, putting a cloud icon behind a bicycle silhouette can only be, at best, a starting point.
We need a hero
Similarly, the image content of a website needs creativity. Hero – or header – images on articles should not always be exactly a photo of the subject under discussion. The image needs to illustrate the content in such a way that the viewer gains an insight into the article’s content but not necessarily literally.
Getting the big picture
A ‘header’ or ‘hero’ image is the big image that sits at the start of an article in a printed magazine or on a website. The first hero image a visitor encounters will generally be the front page – the cover. This image is crucial in communicating, at a glance, an overview of the content of your publication. It is in this moment that the visitor decides whether or not to look further into your content.
The clever use of figurative illustration can make a connection with the viewer by, essentially, flattering their intelligence. The sense of ‘I see what you did there’ in your visitor makes a connection that a purely documentary image won’t.
The following example is typical of the sort of thinking that needs to go into picture research.
Literal v metaphorical
The brief: We need an hero image for an article about infrastructure resilience in cities in preparedness for catastrophic incidents. The story is about how to maintain existing infrastructure – transport links, communication channels, utilities – and deploying emergency services as needed in the face of some major incident – terror attack, natural disaster, system failure (eg: power outage). It is about coping with disasters on the scale of a large, urban conurbation.
Avoid specificity: An aerial view of a city in a photo will be of a particular city but the article applies to all cities. So how about an illustration? We dodge the specific city reference but the image will show roads, railways, maybe power lines too but we can’t hope to illustrate, literally, every piece of infrastructure that falls within the remit of the story.
The focus: The story is not about the disasters, it is about infrastructure coping with them, so we don’t want scenes of damage caused by specific types of incident. We want an image that represents an intelligent, flexible infrastructure which has good communication and can survive or adapt in adverse conditions.
What can we think of as a visual metaphor for such a network?
The image of bees on a honeycomb is illustrating a concept and the viewer recognises this within the context of the article.
Most websites have a single purpose. They are selling a particular product or service or addressing a particular subject and if this is illustrated literally, the images can be very samey. Hero images are more powerful if they have creative thinking in them.
But if you put ‘semiotics’ or ‘metaphor’ into a Google image search you’ll get a dog’s breakfast of annotated diagrams with written definitions. Both concepts rely on artistic interpretation and utterly defeat literal translation in the binary code that computers operate in.
How to think like an artist
Put the words ‘Gustav, Klimt and cat’ into Google and you get a photo of the celebrated artist holding a cat. Put the same three words into an artist’s imagination and you can get something far more interesting. Talented illustrator, Inna Ruda, came up with a take on Klimt’s celebrated work; ‘The Kiss’.
‘Like’ what you did 😉
The first time we saw this illustration, we laughed. It is a mixture of the sublime and the ridiculous; it is a confabulation of highly regarded, classic art and social media’s most popular junk: cat pictures. It is a comment on how the modern world is enamoured with the instant ‘likes’ of the equally instant images posted to social media. Scrolling through endless memes, we are failing to see and appreciate true art.
The joke smarts all the more for knowing that many of those who ‘like’ Inna’s illustration on Instagram and Facebook, won’t get the subtext.
We might be wrong. We might be misreading the artist’s intention here but that does not matter, the point is, the illustration provokes thought and examination in the way the photo of Klimt holding a cat doesn’t.[poss interview with Inna Ruda]
- Always judge a book by its cover – Graphic Violence
- Finding your type online – Graphic Violence
- Ridiculous stock photo clichés we can probably retire now – The Daily Dot
- People Are Sharing Hilariously Bad Stock Photos Of Their Jobs, And You’ll Laugh Out Loud When You Find Yours – Bored Panda