In print and online, you can’t really have text without a layout. You’re reading this text through a layout right now. I’ve chosen to start the post with a picture, and followed it up with wall of text. In a previous post, I left-aligned my first image to give the post a magazine-style layout. Chapter 6 of Gunther Kress and Thed van Leeuwen’s Reading Images discusses various properties of composition, “the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work.”
The three properties focused on most are:
- Information value
Let’s talk about each of them.
Looking at the fictitious web layout on the right, what is the most important part of the page? Probably the big bright green box that takes up most of the top of the page. Indeed, in web composition, the biggest thing is usually the most important. Blogs are generally in a 2-column format with the main content on the left, and a smaller sidebar on the right with other, less important information.
The huge green box jumps out at you because it spans 3 of the 4 columns in this layout and is much bigger than any other element. The bright green also stands out in terms of contrast, catching your eye. Kress and van Leeuwen define salience as “elements… made to attract the viewer’s attention to different degrees” and is is often done through “relative size, contrasts in tonal value (or colour, differences in sharpness, etc.)” The low contrast blue on black of the four columns below the big green box don’t attract your attention as greatly as the box does.
The last few paragraphs between the horizontal lines can be used to demonstrate another principle of composition: its information value, or “the placement of elements… endows them with the specific values attached to the various ‘zones’ of the image” which are depicted above. In particular, the left and right zones are used. Kress and van Leeuwen define the left zone as Given, while the right zone is New. Given information is presented as something familiar, and this case the blog text was given. New information, on the other hand, is unfamiliar and prompts special attention from the reader. The graphic in the example was unfamiliar and placed on the right because it was a departure from the familiar textual format of the blog. The graphic therefore required special attention and was placed on the right.
The third aspect of composition is framing, which “disconnects or connects elements of the image, signifying that they belong or do not belong together in some sense.” This blog post utilizes framing devices to separate each of the different topics I’ve talked about. Take a look at its dissection on the left.
I used horizontal rule
<hr> tags to separate each term from one another, and bold titles to make the divisions more prominent. The spacing that I used and the placement of images also helped to break up paragraphs and to make the post more appealing to read than if it was just a big wall of text. Putting big images in between text causes a break in the flow, and also signifies the end of one section and the start of another.
Even in this section, paragraph breaks show you what belongs together and what doesn’t. This sentence and the one before it are both in the same group, while the ones above are not. In the graphic on the left, I used color to highlight the different groups on the page, which is another technique that framing provides.
In conclusion, I hope that you’ve learned something about composition through the visual and textual examples I’ve put above.