"Layout" in graphic design encompasses fairly little techcnical application, you don't have to be adept at modeling bezier curves for isntance, yet it still includes most of the concepts that people think of when they hear the phrase "graphic design".

When working on a layout a designer should be less concerned with shape, color, or individual elements and more the *relationship* those elements have with one another. Sometimes connections will need to be made between elements but more often then not you'll be looking for ways to separate the elements to better guide the viewer through your work.

In either case, the golden rule will always be to ask "What does this element contribute to my layout?". If you can't come up with a good answer, question whether or not that element should even exist.

Separating Elements

Part of laying out elements within a page, whether it be a print publication, a website or even a software interface, is making sure those elements have clearly defined boundries.

Let's say we have a list of simple words, a navigation menu for a website for instance.


Now depending on the style we are going for, we may want to space these elements (the words) apart from one another. This is where a certain amount of creativity enters into graphic design. I can part them with dividing lines...






Changing the background color, as seen in a spreadsheet or database program...






Or even just by adding more space between each word...






There's really a wide variety of ways separation can occur, do not think that you are limited to these three approaches.

It's also important to remember that even though these examples have used text, thet same rules can easily apply to images as well.

As simple as they are, chess boards are a good example of visual design separating individual elements. The alternating colors of the square equally divide the pieces from one another. Imagine trying to play a game while using the closely spaced pieces above instead of the separated pieces below.

Positive and Negative space

Negative Space refers to the (intentional) absence of content to create clarity or mood.

The last of the three examples above separated elements by adding space between them. In graphic design you'll sometimes hear this referred to as using "negative space" (no it does not refer directly to making an image out of a flat color). It can be a very useful concept, especially since many beginning designers have a habit of trying to use all available space, when they shouldn't.

It's not that you should make a point of purposefully using negative space, sometimes it's not an option on a phone screen for example, it's that you shouldn't fall into the mindset that empty space equals wasted space. It does not.

Guiding Attention

The Visual hierarchy of a design refers to the order in which the viewer regards individual elements.

The only way to completly, 100%, control what order a viewer recieves information in is to either spread that information over several pages or use a slide show of some sort. But this has the counter effect limiting the target audience. Not everyone will be viewing your content with the same goal. Some will be looking for a quick fact check, some for more in-depth info, and some just browsing.

Because of that we need to be careful about how we lay out our information so that the order it is shown in makes sense, but at the same time doesn't limit branching options.

Visual hierarchy through layout

Let's look at a quick example, consider the two text columns below.

  1. Break two eggs into a bowl. Add 1/3 cup milk and grated cheese.
  1. Pour mixture, scrape back edges to prevent burning them.
  1. Pre-Heat your pan on medium heat, do not pour into a cold pan.
  1. Add other ingredients such as sausage, mushroom or onion, fold and flip once before serving.

Now how did you read these columns? Did you read them by the numerical order? Or perhaps you read the left column first, then the right, and quickly became confused as to why the instruction to pre-heat the pan came after the instruction to pour the egg mix. In an actual cooking scenario, this of course would result in utter catastrophe.

Let's try again.

  1. Break two eggs into a bowl. Add 1/3 cup milk and grated cheese.
  1. Pre-Heat your pan on medium heat, do not pour into a cold pan.
  1. Pour mixture, scrape back edges to prevent burning them.
  1. Add other ingredients such as sausage, mushroom or onion, fold and flip once before serving.

Now the background containers are actually working in our favor, they lead the eye from step one to step two, and then from step three to step four.

If I really wanted to keep the vertical column layout, I also could have just switched the places of steps two and three, but I wanted to illustrate the importance not just of text position but image and "styling" layout as well.

Visual hierarchy through prominence

Let's start trying to think of not just how we can separate elements on our page but how we can guide the user to particular elements to begin with. The previous example was simple enough. In western english we read from top to bottom, left to right. We don't have that level of luxary with non-text elements.

Let's use text one more time to illustrate how now just the position but the properties of individual elements can affect the information conveyed.

It's simple enough. By changing the scale and color of selected elements we can bring about new meanings.

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

