Chinatown Sign With Notes Posted
Chinatown NYC street sign with notes

 

More than ornate frill, the design of a page can make written words sing or disappear. The writer in me asks, “If something is well written, why does it need design help?” Other writers and editors ask this question too.

The designer in me replies, “Readability (the accessibility of the text) is at stake here. The design of the page (layout and typography) determines how easily a passage may be read or understood.”

It is not that writing requires design help; it is that the action of placing words on a page, aka writing, is already designing the page. Would a random pouring out of words from a bucket onto paper be graphic design? Yes. That bucket load of words would have landed in a design, but no thanks to any conscious attention by a designer. The resulting design may be pleasing to some viewers and unpleasant to others, meaningful to some but meaningless to others.

Graphic design is what we do to words so that they can be read on a page, the means by which words, images, shapes, and symbols convey meaning.  By grouping like things together in agendas, nuggets of content are made. Writers indent paragraphs, capitalize words, place commas, underline phrases, give titles special treatment, and italicize quotations—all elements of graphic design.

How words are arranged on the page determines the legibility and readability of the text. The placement and visual attributes (typeface, color, size) of these words determines whether a reader will be attracted to the page at all. The “page” could be analogue or digital: housed in a Microsoft WORD document, Excel spreadsheet, tablet screen, email, e-book, or LinkedIn post.

Painted family portrait of Joseph, Mary, and Jesus
Painted inside-front board of the accordion book Gondarine Sensul, an illustrated manuscript from the 17th century Walters Art Museum Creative Commons

In the Middle Ages, monks used gold leaf, color, patterns, and detailed images to create pages of beauty in illuminated manuscripts that would attract their readers, mainly at first, other monks who were studying the sacred texts. The images served another purpose: listeners who could not read would have something to look at as monks read the text to them.

Since these stories contained the essence of a culture/religion and descriptions of how to live a good life, it was important that these stories be remembered, repeated, and widely known. The images helped them remember the plot, characters, and messages of the narratives and lessons.

The image here is the Inner board page from the Gondarine Sensul, an illuminated manuscript made in the Gondarine region of Ethiopia in the 17th century. (1) This accordion book was created from a single folded strip of parchment, attached to heavy leather “boards” at each end.  The original pocket-size book is now in the archives of the Walters Museum of Art in Baltimore.

As writers, we may need to create a book cover that will attract readers, craft an annual report that will get a deep read instead of a quick scan, formulate an agenda that people will actually read before a meeting, or write and design an email that will get a prompt response. To heighten the chance that our words will be understood, these two or three elements of graphic design can be good to know for creating business letters, memos, agendas, blogs, progress reports, evaluations, Web pages, résumés, informational graphics, research posters, patient brochures, slide decks, and long documents to heighten the chance that our words will be given the attention they deserve—that people will read them and not just scan them.

Like the fundamentals of music, the design principles are what one learns at the beginning of design practice and then can spend a lifetime working with—studying with great mentors and experimenting along the way. The basic design principles are the same for novice and expert designers, and writers can use them. In this post, I describe five: contrast, white space, repetition, alignment, and proximity. One of the easiest-to-read introductions to these principles is Robin Williams’ Graphic Design for Non-Designers. (2)

Contrast

Contrast is about comparison, one element noticeably different from another, and it is one of the best ways to attract readers to the page and create a visual hierarchy of various text elements. There are many ways to create contrast. One can use large type and small type, a bright color and a neutral color, large blocks of text and small blocks of text, large photo and small photo, densely packed lines and widely spaced lines, a decorative typeface and a standard typeface, all caps and sentence case.

Two examples of business cards: before and after using contrast

The key to effective contrast is to make the elements VERY different. To have contrast on your page, make elements very different, not just a little different. Make one element bigger, brighter, darker, or bolder than another. Subtle differences do not often work, for example, 12-point text combined with 10-point text. Make that 18-point text with 10-point text.

WhiteSpace

Like water for fish, “white space” in design is that element of the layout that is generally not noticed. That part of the page not marked by text, images, lines, or shapes, it is also called “negative space” and refers to that part of a page left blank, empty.

Writing is a visual thing. We see words. But we also see the spaces between the words, and it is in the placing of letterforms and white space that we achieve meaning in the mind of the reader. Negative spaces on pages function much like the rests in musical notation, which are as important as the notes themselves. The white space between individual words (word space) allows us to read the sentence and not have to decipher this: whitespacebetweenwords.

White space can be literally white, or, as early rough drafts of the book cover shown below, not white, but light grey. The first row shows the text needed on the cover. The second row emphasizes the shapes of negative space. Each of the three book cover versions could be said to contain just one “piece” of negative space, not counting the confined spaces within the letters O, R, A, and P. Of the three different shapes of negative space, the first draws attention to the center and appears more “organized” than the second.

