The trick to designing a great layout

Why are magazines and books always laid out the same? Even with alternative design, there is a harmony in layout or the reader’s head will explode… or they will just stop reading and skip to the next page. Successful design in publishing, advertising, web design, illustration and anything else that ties together elements depends on drawing in the reader, and leading their eyes across the page.

Some people think it’s not a big deal and that designing a page comes naturally because of cultural lessons we learn growing up and looking at design from childhood, yet few, if any, understand why it works the way it does. In most societies, we read left to right. Still sound simple? Just start on the left, and it will all fall into place? Basically, but the challenge is to make the reader look at elements in the right order, or at least the order you want them to see, which is the challenging trick in layout design.

The rules

I was never one to follow the rules, but teachers, and great artists have some memorable quotes on the subject. “Before you can break the rules, you have to know the rules,” and “to create your own world you must first understand the real world”.

If you study the rule breakers, you can see they all had the basis of learning from the real world, the basics, and evolving from there. The rules are the basic understanding of layout, type, elements of color, illustration, and photography, and how the eye views them, and the brain deciphers it all when put together.

What most teachers try to impart in layout is called the “Z” pattern. It’s the pattern of reading (western cultures) for the strategic placement of important information. Start in the upper left corner, work across to the right, and then down and back to the left again, going top to bottom. Standard and simple.

I have to laugh at the following inclusion of 1950’s “layout design rules” I found on the web. The principles are sound, however, and they still do speak of design basics.

• Use borders when you want to frame and draw attention to information (e.g., table of contents, calendars, special notes).
• Allow the edges of text columns, and artwork to create the illusion of borders.
• Draw attention to boxes, or images by using borders with a drop shadow.
• Draw the reader’s attention to important elements by contrasting size (scale), color, and page position. Make sure the elements have a function that supports the content.
• Use large, bold display type, and/or graphics for the creation of focus. Use elements with visual weight, intensity, or color for focus.
• Use a grid to help organize elements on the page. Make sure that the grid is flexible, but that the grid sections are not too small. Divide the page into four or five columns for most flexibility.
• Use multiple columns to organize text, and visuals into smaller (more easily read) blocks of information.
• Divide text into two, or three equal columns for best results on a standard page.
• Use a single, wider column with a smaller column for pullout quotes, and other types of supporting content.

Well, those are simple rules, and still carry over into what is needed today, and in the future, but with our consumer culture, and so many great rule breakers in design these days, rules evolve. One evolution in design was the “grid system.” According to Wikipedia:

After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold’s Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.

By the mid 1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.

Rule makers and breakers

If you haven’t heard of Josef Müller-Brockmann, then he is a must on your list of designers to study. Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Stijl, Suprematism, and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design, influenced him. Among his peers he is probably the most easily recognized when looking at that period.

Müller-Brockmann was soon established as the leading practitioner, and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration, and subjective feeling.

The grid was the prioritization, and arrangement of typographic, and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is, “a two-dimensional structure made up of a series of intersecting vertical, and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text, and images in a rational, easy to absorb manner.”

Müller-Brockmann is recognized for his simple designs and his clean use of typography, notably Akzidenz-Grotesk, shapes and colors, which inspires many graphic designers in the 21st century. As with the French posters in the 1890s, Müller-Brockmann, and his peers also attempted to attract customers, and sell products with bold, simplicity. The posters that served to attract an audience to events, especially music events, and museum exhibitions embraced the abstract geometrical shapes the style is noted for; but it is the public service announcement posters from this time period that have been more noted than in many other periods of design. The simple, clean, and graphic messages were, as with the music event posters, able to be understood by viewers with different languages.

Ed Fella, a contemporary designer, is a real rule breaker when it comes to both layout, and design, yet he still pays strict attention to how the eye, and brain views the page. Just looking at his work, one would think that he’s a lunatic. He forces contradiction yet still plays to the grid. Not because it’s there, but because it serves his purpose to help pull the eye all over the place, and still make pleasing, readable design. There is chaos, and balance, existing side-by-side like identical Siamese twins — one good, and the other evil.

©Ed Fella

Fella referred to his work as stylistically, “getting it wrong.” His work is raw, and obsessive. It has power, and spontaneity. Born from the knowledge of layout, typography, design, and theory, he seems to have ended up getting it very, very right. He has inspiring words every designer should read:

“I am interested in graphic design as art,” he says, “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy, and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in, and out of the books. The drawings are an unconscious discharge of all the styles, and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”

Paul Rand, famous designer, and rule breaker did this in a roundabout way. Mr. Rand, as a young designer, accepted a request to design the covers of a small, but notable publication in the late 1930s, and early 1940s. While the best advice to designers is to never work for free, there are some exceptions. Mr. Rand accepted, but demanded full creative freedom, and got it. When someone asks you for free work, they really don’t have much of a choice, do they?

Rand’s gamble paid off. His work for Direction caught the right attention. Success led to other successes. After being hired to design the page layout for an Apparel Arts magazine anniversary issue, an offer to take over as art director for the Esquire-Coronet magazines came his way. Initially, Rand refused this offer, claiming that he was not yet at the level the job required, but a year later he decided to accept it, taking over responsibility for Esquire’s fashion pages at the young age of twenty-three.

The coolest trick!

A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page. First, draw a diagonal line from the top left corner to the bottom right corner. The page can be vertical or horizontal. It works with any orientation.

Next, draw a line from each other corner to join the previous horizontal line at a right angle. The point the lines join is the area of maximum attention. Try an experiment — take a famous painting and draw these lines upon it (no, not at a museum because you’ll be arrested). You’ll see how great art is done using this layout technique.

Now, take a magazine page, or web page, and do the same. First, think of how the page is designed. Does it read well? Where does your eye go while you look at the page? Do you start feeling a bit anxious while looking at the page or excited? Now draw the lines, and see where the elements fall.

Chances are, if nothing of importance falls in the areas where the lines meet (general area), you were feeling anxious because your eye was fighting to look at the page, and your brain was confused as the layout was going against the flow. If the elements are laid out well, you feel excited as your eye is led across the page.

When it comes to dealing with your client, or a committee bent on redesigning your choices, give this as a demonstration as to why you placed the elements where they are. People tend to understand element placement when you use such a demonstration. It quantifies a rule they don’t want to break. Show concern for the final product, and involve the team with excitement over their ideas, and how to incorporate it all into the design, and you will find more leeway in committees, and with clients. Sometimes sticking to the rules of others allows you to break rules they don’t know… or can’t see.

Do you feel this makes sense? Have you ever heard of this layout trick and if so, have you tried it? Does it work? Let us know your thoughts in the comments.

Featured Image ©GL Stock Images

Speider Schneider

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider or add him on Google+