See how changing the qualities of some words in the sentence can change the information conveyed while leaving the original statement intact? The concept of layout design is much like this but uses images instead of words.

Publication terminology

When discussing individual elements of a page it's easy to describe pictures. "Make the portrait larger", "desaturate the background more", or "rotate the gopher just a dat bit more" are easy sentences to understand because they describe singular, unique elements on the page. Text elements are more numerous however and have a wide variety of uses. Because of that it's helpful to introduce terms for various kinds of text elements.

There are many basic parts to a typical publication layout. It's ok to examine what may appear to be formatted as a newspaper since the same terms and concepts easily apply to non-periodicals like ads, web pages, or even UI elements. But keep in mind that over the years some areas of the Graphic Design world have taken on their own area-specific terms.

For instance what might be considered a "header" containing a "title" on a web page might be referred to as a Nameplate for the cover of a print publication.

Let's look at a (very) simplified mockup.

The Daily Nameplate!

This Headline is here to grab your attention!

In cases where the headline can not fully summarize the article, as it should, you may need a Deck under or near to act as an informative "buffer" to the main content. This is a sentence or two the reader can use to decide if they want to continue with the article.

The general body or text of an article should be considered the actual content around which all other design choices are made.

Lorem ipsum dolor sit amet!

Lorem ipsum is a "dummy" text meant to recreate the "flow" of western English without the designer having to actually come up with placeholder text. The original creator of it was influenced by latin passages but for modern uses it can be considered gibberish.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text might sometimes be broken up by a, wait for it, "breaker" when a writer needs to indicate a shift in time, place, or subject that doesn't warrent a new subheader. Typically it appears as a simple line between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sometimes "breakouts" or "pull quotes" appear within the text area to repeat or highlight key information within the body / text.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

A new Headline arrives!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Captions offer description or explanation of accompanying photos and / or images.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Of course there are *Always* more publication keywords that can be committed to memory. But for these pages we're going to stick primarily to general graphic design for now.

General guidelines

There are a few ideas about what contributes to "good" graphic design that don't quite fit into other categories. Let's look at a few here.

Limiting font use

The number of fonts you use should typically not be dictated by any steadfast "rule". That said, like many so called rules of graphic design, it can be useful for new designers to establish limits for themselves so that they don't fall into the trap of thinking "more is more". Therefore let us assign an arbitrary number you can use so that you can concentrate on more important concepts like composition and clarity.


Use no more than 3 *unique* fonts within a single project. And even then - make sure you are using them to separate information. For instance you might use one font for the headline, another for the deck, and a third for the body text.

Let's look at some examples of why you might not want to exceed this limit.

Don't neglect margins

The importance of margins and padding is a concept that can not be repeated to many times.

Margins are important.

It should also be noted that "Margins" refers to "emtpy" space around content. "Padding" refers to extending the background color or image of the content to fill that same space.

Examine the texts below. The text can be divided into 9 grids, but of those grid sections which is easier to read and separate from the rest of the information?

