Layout Design
Parts of a Grid
Format
The format is the full area where the final design will be laid out. In print design, the format is the page and in web design the format is the browser window.
Margin
Margins are the empty spaces between the edges of the format and the content. The size of the margins is what gives the content a general shape, usually a rectangle.
Flowlines
Flowlines are horizontal lines that separate the different sections of a grid into parallel bands. They help the reader follow the content of the layout. Flowlines also create stopping points, or edges for the elements to be placed on.
Some flowlines are called hang lines and others are called baselines.
Modules
Modules are the building blocks of any grid. They are the spaces created between the flowlines and vertical lines. Vertical groups of modules together create columns. Horizontal groups create rows.
Spatial Zones or Regions
Groups of adjacent modules in vertical and horizontal areas create spatial zones or regions. A vertical region can hold a block of text, a horizontal region can hold a video. Regions can be organized proportionally or used to create overlapping zones.
Columns
Columns are vertical spatial zones or regions that fit fully from the top to the bottom margin.
Rows
Rows are horizontal spatial zones that fit fully from the left to right margin.
Gutters
The spaces between rows and columns are called gutters. These should always be equal between columns or rows, in order to maintain a visual balance.
Markers
Markers are areas inside the running header or footer that mark the exact place where repeating information is placed from page to page.
Types of Grids
Manuscript
The Manuscript Grid is the foundation for all magazine, newspaper, ebook and all text-based design. The manuscript grid layout design is set up on the first page. The rest of the pages will follow the same measurements. It’s good practice to keep the manuscript grid consistent inside one document design. Even if there are elements bleeding off the edge, like a shape or a photograph, the grid will still be there to help keep a good balance for the entire design.
Column
Column grids are used to organize elements into columns. Magazines use column grids to place the text in easy-to-read sections. Some academic textbooks also use them. Column grids are used inside websites as well, like in online newspapers or blogs.
Column grids can have as little as two columns or as many as six or more, but that is not very common.
Text and images in a column grid are placed following the vertical lines and flowlines that make up the columns. Images can be placed inside one column, or across two or more to create a different visual layout. The spacing between columns (gutters) should be proportional and consistent throughout the entire document.
A symmetric column grid has all columns the same width, while an asymmetric grid will have some columns proportionally thinner or wider than others.
Printed newspapers usually use a symmetric column grid to organize their stories.
Baseline
A baseline is the line where text sits. Leading is the spacing between baselines. Using a baseline grid will give a flowing rhythm to the text. It will also give the headings and subheadings a proportional space in relation to the body text, making them more pleasing to the reader. Lined notebooks have a baseline grid.
Modular
A modular grid is similar to a column grid in that it has columns, but it also has rows. This kind of grid is used when there are more elements to organize and a column grid isn’t enough. Newspapers use column and modular grids to organize the stories comfortably and easy to read. Modular grids have equal size modules. This makes it easier to “break the rules” and use the spatial zones in different ways.
Modular grids are also great for laying out forms, charts and schedules. They are also used a lot in e-commerce websites. Your phone homepage that shows all the apps, has a modular grid. Instagram also uses a modular grid to show your feed.
Hierarchical
The purpose of a hierarchical grid design is to organize elements in order of importance. It is still called a grid because the modules are still set up inside a measured manuscript grid.
A hierarchical grid can be set up freestyle, or with a modular grid as a guide. Having the knowledge to set up a balanced hierarchical grid without a guiding modular grid, takes years of practice. This is why designers create website templates for non-designers to simply place their information in. Even seasoned designers use already built templates to save precious time.
Typographic Layout Systems
Typographic organization has always been a complex system in that there are so many elements at play, such as hierarchy, order of reading, legibility, and contrast. In Typographic Systems Links to an external site., Kim Elam, explores eight major structural frameworks beyond the grid--including random, radial, modular, and bilateral systems. Once essential visual organization systems are understood the designer can fluidly organize words or images within a structure, combination of structures, or a variation of a structure. With clarity and substance, each system--from the structured axis to the nonhierarchical radial array--is explained and explored so that the designer comes away with a better understanding of these intricate complex arrangements.
Below are the 8 Typographic Systems discussed in Kim Elam's book, Typographic Systems.
Axial
Design to the left and right of a single axis.
Radial
Design from a central point of focus.
Dilatational
Design along a circular path.
Random
Spontaneous Design — elements that are arranged without definite aim, pattern, direction, rule, method or purpose, but it is deceptively simple because the viewer imposes organization on compositions even when it is unintentional.
Grid
Design with vertical and horizontal divisions.
Transitional
Design with shifted bands and layers.
Modular
Design with standardized units.
Bilateral
Design that is symmetrical to an axis.