Layout 101: Composition and Symmetry
“When this is done successfully, when there is a natural connection between the page and the elements living on said page, the composition is referred to as harmonious. The connection between the elements is clear, information is easily communicated, and there is no confusion…”
The word composition can be used differently in different situations. It can be referring to:
- The narrative in a work of fiction or to the presentation of a painting or artwork.
- The term itself means the act of combining parts or elements to form a whole – something that is crucial for layout and graphic design artists.
- In publishing RPG products, these parts and elements can consist of text, artwork, boxes of information, and title headers.
- The “whole” refers to the page or cover on which the elements are presented.
Generally speaking, composition is about creating a sense of order and unity in the material. Good composition means the viewer should easily get an overview of what is happening on the page, and also understand what information is the most important. Basically, composition when referring to page design, determines in which order information is received and registered.
When this is done successfully, when there is a natural connection between the page and the elements living on said page, the composition is referred to as harmonious. The connection between the elements is clear, information is easily communicated, and there is no confusion found when looking over the page.
When the opposite is the case, the composition is referred to as tilting. The page seems off, the order in which to receive the provided information is non-existent, and the reader becomes frustrated when they aren’t able to easily comprehend the information being communicated to them.
It is often the case, especially for an inexperienced graphic designer, that tilting elements occur in their work without them noticing or understanding why. Going through all the elements that make up a successfully harmonious composition would take far too long, but there are a few factors that are both easy to understand and simple to use.
One of these that is often used when creating RPG content is symmetry.
Most 3rd party content created for Dungeons & Dragons has chosen to copy the style of the officially published books made by Wizards of the Coast. This means using two columns of even width and artwork being inserted to fit symmetrically with these columns.
An example of harmonious and tilting composition in regards to symmetry can be seen above (page taken from Aaralyn’s Stolen Notes to Velea). The symmetry on the first page is clear. The two columns are of even width and length, the artwork blends well into the rest of the page, and the purpose of the text is being communicated through the use of properly assigned headers. The second page still carries some of the symmetrical elements from before, but the position of the columns, both in relation to each other and to the page they are on, makes the layout look off-putting and sloppy.
When working with composition, one of the most important aspects is something called compositional hierarchy.
Simply put, it is the way some sections of a page are given more importance in relation to others. Most people know of this, even if they aren’t conscious that they are using compositional hierarchy.If you have ever used a title header by using a bigger or bolder font, you have utilized compositional hierarchy.
The hierarchy exists to guide the reader along the page, to instruct them how to consume the information provided and which information is the most important to them. In most cases, the section headers are given the most attention as these are the most basic and effective tool the reader has for navigating the information on the page. Size, color, font choice, and position are all relevant factors to take into consideration when creating your compositional hierarchy, and most do it without even thinking about it.
When people read a page, their eyesight tends to start in the upper left corner of the page and work their way diagonally across it. This is a skimming technique, and provides a feeling for the information made available to them on the page in question and to give themselves an overview before continuing with their reading.
This action, though subconscious, can be used as a powerful tool when creating a compositional hierarchy and thereby make for an easier reading experience. The examples show how different kinds of headers have been utilized to communicate the importance and order of the available information.
Anne Gregersen is a writer of RPG content and a student of Digital Design at Aarhus University in Denmark. She has released multiple titles for Dungeons & Dragons on DMsGuild and on DriveThruRPG, including her own bestselling 5e world setting and a detailed guide on creating apocalypses in the world’s greatest roleplaying game. You can support her work on Patreon, and follow on Twitter: @AnnesFlashBack.