
A decade ago, Apple put out a 75-page book with this
title, provided free to LaserWriter owners. It appears to be out of
print, though I've seen it on e-Bay for $2 from time to time. It's
written for black-and-white hard-copy page layout, but many of the
principles, with a little tweaking, also apply to web page layout.
Here's a synopsis:
Planning & Organizing your Document:
Considering the purpose of the communication, its intended audience,
the impression you're trying to create, document constraints (cost,
time & resources for production), what design elements are
appropriate: proportion (relative size of text, graphics and insets),
direction (logical order and flow of the information), consistency
(uniform look and feel), contrast and colour, restraint, spelling,
grammar and punctuation.
Typography (typefaces) and font (size):
Limiting the number of typefaces (usually to one serif and one
complementary sans-serif face on a page), good methods of emphasis
(bold, italic, larger font) & bad methods of emphasis (mishmash of
typefaces, underlining, fancy scripts), aligning text on the page
(flush-left / ragged-right is usually best), ensuring adequate but not
excessive spacing between letters, words, lines and paragraphs, and
selective use of colour in text.
Design Choices:
How dividing the page into 2-4 columns of the same or different widths
(3-5 columns for 'landscape' view pages) can help make lines of text
readable and the positioning of graphics neat and proportioned, making
headings attractive (e.g. by offsetting them from text, using wordart,
surrounding them with white space, putting short headings at 90 degrees
to the page, or putting them in reverse light-on-dark text boxes), how
to lay out a resume (lots of white space at left), a press release
(lots of subheadings, useful graphics), a business presentation
(abstracts, useful graphics and insets), and a brochure (larger-font
summary, creative illustrations, frequent subtitles, insets). See their
example of a well-designed brochure above.

Advanced Design:
Adding visual interest by using a mix of heavy and light type for
contrast, using intial caps and drop-caps, careful use of light (20%
screen) greyscale illustrations behind text (as in the example
immediately above), less-is-more use of white space, use of shadow
boxes (see example below) and rules (vertical or horizontal lines and
separators),
Common Design Mistakes to Avoid:
Distracting 'rivers' and 'holes' of white space, tombstoning (headings
that disrupt the flow of the document so the reader loses his place),
floating sub-headings (placed too close to the preceding paragraph so
the reader associates them with what goes before instead of what
follows), whispering (too small) and buried (too low in the page)
headings and sub-headings, jumping horizons (text starting unevenly at
the top of each column of a page), widows and orphans (a single word or
single line stranded at the end of a column or page), over-use of rules
and boxes, and too-small margins.

I've written before about good weblog design and layout.
And I know my blog is not a great example of design and layout,
partially due to my lack of HTML skill and partly because if I spent
more time on design I'd have less time for writing content. I'd love to
know enough to use screens, curved text wraparound, drop-caps, shadow
boxes, and increased line spacing. And I'd love to get rid of the
annoying space at the top of the middle column of my permalink pages.
Who do you think, from a purely aesthetic rather than functional point
of view, has the best layout and design in the blogosphere?
|