different types of grids in graphic design

Any guides that help you shape the final design is okay. Although there are a few different categories of grid systems, there are no strict rules on what can or cannot be a grid.

A grid system is a set of measurements a graphic designer can use to align and size objects within the given format. There is nothing worse for an artist than a blank canvas. Source: John Kuefler 🔎 As a little exercise, you can grab any publication (a book, a folder, a poster, a news paper, a web page. Those make use of relative widths (percentages).Ī 940 pixel wide grid, which adds up to 960 pixels when a margin on the left and right side is taken into account. Today, responsive web designs with fluid grid systems are more popular. Because it is a multiple of 2, 3, 4 and 6, 12 columns allow for very flexible designs.įor the same reason of divisibility, the 960 pixel grid was popular in webdesign. Source: material.ioġ2 is a popular number of columns in grid design. This is an example of a modular use of the grid: some visual elements occupy only 1 modules, some 2 and some 4. These cells are called modules.Īn 8 by 4 grid in the Material Design design system. Source: material.ioĪ modular design adds rows to a column grid, creating cells in the design. The column grid consists of a number of columns separated by gutters and wrapped in some margins left and right.Īn eight colun grid with margins in green and gutters in cyan from the Material Design design system. The most commonly used grids are the column grid and the modular grid. The same applies to the frame around the plotting area of a visualisation (see the “Anatomy of a chart” section further below). This is the reason why you usually don’t want a frame around your visualisation when you embed it in a publication.Ī visualisation without a border blends in better into your publication: The grid in a design is usually invisible, otherwise you get a “boxy” design.

Source: codepen.io/travishorn/full/RdPLwj Invisible Responsive grids are a common design pattern in modern web design. The grid has extended its use from the world of print into the one of digital design, and is also of very high importance in web and interface design. Whole books have been written about the grid.Ī poster showing how the grid is used for its layout. In our todays digital world, it is hard to find any publication that is not using a grid in its design. The outer and bottom margins are twice the size of the upper and inner margins, putting the text off center and making the pages a little bit dynamic, but well balanced. The grid used in the design of the Gutenberg bible. The Gutenberg bible uses a two column grid, with consistent margins and spacing between the columns (these are called the gutters). Picture by A GutNYC Wanderer (Kevin Eng), CC BY-SA 2.0 Printers adopted it quickly, as you can see on the pages of the Gutenberg bible below.Ī Gutenberg Bible on display, Lenox Copy, New York Public Library, 2009. Hand written books already were using basic alignment and layout, but with the invention of the printing press alignments became much more precise. The use of the grid started off with the layout of printed pages. Source: Maarten Lambrechts, CCBY 4.0Īlthough a grid with straight lines and right angles may sound not very exciting or even boring, grids offer a wide range of techniques to create engagement, tension and surprise.īecause visualisations are in many cases graphical elements on a page, and because a visualisation itself is a composition of graphical elements, it is worth spending a little time looking at grids and how they can help you in designing data visualisations.

Rulers forming a grid in a Keynote presentation. No wonder that all design and publishing tools, even basic ones, have an option to turn on the grid and let elements “snap” to the grid lines. By dividing a page into a simple grid of rows and colums, and by aligning the elements of the design to the borders of the resulting cells, a designer creates a document that is easy to read, and in which the reader is guided in a natural flow along the page. And it is true: arrangement and layout of elements are one of the most basic elements of graphic design.Īlmost all graphic designers use a very simple tool to guide how they arrange elements on a page: the grid. Arranging elements on a page is what many people think about when they hear the term “graphic design”.

Different types of grids in graphic design