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 (we’ll cover the right to left and top to bottom societies later). 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.

A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page.

First, draw a horizontal line from the top left corner to the bottom right corner (reverse if designing for a country that reads right to left).

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 and do the same. There’s no chance or arrest if you own the magazine. 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 of most importance, you were feeling anxious because your eye was fighting to look at the page and your brain was being confused as the layout was going against the flow. If the elements are laid out well, you felt excited as your eye was led across the page.

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 a basis of learning 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 my teacher was trying to impart 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 back to the left again, going top to bottom. Standard and simple.

I have to laugh at the following inclusion of “layout design rules” I found on the web. I would include a link but I don’t want to embarrass the author. The principles are sound although outdated and I wouldn’t suggest following all of them unless you want to time travel back to 1950.

• 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.
• If printing, make sure to accommodate for three-hole punch, or other bindery techniques by adding a little extra white space to the inside margin.

Well, those are simple rules and some 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 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.

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.

Force Rule Breaking

Committees can be impossible and usually clients know what they want – when they see it, of course. When freelancing, it is smart to show the kind of work YOU want to do. Many illustrators I know call this the “red apple syndrome,” meaning a client who needs an image of a red apple will look through a thousand images until they see a red apple drawn by an illustrator and hire them. You can render a yellow or green apple? Too bad! Show me a red apple.

It seems silly but too many creatives know it to be true. “Can you design a financial web site? I only see samples of non-financial sites!” YIKES! People cannot understand design talent so you might as well show them what you like to design.

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 people’s eyes. 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.

Breaking Broken Rules

The unfortunate thing about design is that we, as designers, are often ruled over by those who do not understand evolving design, breaking rules, table manners or snappy dressing. There is little one can do when facing “design-by-committee” or a boss who is a fan of magazines from 1885.

While working as an art director for a well-known magazine, the associate publisher, who was my direct report and a man who fancied himself a designer, decided the magazine’s design needed help. A proponent of a strict grid system, he announced new rules that only squares and rectangles could be used in layouts (he actually said “yummy squares and delicious rectangles, not yucky circles and disgusting ovals”). He then insisted we use a “modern-looking font” like Helvetica – just Helvetica – for all headlines and body copy. Just to make sure we got the message that he was the boss and we were his flunkies to fire at will, he set weekly “design meetings” and insisted we bring in examples of what we thought was “updated, good design.”

Naturally, being professional designers, we scoured the pages of every hip-hop and grunge magazine we could for the exact opposite of what he wanted to see. The screaming and yelling that ensued was fascinating to watch. He insisted we have an “MTV look” but only could imagine the Saturday Evening Post from 1943. It took about three weeks for him to give up and focus on bothering the editors for better writing and we were able to keep what would have been a subscription suicide for the magazine from happening.

Still, it’s not that easy in most cases. As far as designers are concerned, the fear of going too far with a design, anticipating rejection, is what separates seasoned professionals from lack of experience rookies and those rookies from the completely oblivious. We need not add to our inability to evolve design – there is too much outside pressure for that already!

A wise and experienced designer once told me that huge pushes for innovation in process and design would never be accepted at the company for which we both worked. He imparted that innovation had to be used in designing each and every day, taking it a bit further each time. He was right. In baby steps, I would introduce some little innovation, some evolution with each piece I designed, making sure those around me felt they were part of the process so they could feel involved and empowered – basically getting the credit for the innovation as well.

It took research – showing some examples with supporting details and, using the ever-popular system shown at the beginning of this article. 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.