Notes from 53rd International STC Conference
Las Vegas, Nevada, May 7-10, 2006

Effective Page Layout for the Non-Artist

Jean-luc Doumont

The presenter is an independent contractor (JL Consulting) specializing in electronic publishing.

Session Description: The presenter stressed simple but solid principles for clean, harmonious, effective page layouts, independent of the computer-graphic tool used to generate them.

• Session began with a series of slides in an automatic loop. A technique also used by William Horton, this is a very effective way to entertain and engage the audience in the 15 to 20 minutes leading up to the presentation.
• Opened with an anecdote that showed the advantages to writers/editors of being able to format their own documents (and the disadvantages of not being able to do so).
• Technology blurs traditional roles. Where does page layout start, really?
• Clients lack visual imagination; they cannot "see" the final product from a draft.
• Writing-in-the-layout saves time by reducing the number of iterations.
• His approach stresses simple, logical approaches that do not require an artist's talent and intuition.
• Look at purposes, principles, and processes.
• Purpose of the page layout: it's about revealing the structure, not about making the page attractive (not decoration).
• "I have found that all ugly things are made by those who strive to make something beautiful, and that all beautiful things are made by those who strive to make something useful." — Oscar Wilde
• Self-promoting designs distract from the content. Boring content + attention-getting visual design = reader's attention (but only to the visual design, not the content). The visual design becomes "noise."
• Good design is integral with the content.
• Good page layout is about revealing the structure visually. It is about looking, not about reading.
• Graphic elements such as bold type, color, even the number of lines devoted to a subject can signal things about the content (even without reading it).
• Bullet lists should include items that are similar and parallel, not a hodge-podge of unrelated elements.
• He critiqued the STC home page. Where does the eye go on a web portal page; everything competes for the user's attention. Looks like it was created by committee. Criticism would definitely apply to the new Portal format at MFC.
• The layout should respect the principles of the visual world.
   
• Proximity: items close together convey related content
• Similarity: items looking similar play a similar role
• Prominence: more prominent items are more important
• Some specifics
   
• 2 spaces between end of paragraph and new section head; 1 space between new section head and text
• Tables of contents should be nested (indented by decimal level)
• First- and second-level headings in TC are reversed in prominence
• Structure is first about how the page looks, and only then about how the items look. Visual structure is about spatial arrangement.
• Principles and guidelines
• A page has 2 dimensions, with an x and a y axis. Lets us break the vertical paradigm of text processors.
• You can start by working in two-column, but they are still not coordinated in any way.
• Instead, start with a wide left margin.
   
• Put the section numbers in the left margin, and perhaps part of the headings as well.
• Add a summary blurb in the margin (like a "pull quote"). Put small illustrations in the margin.
• Make space for more... a top margin too, for main headings.
• With the single column of text on the right, you can imbed art (full-column for large art, wrap text for small art)
• Space is... the final luxury.
• "Every shape exists only because of the space around it." — Jan Tschichold (1935)
• For legibility, preserve the shape of words, avoid weird unreadable fonts, avoid all caps, avoid underlining words (makes it harder to read), avoid putting text on top of a watermarked art background (interferes visually), avoid tight leading that causes letters with tails to run into the next line.
• Try shorter lines, spread further apart. Instant fixes for Word documents: increase margins, increase line spacing a little bit (12 points to 14).
• Avoid text running very close to borders and frames.
• Avoid bullet items that are too close together.
• Leave space to "breathe."
• Tables: instead of adding ink, try adding space or redistributing space. Avoid massive ruling (like an Excel spreadsheet); separate groups of item by spacing.
• Bigger is not always more readable; "breathing space" around numbers and words can actually make slightly smaller type more readable than larger type that is crammed into the available space
• Lots of space... not exactly a 21st century idea. Early documents do reflect that concept (margins were actually mathematically determined for symmetry and extra space)
• Apple Computer clearly understood the luxury of space. Strictly no noise (less is more).
• Too much freedom is bad for you: there are so many fonts, sizes, styles, colors, and special effects. More is not better!!!
• Self-imposed constraints; the key to visual harmony. Work with one font, one size, one style, one color, and no special effect.
• We can carefully constrain the spatial arrangement too. Vertically: All dimensions are integer multiples of the line spacing. Horizontally, too. All dimensions are integer multiples of... something. Text: A few other sizes. Some bold and italics? One other color? For non-text: One other color, in a few tints/. A finer sub-grid.
• The relaxation of constraints is subject to three conditions:
   
• It must add value: increasing the signal, not the noise
• It must be consistent: across the document or collection
• It must be harmonious: that is, proportionate, orderly, pleasing.
• As an example, an 8-page newsletter built on a 5-column grid (double columns for text), with just a few "liberties" (coordinated with the underlying grid: traditional vs new approach)
• Processes: traditional vs new
• Traditional document creation is a fragmented, iterative process. Text is separately approved, then the layout, then they need to be merged.
• This results in merger problems between text and graphics and causes more iterations.
• Writing-in-the-layout, an integrated approach, is clearly more efficient. You can write-in-the-layout, and it can later be perfected.
• When you write-in-the-layout, the client gets an idea of the final product in the very first version (applies to IPMS).
• Writing in the layout lets you optimize text lengths to fit the page exactly, harmonize text and figures in relative size and position, and write more visual headings that look and sound better.
• Business case: by writing-in-the-layout from the outset, the presenter can reduce document production time fourfold. He can then charge twice as much per hour and still reduce overall cost by half.
• Handling text cleverly:
   
• Full paragraphs
• Smart line breaks (at punctuation marks wherever possible)
• Aesthetics do matter, for ugliness distracts. Thus, if following these principles produces an ugly page, then graphic intervention is necessary.
• Elegance is important. More than beauty, pages should possess elegance. Elegance is an attitude.
• Three elements in elegance
   
• Appropriateness: focus on the purpose, visual structure
• Simplicity: less is more: remove ink, add space
• Harmony: constraint options to coordinate items
• To achieve compatibility in type, use a super-family (e.g., Lucida); then serif and sans-serif, regular and italics, etc., will match