Previous to Leslie Noble's visit to Countess Vera he has been the hero of an excited scene at Darnley House.
Since the night of Mrs. Vernon's party, Ivy has been, for the most part of the time, raving in angry hysterics, which Mr. Noble makes no smallest attempt to soothe or soften. In fact, he spends almost all of his time away from home, and a quiet as of the tomb seems to have fallen over the magnificent mansion with its splendid furniture and large retinue of servants. No one calls, no further invitations pour in upon them. Society seems to have tacitly turned the cold shoulder to them in their defeat and disgrace.
The rage, the shame, the humiliation of Mrs. Cleveland's mind no tongue can tell.
"Will he desert me, do you think, mamma? He used to love me, you remember," exclaims the fair termagant, trying to whisper comfort to her foreboding heart.
Mrs. Cleveland laughs, a low, bitter, sarcastic laugh.
"You do well to say once," she answers, "for whatever love he might have had for you in the past, you have killed it long ago by your foolish extravagance, your violent temper and self-will."
"Who incited me to it all, I wonder?" her daughter cries, turning her head angrily. "Who was it that told me to have my own way and defy him, since being my husband, he was perforce compelled to bear with me?"
"Do you believe now?" Leslie Noble demands, with something of insolent triumph in his voice and bearing as the two women crowd nearer and scan the fatal cablegram with dilated eyes and working faces.
Mrs. Cleveland answers, stormily:
"No, we do not believe such a trumped-up falsehood—not for an instant. I see how it is. You have lent yourself to a wicked plan in order to free yourself from poor innocent Ivy, whose greatest weakness has ever been her fondness for you, wicked and treacherous deceiver that you are! You strive for a high prize, in unlimited wealth and the greatest beauty in England."
From the grave in which he lies moldering back to his kindred clay, her enemy has reached out an icy, skeleton hand, and struck the brimming cup of pride and triumph ruthlessly from her lips.
Through the agency of his child, the beautiful daughter she had hated so bitterly, he had avenged his terrible wrongs. There is murder in Marcia Cleveland's heart as she writhes under the retributive hand of justice. Fain would she grip her strong, white fingers around Vera's delicate throat, and press the life out, or plunge a dagger in her tender breast, or press a poisoned cup to those beautiful lips that had condemned her in such scornful phrases.
She continued, "Who but you, who now turn around and taunt me with the result of your teachings?"
"Well, well, and I was right enough." Mrs. Cleveland replies, coolly, justifying herself. "Of course I could not foresee how things would fall out, or I should have counselled you to keep your husband's love at all events. He might then have made some fight against this Countess Vera's claim. As it is——"
She pauses with a hateful, significant "hem."
"As it is," Ivy repeats after her, shortly. "Well, go on. Let us have the benefit of your opinion."
"He will be glad of any excuse to shake you off," finishes her mother.
She continued, "But you will see whether Ivy will tamely endure desertion and disgrace. She declares that she will not give you up, and I shall uphold her in that resolution!"
He stares at her a moment with an expression of fiery scorn and anger, then answers scathingly:
"I am sorry to hear that Ivy is so lost to self-respect as to wish to still live with a man who is bound to her only by a tie of the deepest dishonor and disgrace."
On the morning of that day when Leslie Noble has his interview with Lady Vera, Mrs. Cleveland is sitting alone with Ivy in a small, daintily-furnished morning-room that opens from the library.
They are anxiously discussing their situation and prospects, for it is impossible to conceal from themselves that Mr. Noble[Pg 91] is dazzled by the prospect opening before him, and that the severance of the tie that has bound him to the shrewish Ivy is more agreeable to his mind than otherwise.
"But he shall not do it," Ivy cries out, furiously, and brandishing her small fist as if at some imaginary foe. "I will stick to him like a burr. I am his wife. The woman that claims him is a hateful impostor. No one will make me believe that Vera Campbell's bones are not lying in the grave where we saw her buried three years ago."
"Perhaps this will convince you," exclaims a loud, triumphant voice, and Leslie Noble, striding suddenly into the room, holds an open paper before her eyes. It is the cablegram from Washington, telling him that the coffin beneath the marble monument is empty—that the bride he buried three years ago has escaped from her darksome prison house of clay.
She took a super dramatic breath. "But her intentions or yours can make not the slightest difference in what I am going to do. For more than two years I have been the meek slave of you and of Ivy—driven as bond slave was never driven before the triumphal car of your imperious will! You have recklessly dissipated my fortune, defied my warnings, trampled my wishes under foot, shown me all too plainly for mistake that I was married for my money, not at all for myself. The hour of my release has come at last, and with unfeigned gladness I throw off the yoke that has long been too heavy for endurance!"

What some people forget is that you shouldn't just pay attention to the margins within your project canvas, whatever the medium may be, but along the edges of it as well.

Imagine a posted notice on a public board, or perhaps a college kiosk, and imagine the mess of different papers that can be seen on a full surface. Large blue papers advertising used printers, small white papers advertising a room for rent, a pink medium poster made to announce a student recital. Even if each post is individually well crafted it is often the case that they will combine into visual noise.

In a case like this you are not just fighting the possibility of a lack of clarity in your own message, but in the distractions of the environment itself. Such a situation is a prime example of why you shouldn't just worry about margins between your own elements but around your entire projects "canvas".