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