11.4 Concept 3: Make Your Publication More Inviting Using Basic Principles of Readability: CRAP, continued

III. A is for Alignment: There should be a clear, deliberate arrangement of items on a page

Alignment can refer to text, as in the left-aligned body text required in MLA style. But in document design, it means much more; it refers to how the entire document is arranged. Most designers align all their content to some sort of a grid or pattern, creating a distinct, intentional arrangement of items on a page or screen. They use plenty of white space to cushion the items, which makes higher-contrast items “pop.”

Imagine you’re hanging 20 pictures on a wall. You probably should not just throw them up there randomly. You might measure and equalize distances between items, put unusual items in certain places (like in the center), or put similarly shaped or sized items together. This will provide a sense of order to your arrangement of the items.

Figure 34: Even though the arrangement of these items could seem random, there is some regularity, and there is an overall shape or grid governing the position of each picture. Image Credit: “homestilo gallery wall” by homestilo is licensed under CC BY 2.0

Software packages often allow you to draw lines or use an existing invisible grid to which you can “snap” items like images, blocks of text, or graphics. Templates do the hard work of arranging items on a page (or screen) for you. That’s why so many people use tools like WordPress, Illustrator, Publisher, Word, and PowerPoint—they allow you to arrange items easily, without the hard work of lining everything up by hand.

Newspaper and magazine layout artists once used various kinds of tape, contact cement (rubber cement), or wax adhesives to stick cut-out headlines, text blocks, photos, and ads to a page, just to produce a daily or weekly newspaper. To line up text and image blocks, they used wooden or metal rulers, graph paper, and T-squares. It was slow, tedious work. And rubber cement smells. The digital publishing revolution did away with all that. Most people who’ve spent half the night squinting over a yearbook layout that just won’t line up are glad about the changes.

Figure 35: Thank heaven for desktop publishing and digital layout tools. (Public Domain image)
Figure 36: Much easier to put together, but some would argue that it lacks soul. But it’s readable, simple, clear, and accessible to anyone. Image Credit: GNU GPLv3.

Still, alignment problems have not all been solved in the digital era. See for yourself some of the results of less deliberate alignment vs. controlled, arranged items on a screen.

Figure 37: A previous version of King County (WA) transit home page. Compare with the figure below. Note: King County redesigned its site long ago. Image Credit:, King County Metro, CC BY-SA 2.0
Figure 38: The Stockholm (Sweden) transit home page. Compare with the site above. Where does it seem easier to take public transport? Image Credit: Author screenshot (https://sl.se/en/)
Figure 39: The folks at MIT also figured out how much design matters. Observe how they redesigned their online newspaper. Left: Before; Right: After. Image Credit: Author screenshot,

Learning how to arrange text and images artfully on a page takes tons of time, not to mention a whole email inbox full of user feedback, collaboration, thought, and hard work. This chapter will only acquaint you with some of the most basic elements of design. Perhaps after reading this chapter, you’ll start seeing CRAP wherever you look.

CHAPTER ATTRIBUTION INFORMATION

This chapter was written by Jodi Naas, Portland Community College, and is licensed CC-BY 4.0.

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

11.4 Concept 3: Make Your Publication More Inviting Using Basic Principles of Readability: CRAP, continued by Allison Gross, Annemarie Hamlin, Billy Merck, Chris Rubio, Jodi Naas, Megan Savage, and Michele DeSilva is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book