English
6700

Document Design and Production

Spring
2016

 

Page design readings

 

Basic design principles

Comments

Readings

Basic design properties

Voice

 

How people view pages

Comments

Readings

Viewing pages

Voice

 

Structural heirarchy

Comments

Readings

Hierarchy

Voice

 

Gutenberg diagram

Comments

Readings

YouTube video

Gutenberg diagram

 

Voice

 

Macrostructure

Comments

Readings

Document macro structure

Voice

 

Power zones

Comments

Notice the "3 Design Layouts" says "it’s important to understand these patterns describe where the eye naturally goes when there’s a lack of hierarchy in the design." In other words, it's your job as the designer to create a hierarchy that fits the readers expectation and is clear to the reader. At the same time, these different patterns exist as the default for a reason; beware of varying too much from them without consciously knowing why.

 

Readings

Power zones

3 Design Layouts

Voice

 

Grids

Comments

A grid is a guide by which graphic designers can organize copy and images in a flexible way, whilst making this content easy to take in and understand. They can form the basis of a good typographic layout so it’s good to get into the habit of using them in your work.

Try looking at examples (such as a newspaper, a brochure, or a web site with a lot of text content) to see how the type has been positioned and structured so that it forms some sort of grid arrangement.

Readings

Grids

Designing With Grid-Based Approach

Grid tutorial (sort of)

Voice

 

Breaking the grid

Comments

You create the grid to give consistency to the design. Don't break it without a clear reason. But when you need to break it, don't fall back onto "it's the grid, I must use it no matter what." That is not design; that is dogma.

Readings

5 killer ways to break the grid

 

Voice

 

Text columns

Comments

The text column comes from how you layout the grid. Pick column widths that fit the information you are trying to communication and that are wide enough for the font.

Narrow columns of justified type do not offer enough space for the words to be properly spaced. As a result, lines containing a few long words end up with huge gaps between words and lines containing several short words show very tight word spacing.

Narrow columns of justified text are also have excessive hyphenation.

Readings

 

Voice

 

Online versus paper columns

Comments

Using a 2 column in an online PDF strongly reveals the differences between the visual interactions with paper and online. The 2 column layout provides a good line length for 10 pt fonts. However, when displayed online, people have to engage in too much interface manipulation (scrolling up and down and horizontally) when trying to read the text.

Readings

 

Voice

 

Alignment

Comments

Readings

Alignment

Voice

 

List alignment

Comments

Readings

List alignment

Voice

 

Bleed edge

Comments

Bleed edges have color or printing that extend to the edge of the page. This means the printer needs to print on a larger sheet of paper and cut to the correct size since a press cannot print to the edge (it'll make a mess on the press).

If you use them in a design, they increase the cost. Make sure they are worth it.

Here's a scan of a bleed edge from a magazine. It was folded over, so it didn't get cut. It shows how a bleed edge is created.

click the image for larger version

Readings

Bleeds

Voice

 

Justification

Comments

Readings

Text justification

Ragged Right or Full Justification

Voice

 

Cueing and text indenting

Comments

The reader assigns the greatest importance to the left-most portion of any visual display. To exploit this tendency, the text designer structures information through a series of nested units indented from the left hand margin. The area in proximity to the left-most margin is reserved for the most important information or high-level information. Headlines, important warnings, and graphics may be assigned a position of visual importance through isolation in the left-most portion of the page. As subsequent sections are indented from the left-most margin, they become, by reason of their placement, less important or lower in the information hierarchy. The optimal unit of measure used to designate the indent as well as the number of indents is a balance struck between the complexity of the information, the desire to maintain optimum line measures, the width of a page, and desire to achieve a horizontal separation easily distinguished by the eye.
---Gribbons, W.  Organization by Design   p. 71.

Readings
Voice

 

Hyphens, En-dashes and Em-dashes

Comments

You need to know the difference between a Hyphen (the short one) an En-dash (the slightly longer one) and an Em-dash (the longer one), and when to use each one.

And I bet you never knew that when you created a citation for a paper and you typed the page numbers as 23-32 that you did it wrong. This example uses a hyphen, but it should be an en-dash. 23–32.

Don't expect a non-technical writer to care. You'll have to fix it during the page design and layout. Of course, the copyeditor should have marked it.

Readings

Using dashes

Voice

 

Line length

Comments

People do prefer medium length lines (Bernard, Fernandez, & Hull, 2002). This is comparable with print research showing lines should be about 50–60 characters long,

The line of text should be about two alphabets (52 characters) long for best reading. Research into the relative legibility of different line lengths in print has led to recommendations that line lengths should not exceed about 70 characters per line.

Most articles tend to claim longer or shorter lines will slow down reading speed. For longer lines, the eye often gets lost during the return to the next line. If the lines are too short, readers cannot make use of much information in each fixation, and there is significant time lost as the eye is constantly having to return to the next line (Rayner & Pollatsek,1989).

Line length has also been found to affect reading rates online. Dyson and Haselgrove (2001) found the length for best compromise between reading speed and comprehension was 55 characters, comparable to that for print. Longer line lengths do seem to be read faster (Dyson & Kipping, 1998; Shaikh, 2005). Shaikh found lines with 95 characters read the fastest, but the readers preferred shorter lines. On the other hand, 95 characters was the longest line, but reading on paper could easily have a longer line. A portrait-formatted page with .5 inch margins contains 90–95 characters; pages formatted landscape would greatly exceed that length and cause reading trouble.

Readings

 

Voice

 

White space

Comments

White space is all of the blank space on a page.

It's a major element for influencing how people perceive your design and how it looks with a 10 foot view.

Readings

The Science of White Space in Design

Why white space matters

Voice

 

Golden ratio

Comments

Readings

Golden ratio

Voice

 

Design by Michael J. Albers Copyright 2016. All rights reserved.
Send me an email.