Reviewing your website: design
This is the fourth post in a mini-series on website assessment and review.
Anthony Haynes writes: This series outlines a model, designed to be used by and with non-techies, to support website review and management. The model employs three criteria: stakeholder management; navigability; and design. This post focuses on design.
The approach
The thinking on design is based on Robin Williams’ approach, as outlined in The non-designer’s design book (Peachpit Press; 4th edition, 2014). This resource is designed to help non-designers to think about, and discuss, design intelligently.
For example, suppose that a non-designer has commissioned, or is involved in, some design work. Such work could be (as with the focus of this series of posts) a website, but equally it could be, say, a document or report.
The non-designer will need to be able to respond to ideas and make suggestions to the designer, without simply falling back on subjective preferences (such as ‘I like red’). Yet the non-designer can hardly suddenly turn themselves into an expert on design. What to do?
Williams’ solution is to apply four design principles. Her argument is that these principles will not, between them, cover everything involved in design, but that they will get you quite a long way. The principles are easy to understand and easy to apply.
The best way to understand Williams’ principles is to read her book, which is short, helpfully illustrated, and highly practical. (In fact, I judge it's one of the best how-to books I’ve read, on any subject.)
The four principles
The principles concern (1) contrast, (2) repetition, (3) alignment, and (4) proximity.
So far as contrast is concerned, Williams notes that often several kinds of contrast are available – for example, colour, shape, size, and texture. She argues that the use of contrast creates interest and engagement. She encourages the use of bold contrast: ‘Don’t be a wimp!’ is her message.
Repetition involves creating a sense of consistency by doing the same thing several times over. For example, if your standard text boxes have right-angled corners, stick to that decision: avoid slipping in rounded corners for no reason.
Similarly, decide a template (using some combination of, for example, font size, bold print, underlining, and italics) for distinguishing between headings (main heading, first-level sub-heading, second-level sub-heading, etc.) – and then stick to it on every page.
The principle of alignment states that, whenever you add some element (such as a photograph or block of text) to a page, you should always make it align with some other element. Various kinds of alignment are available – horizontal (aligning the top and/or bottom edges of elements), vertical (the left and/or right edges), or even diagonal.
Alignment helps to create a sense of organisation and professionalism.
On a personal note: I’ve used Williams’ principles frequently and have often found that it is the principle of alignment that has made the most difference. For example, when I’ve worked with designers of book covers I’ve found they can be a bit careless about the placement, on the back cover, of the bar code. Perhaps they see such material as extraneous --- not properly part of their design – and so might slap the code onto the cover without due care for alignment, thereby making an otherwise neat design look scrappy.
The principle of proximity concerns the semantic use of space. In other words: where elements of a design are closely related in meaning, place them close together on the page; where they are little or un- related, place them apart. This is perhaps the principle that requires most thinking in order to implement effectively.
Next up
In this post, I’ve discussed the criterion of design rather abstractly, in terms of principles. Our next post will treat it more concretely by reviewing examples from the websites of our core market, namely membership organisations, awarding bodies, and learning providers.
Back