Close

2014-09-24

Space and texture

Another way of drawing attention is to give content ample room to breathe. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.

As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.

Website: Draw to Click

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:

Posters: Bright Pink (via Smashing Magazine)

In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent, thanks to a black rectangle that highlights “badminton” and sets it into its own space. In the third image, a background scribble interrupts the space of “Sports” but not “badminton,” and consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”