Being Creative by Example. Layout | WebReference

Being Creative by Example. Layout


Probably 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.


Link 1:  Studio Verso: A Do-Mi-Sol paragraph layout
See how the paragraphs of text are positioned on the main page of Studio Verso.  By using different offsets from the left margin, the designer achieves the effect of each paragraph being visually separated from the others.  This invites more careful reading, as it becomes more difficult to just skim over the text.  An added advantage is that each paragraph, having its unique offset, attains an unique tone (similar in a way to a musical tone) which serves as a "bass line" in the evolving melody of text.  

 If, on the contrary, the items to arrange are not of equal importance, we can observe an even more profound difference in approaches.  The most common combination of elements is the heading and body text, and its design is being reconsidered over and over in a lot of inventive ways.  Traditional practical approach tends to precede body text with the heading and make the latter bigger in size and more prominent.  Interestingly, artistic approach questions the very practicality of this paradigm.  

  If you want your title to stand out, you don't have to make it big---enough to make it unusual.  People are curious.  Making people wonder where's the title and why it's so designed will get your message communicated much more effectively.  The results are all sorts of layout eccentricities, from flush-right headings to those set in a next-to-unreadable font size and positioned in a peculiar way (say, vertically or diagonally).
Link 2:  IPPA: Heading layout in a "flush 'em right" manner

 An important layout issue is using white space.  From the practical point of view, white space is of little value by itself; it serves as a mere separator, and most often there is not more of it than is necessary to prevent chunks of text and graphics on the page from running into each other.  This is further exacerbated by the proven fact that surfers generally aren't fond of scrolling, which invites authors to cramp as much information and links onto the first screen as possible.

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).


 That's why artistic pages often look so sparse. However, the empty space is not waste---it is there because the material requires it to sound as reverberating as it possibly can.  On many "artistic" sites, empty space is so abundant that it even jumps into the third dimension: before the main home page, there comes a "splash page" with nothing but a (often animated) logo on it---something that's difficult to imagine on an "economic class" business site.  A contrasting, but not less artistic (if properly applied) approach is to eliminate separating space whatsoever.  

 On the other hand, creative designers not only feel free to set things distantly apart, they often apply negative distances---that is, overlaying things one over another.  Graphic elements serving as background for text paragraphs may "fuse" seamlessly with headings, navigation panels and other decorative elements.  Implementing this is not particularly straightforward given that HTML of nowadays doesn't provide for overlaying (although CSS does).

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.


Link 3:  Photodisc: Crossing the frames' borders
An excellent example of this approach is the page at Photodisc where the arcs on two background images used in neighboring frames visually continue each other.  Combined with contrasting background colors, this gives an engaging effect of two areas on the page being distinctly separated and united at the same time.  

Created: Mar. 23, 1997
Revised: Mar. 23, 1997