Three book cover examples with different shapes for the white space

The second example could be distracting as the two words in black could appear to be moving away from the center, and if those two words were placed closer to the top and bottom edges of the page, it could look like they are out of control and about to fall off the page. Since the book is about organization and order, this may not be what you want in the mind of your potential reader. The third example of negative space has the less predictable and possibly more interesting and dynamic shape. However, there is something slightly off-balance about the whole design so it might require more work to both keep the interesting negative shape and also achieve a balanced look to the page.

Repetition

Our eyes like patterns and rhythms, which create unity and add visual appeal. Repeated visual elements—a line, a logo, a color, a typeface—all of these are pleasing to us on a page and provide consistency in multi-page documents. Bold headings, numbers lists, and quotations in italics are repetitive visual elements used daily by many writers.

Chart of Five Design Principles: Contrast, White Space, Repetition, Alignment, Proximity

In the list of Five Design Principles shown here, I used the same amount of white space between each category, the same red color for letters and bullets, and the same indent spacing of all bullets, and also used left alignment of all elements except the title. However, what a relief that the line lengths are different. Otherwise, all this visual consistency could become annoying. However, the repeated elements order the parts and make it easy to see the parallel structure and main ideas. Understanding this design principle can be especially useful at a time when we are all streamlining our texts for blogs, emails, tweets, and web pages. Repetition of design elements can help eliminate unnecessary words by relying upon structure to convey some of the meaning.

Use repetition in a layout to draw readers to your text, speed comprehension, and provide unity for an entire document or project. For example, use the same color scheme and typeface for business card, stationery letterhead, web page, and annual report, which will go a long way toward establishing an integrated and positive business identity.

Title: Alignment

Alignment is about providing a sense of order to your page when you want that, as opposed to the design-equivalent of the messy-desk effect, ie, old coffee cups, newspapers, open books, sticky notes, and pens scattered around. Giving each item a visual relationship with something else (aligning every element to at least one other element) will help provide strength, visual pleasure, and logic to a page. Aligned items are attractive to the eye and help the reader to navigate though the text. Align what you can and with intention.

Two examples of a bullet List: before and after aligning text

This strategy can be effective even for an outline contained in an email message. You can greatly increase readability just by using the bullet/number icons on the formatting option toolbar. Usually these icons can be found on a toolbar at the bottom of your email “compose” message screen. This will align all the text, not just the first bullet or number item, and you will have something much easier on the eye and hence more likely to be read.

Proximity

Items relating to each other should be placed physically near one another and apart from unrelated Items. Reduce clutter by treating grouped items as one unit. In the two business cards shown here, the one on the left looks cluttered, and items are placed in no particular order. By grouping together the name of the restaurant and the type of food and separating that group from the location information, the card becomes easier to read and more appealing to the eye. Editing the text also helps.

Business Cards for Saigon Grill -- one showing random placement of text and one showing text placed in three groups

When making design decisions, whether made while writing the text or when the text is completed, consider starting with the proximity idea. Once you know what “bits” of information groups you have, it can be easier to make decisions about contrast, repetition, etc.

The End

The guides for creating beautiful pages and beautiful lettering have been in the world for centuries. Like all arts, graphic design and typography deserve time devoted to study and practice, but, like hot pepper and salt in a chocolate sauce, just one or two good spices can change the whole dish. Notice the exploding world of graphic design savvy all around you. Desktop publishing, color printers for home and office, and the ability to upload pages to the Internet have encouraged much experimentation. Some of this is blatantly awful, but there is much that is truly beautiful. You can borrow some of these ideas, as great designers have always done, to design elegant page layouts—whether web pages, business cards, annual reports, agendas, or article proposals—in the service of meaning.

  1. Walters Art Museum, Upper Board Inside, Gondarine Sensul, 17th Century. ©2011 Walters Art Museum, http://purl.thewalters.org/art/36.10/browse, used under a Creative Commons Attribution-ShareAlike 3.0 license: http://creativecommons.org/licenses/by-sa/3.0/
  2. Williams, Robin. The Non-Designers Design Book, 3rd edition. Berkeley: Peachpit Press, 2008.

______________

Notes

  • Typefaces used in examples: Abadi, Avenir, Britannic Bold, Daniel, Hot Coffee, Letter Gothic, Fashion Victim, Medieval Scribish, Neuva, Skia, and Times New Roman.
  • This article was first published in the American Medical Writers Association Journal, Fall 2014. http://www.amwa.org/journal

All rights reserved. Copyright ©2014 Barbara Kristaponis

4 thoughts on “Basic Design for Writers

  1. Thank you for sharing your knowledge and giving us all a refresher. I must, however, with all possible respect, speak to typography: sans serif is hard to read. David Ogilvy taught me that people tend to stop reading from sans serif fatigue. His policy was just to toss it.
    Again, thanks for your design lessons.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s