How to use grids: best practices for beginners

These tips will help you to use Setka Editor and other web design services when working on the design of your articles.

Oleg Uppit

author

Here are several general rules that will be useful if you are just starting to use grids:

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

So do decide from which device and in which resolution readers are going to view your articles. Use adaptive web design, 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 will 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. Do not carry it all too far: pages should not be all shoehorned into 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.”

Helpful But Not Necessarily Obvious

 Mind the proportions. Or, perhaps, 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 this page. When choosing the text width, mind that every line should invariably have 7-10 words. To achieve this, it is quite OK to break up headlines arranging it in 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.

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.

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 text containing few headlines. Think of any other highlights that could help to avoid ending up with a hard-to-read text.

 Do not spare an apprising glance at how the pages you have designed will look once they are 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 this has got 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 unaware of this that there was some sort of system behind the resulting pattern whatsoever. What is important here is not the complexity of the grid, but what you get in the end.

 Remember what Le Corbusier had said. That great master of architecture wrote namely 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 Editor

When working in Setka Editor, we use column grids — the basic grids in graphic design. Those are often supplemented with horizontal rows constructed depending 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 to enable you to decide efficiently how to arrange the contents, leaving you, however, with a multitude of options to combine different types of information (texts and images) and design elements.

Check the Grid Systems section for basic grid settings for your chosen Setka Editor’s default settings offer several types of grids: 6 columns, 8 columns, 10 columns, and 12 columns. You can moreover upload a grid of your own.

If you are a total novice wishing to create unsophisticated text posts, opt for a 4-column grid. This is one of the simplest options available. Its 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. The post may, moreover, be broken up into symmetrical or asymmetrical parts — this too is a very helpful trick to create a potent post.

Even if you do not get the hang of working with multi-column grids right from the start, do not lose heart — practice is what will help you master even the most sophisticated methods. Take some simpler patterns for a start, but do not be afraid of trying new things. In any case, grids are something you will be wise to sacrifice some of your time to learn more about; they are, after all, an excellent tool helping to create attractive posts, that are both easy on the eye and easy to understand.