CONTENT DESIGN & THINKING

How to use grids: best practices for beginners

Originally published on Setka.io between 2017-2021 and migrated during 2021/22. Some details may have changed since the original version was published.

These tips are designed to not only help you use the Setka, but also other web design services when working on creating your articles.

Oleg Uppit

Author

Several general rules that are useful if you’re just starting to use grids are:

Remember that online media are different from printed media. Working on the internet means a designer should expect to be faced with a whole lot of barely predictable factors. For example, you never know which part of the long read will be directly on a reader’s screen at any given moment in time, because vertical scrolling is totally controlled by the reader. That is precisely why, as far as designing modules for a web environment is concerned, the emphasis is placed on working with the vertical lines of the grid. The horizontal lines are only of significance for the top and the bottom parts of websites and on pages accommodating lists.

Decide from which device and in which resolution readers are going to view your articles.Then use adaptive web design, to make several different grids convenient for different screen resolutions and try to preserve logical consistency between these module grids.

Focus on the content. When building grids, you need to take into account all available options, when it comes to headlines, inserts, quotes and the sizes of images, videos and other multimedia that may be found in your online resource or blog.

Breaking the rules is nothing to be afraid of. However, do not carry it too far: pages should not be shoehorned into only one grid type. This is what typeface designer Allen Hurlburt wrote: “Seeing that the nature of materials to be published may vary greatly, one grid may prove to be not enough to complete your design. In cases like this I would recommend using separate layouts and, wherever possible, superimposing various grids or merge them into a complex one.”

How to use grids: tips that go beyond the obvious

Mind the proportions. Or, perhaps I should say, ignore proportions – but only where you see fit and where it is indeed appropriate.

When choosing the text column width, go by the font size that is most often used on the page. When choosing the text width, every line should invariably have 7-10 words. To achieve this, it’s OK to break up headlines by arranging them over several lines, while inserts in script of smaller size can be arranged in several columns. Line spacing (vertical spaces between lines) must also be chosen depending on the font size.

Arrange the headlines and subheadings on the page in such a manner that they should attract the eye. The goal is to draw the reader’s attention to the message. Remember, however, that in practice the page might also have to accommodate a few headlines. Think of any other highlights that could help you avoid ending up with hard-to-read text.

TOOLBOX

FONT SIZE AND LEADING ARE JUST AS IMPORTANT as properly set page margins. Josef Müller-Brockmann writes that where the lines are set too close together, the type appears too dark, the lines forfeit their optical clarity and restfulness. While too open a pattern disrupts the cohesion of the text, the lines appear isolated and figure as independent elements.

Make sure you check how the pages you have designed will look once they’re filled with the actual content. For example, just visualise what a long interview consisting of an exchange of short phrases will look like. For many online resources and blogs, the outcome is that it remains floating somewhere close to one side of the screen, which is left virtually empty for the most part. This looks pretty messy, making the process of reading somewhat uncomfortable.

Remember that an image or a text block may take up one or several modules, both vertical and horizontal. This may seem obvious, but it has to be borne in mind in the beginning, to avoid overdesigning the grid in question.

Arrange modules in a way you see fit. For example, a grid consisting of 6 vertical modules may be used everywhere in the media resource only to create 2 or 3-column-design based on combinations of the basic six.

Do not strain too much after austerity and geometricity of forms. Many designers use this remarkable tool – grids – with such mastery that it might even never occur to someone that’s unaware of them, that there was some sort of system behind the resulting pattern. What is important is not the complexity of the grid, but what you get in the end.

Remember what Le Corbusier said. That great master of architecture wrote this: “I always reserve the right to doubt the incontestability of solutions offered by the modulor, while retaining complete freedom of maneuver, guided by my inner sense of the world around me, but most emphatically not by reason and logic”.

Working with grids in Setka

When working in the Setka, we use column grids – the basic grids in graphic design. Those are often supplemented with horizontal rows that are constructed based on the font size. Their configuration depends on the number of columns, margins, and gutters.

Column grids help to develop design for a variety of devices: computers, tablet PCs, and smartphones. Columns provide necessary limitations thar=t enable you to efficiently decide how to arrange the contents. However, they still leave you with a multitude of options to combine different types of information (texts and images) and design elements.

Check the Layout Grid section (of the Setka) for basic grid settings. There are several types of grids: 6 columns, 8 columns, 10 columns, and 12 columns. You can also upload a grid of your own.

If you are a total novice wishing to create unsophisticated text posts, opt for a 4-column grid – it’s one of the simplest options available. However, it’s drawback is that the post might look a bit dull because of the symmetrical break-up. Grids like this are often used with the following strategy: three columns are taken up by the contents, while the remaining one contains a menu or any other additional information.

If what you need is an especially flexible design (for example, for posting pictures or a post with multiple fillers), use 12-column grids: the post may be divided into 3, 4, and 6 columns. Or the post may be broken up into symmetrical or asymmetrical parts — this too is a very helpful trick to create a potent post.

Even if you don’t get the hang of working with multi-column grids right from away, don’t lose heart – practice helps you master even the most sophisticated methods. Use some simpler patterns at the start, but do not be afraid of trying new things. In any case, grids are something worth learning more about – they are, after all, an excellent tool that helps you create attractive posts that are both easy on the eye and to understand.