Being Creative by Example. Layout

robably the most characteristic difference between artistic and practical design types is in their approach to page layout.  (Before investigating the creative aspects of layout, familiarize yourself with th technical limitations of web page format.)

Let's imagine that, instead of all images and text blocks on the page, we have empty rectangles of corresponding sizes (to some extent this is achievable by viewing the page with "Auto Load Images" off---the exercise every designer should be accustomed to).  Even so, the difference between a purely practical and purely artistic page is often obvious directly from the layout of these rectangles.

What does it mean for a layout to be "practical?"  Imagine you have a number of one-level items to present (say, textual links or graphic buttons on a navigation bar).  Being practical means arranging them as they naturally lay out, that is, linearly, either horizontally or vertically.  This is indeed practical because this arrangement helps the viewer to momentarily catch the idea and to look for a next item by following the line deduced from previous items.  This makes perception more intuitive, fast, and efficient---but somehow lacking in engagement.

Being artistic in the same circumstances means trying to find a more elaborate positioning: diagonal, or circular, or even randomized.  Once the word "elaborate" is used, I should explain that it doesn't have to mean "mannered" or "unnatural."  This word stems from "labor," work, and assumes only that you have to spend more effort to find a more tasty arrangement for your material.  Two ways to spend this effort are either by experimenting or (the easier way) by stealing an idea from a skilled designer---exactly what this column is about.

Quite on the opposite, artistic approach tends to treat white space as a rightful member of the show team.  If you have, say, three elements to position and balance on the page, actually they are four things to care for: three elements plus the surrounding and separating space which actively participates in the page coordinations.  Since the blank space is blank, it often appears necessary to make it bigger in size than the "meaningful" elements to achieve proper balance (in other words, we compensate quantity for the lack of quality).

The simplest way of solving the problem is to make the text part of the image, but obviously this is not very economic as the resulting GIFs may become quite large.  A more elegant approach is to use non-tiling background images, that is, the images that are bigger in size than browser window and therefore are not subject to repeating.  Such an image may be reduced to a quite acceptable file size provided that it's not very rich in colors and does not contain lots of crisp details.