Composition is the way the visual elements of a design are arranged on the page. How we place text, lines, photos, white space and other visual elements. We covered the rules or principles of design in the previous post. But good layout and effective composition is more than just following the rules. The goal is to create a Gestalt or unified whole of the entire design.
You’ve probably heard the expression, “the whole is greater than the sum of its parts.” That idea certainly applies when it comes to graphic design and composition.
As you create the design, you are certainly dealing with the individual elements and deciding which principles you want to focus on more than others. But as you create the design it’s important to look at the “unified whole” of your design instead of it’s individual parts.
Page Layout & Composition: Content
Unity, a Gestalt or unified whole is ultimately the goal of every design. The designer is utilizing various visual design elements, placing them on the page using various design principles to capture the viewer’s attention, communicate a message, evoke a response and induce an action or reaction.
Unity refers to the fact that in order for the design to succeed, the viewer shouldn’t actually notice these things, at least not consciously or at first glance. Achieving unity is a balance and an intuitive act. Every design project is different with different goals, purpose, elements, message, intended audience and so forth. It is a problem to be solved.
The page is a part of the design and must be considered when creating the design. The page can be digital, like a website, digital graphic or presentation. Or a page can be physical or printed, like a poster, a magazine, a business card or packaging label.
Typically a page is rectangular or square, but it doesn’t have to be. Think of the various shapes and sizes of packages and labeling to understand what I mean.
Speaking primarily about the typical rectangular shape of a page, its orientation can be landscape or portrait (wide or tall). If you’ve ever worked in a word processing program like Microsoft Word, this concept should be very familiar to you.
The page serves as a ground, a place (literally and figuratively) where the visual elements are placed and design is composed.
The page has boundaries. How you treat and use these boundaries can change the look and feel of the design immensely. For example some designs are contained with the page using margins. Others bleed off the edges of the page, literally busting open the boundaries of the page to make the design look as though it is infinite and we are only looking at a piece of it.
A grid is made up of horizontal and/or vertical lines or guides that help you keep the visual elements of your layout organized and aligned. Even a word processing program like Microsoft uses the simplest type of grid, made up of a page with margins around all four sides. You can add columns to your layout, and the columns have gutters that create space between each column. Voila! You’ve probably used a simple grid like this before without even realizing it.
More sophisticated image editing and page layout programs like Photoshop, Illustrator and InDesign have much more sophisticated grids. You can even customize the grids you use. The grid itself does not publish or appear in the finished design piece. It is only seen inside the program itself and its visibility can be turned on and off when needed.
Rule of Thirds
The rule of thirds is known primarily in photography but is used in graphic design as well. It is actually a type of grid where the image or design is divided with 2 equally spaced horizontal and vertical lines to form what looks like a tic-tac-toe grid.
The goal of using the rule of thirds in your design takes advantage of the way the human eye tends to travel across a page. Important elements should be placed on or near one of the intersecting lines of the grid.
To provide visual interest, it’s important to not place objects or important elements of the design or photo in the middle of the design. For example, a photographer might place the horizon line of a photo on one of the lines instead of directly in the middle of the image.
Keep it Simple
The most important think you should keep in mind when creating a design is to keep it simple. You’ve heard the saying, “less is more.” This is absolutely true in design. The hardest part about designing something is knowing when to stop. What’s even harder is knowing what you should take away and remove from the design to make it even better.
Too often, new designers think that “more is better.” But in fact, the more design elements you put on the page the harder it is to design WELL. You can design haphazardly and without a lot of thought or meaning. But to design WELL, you have to know when to stop and even when to REMOVE design elements.
One typeface used well and strategically makes a much more cohesive and professional looking design than 5 typefaces. 1 dynamic and powerful image has much more impact than 5+ images. Remember: the first rule of good graphic design is you have to get their attention. LESS IS MORE: more powerful, more impactful, more dynamic, more striking, more memorable and more eye-catching.
The idea of creating a focal point in your design is related to emphasis. Providing a focal point for your design is a way to tell the viewer what part of the design is the most important. The focal point also acts like an anchor, always drawing the viewer’s eye back to it.
Without a focal point, everything looks the same and of equal value. The viewer needs to be able to glance at the design and understand instantly what it’s about. This can be done with size, color, proximity and white space, to name a few. Size and scale (or proportion) is the easiest way to indicate the focal point.
A design that lacks a focal point can be boring and confusing. If a viewer doesn’t know what to focus on, if all visual elements are equal is scale, tone, color, contrast, etc., then nothing stands out and it just appears like noise.
Remember, the first rule of design is to catch someone’s attention. Typically that attention is done through emphasis or focal point. The intended message or idea should come across strongly and immediately. Once the viewer understands the main idea of your design and message, they can take in the rest of the message and design aspects.
White space isn’t necessarily white. It is also referred to as negative space and simply put, it is the space in your design where the design elements are NOT located. White space provides breathing room to a design. It’s the space around the design elements, and it is just as important as the elements themselves.
White space can act as visual silence, a place for the eyes to rest. It makes text easier to read. See for yourself. Compare the image below to the ones above in “Focal Point.” Its the same design. I added a title and headers, which makes the article easier to scan. But I also added more space between the lines of text. There is more space (white space) between the lines of text. It doesn’t fatigue the eyes as much, making it easier to read.
White space should also be taken into consideration in designs that have a combination of text and images or designs that have mostly images. White space is still important as it creates a more open feel. So white space is also the space around the individual visual elements in the layout. Compare the space around the individual elements in the layout below compared to the second layout above under “Keep it Simple.” People unfamiliar with the design principles tend to try and cram as much information on the page as possible.
But as you can see, using white space as our guide and giving the reader places to rest their eyes, providing white space makes it much easier and more pleasant to read. And you can see how the idea of “less is more” and “white space” can go hand in hand. Sometimes you’ll have to whittle away and take away from the content in order to create more white space and create a more pleasing layout.
Graphic design is all about framing. The page has margins and edges. Images and text can sit on the page or bleed off the sides of the page, essentially busting through the edges. Because of this, bleeds bring us into the photograph or design.
Margins and bleeds effect how visual elements occupy the space of the page. On the left is a typical example of a page with margins and the image sits on the page surrounded by margins on all four sides.
The middle example shows the same image as a full bleed – meaning it bleeds off the edges on all four sides.
And finally, the third example shows the same image that bleeds off three side, leaving some space at the bottom for white space, or to place some text or another design element.
One of the easiest yet most profound ways you can move your designs from something that looks haphazard to something that looks professionally and carefully created is through alignment. Pretty much everyone knows how to align text in a word processor. There are generally four ways to do it: left align, right align, center aligned and justified.
But alignment is about more than how you align the text on the page. It’s important to take into consideration everything on the page as it relates to everything else. Getting the alignment right for the entire page can instantly move your design to one that looks clean, polished and professional. Take a look at the two examples below to see what I mean. The example on the left is haphazardly aligned. All of the elements for the example on the right are carefully aligned to each other, making a cohesive, polished look.
Visual hierarchy helps provide order, organization and structure to information. It helps the viewer to navigate complex content. Hierarchy also provides the ability for the viewer to skim the information quickly and get a general idea of what the information is about before deciding to “dig in” and actually read it.
Hierarchy helps show the relative importance of information in a design. It also helps guide the eye around a design. The most obvious use of hierarchy is the use of a title versus paragraph or body text on a page and header tags, as shown below.
Consistency is similar to the design principle of repetition. It is created when you have a uniform look and feel to a single design as well as a similarity across multiple designs. A perfect example of consistency is visual branding where the same logo, color scheme, patterns, and font palette are used in every piece of design collateral for a brand.
References (affiliate links):