AW 10: Principles of layout

During week 10 and 11 we are studying the principles of layout. These smaller lesson tasks encouraged us to become more observant of basic visual elements like form, space, symmetry, and pace — each explained below:

Form and space

Rearrange shapes cut out of paper and try to find the point at which the figure disappears into the ground. Try to find the point where the distinction between figure and ground becomes unclear. Does it depend on which shape dominates the space: black or white? Is it about the position of the shape within the space? Think about how important figure-ground relationships are within composition and design.

During this task, the main thing that became apparent was how much the black “frame” meant to my perception of the shapes. With the white paper directly on a white table surface, the black shapes were just that — shapes on a surface. When I added the black background, my eyes got more confused: were the black shapes placed on top of or silhouette cutouts from the white square? I believe the frame added a new dimension to the layout, allowing the white square to become more than just a background and instead appear as a shape of its own.

Symmetry / Asymmetry

On an A4 landscape page, draw four equal squares. Draw one or two squares or rectangles in each empty square to achieve the visual effects of: entering left, movement to the right, movement to the left, movement downwards, movement upwards, balance, tension, symmetry/asymmetry.

For this task, we followed examples given in our textbook. I see the point of the placement of elements, but without the explanation most of the blocks’ direction of “movement” is ambigous. I believe the effect would probably be more evident if the blocks were photos, illustrations or bits of text, since then some of it would be hidden in a more obvious way. Still, it would be open for interpretation of which direction the movement actually happens. I did notice that the importance of distance between the blocks compared to their distance from the outer edge of the square mattered. If the distance between the blocks were significantly larger than the distance from the outer block to the edge, it was more difficult to see the blocks as a whole and to spot a dynamic movement.

Basic principles of layout

Lay tracing paper over the top of three book spreads, carefully trace the grid underlying the page layouts. Remove specific text elements or images; only draw the grid lines. Note column widths and margin sizes at the top, bottom, and left and right of the text’s main body. Is your document based on a two-column, three-column, or another type of grid? Which elements stay the same on each page, and which change?

My book sample probably wasn’t the best for this task since it is about being creative, and no two spreads seemed to be similar. There wasn’t a fixed number of columns — even colours, text alignment, and image shapes varied from page to page.

Pace and contrast

Compare the design (in terms of pace and contrast) of an online magazine, blog or website to that of a printed magazine, book or journal. What differences can you see between the kinds of design strategies used in the two formats?

The major difference between a traditional web layout and that of printed version of the same type of media (magazine, book, journal) is that the pace of a website typically is vertically oriented; while that of a printed media gives more room for being visually playful. The challenge for web layouts is the size of the viewport; once a user has scrolled past something, it’s not very user friendly if they had to scroll back up to continue reading an article. A printed magazine spread allows for more “jumping” behaviour, since the designer knows beforehand what will be immediately visible to the user (aka the whole spread). Some web layouts mimick that of a book, in regards to making the user scroll sideways and not down, but this is not considered user friendly and will also meet a huge challenge in regards to mobile platforms. For a web designer, it’s important to put chunks of content within the expected and/ or calculated viewport size, and if needed take advantage of scrolling in order to reveal/ display more. For a print designer, the spread will be a parallell to the viewport but still open to more visual freedom.


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.