An extremely useful article on the rules for creating a magazine layout! I highly recommend reading it.
Before we talk about the modular grid, let's understand what a module is.
The vast majority of grids are based on the paper size used as the basis for the publication. As you can imagine, the columns and baseline grid of pages are created using automatic commands of the program. The grid can be very diverse, depending on the purpose of the publication and the designer's idea.
The grid is created for the entire spread, not for each page separately. This is done so that the entire magazine spread would be perceived as a single whole, and not split into left and right parts, and the entire publication would not look like a binder of heterogeneous pages. The reversal grid can be composed of 2, 3, 4, etc. equal and unequal column widths.
Columns of equal width are created in the document creation window, or in the "Margins and Colomns" panel. If we need to set 3 columns, then we drive the number 3 into the corresponding field, etc.
But what if, according to our plan, not all columns should have the same width? For example, what if text and images will be in 2 wide columns, and explanatory information in a narrow side column?
The modular grid does not have to be built from perpendicular lines. Sometimes the designer decides to tilt the mesh or even give it an original shape. If you want to go beyond the usual, go out!
Just try not to turn your work into Sisyphean work in the pursuit of originality. Imagine what it would be like to type 40-50 pages with a slanted or curly grid ...
Therefore, before getting original, ask yourself, is it really so necessary and for what? If the entire magazine is built on an inclined, inverted or curly grid, then, most likely, such originality will surprise the reader no further than during the first 5 pages, and then it will become annoying.
But if the original layout appears only in one specific section of the magazine, then it will be not only interesting, but also appropriate, since it will give the section a stylish and recognizable look.
Let's talk about how best to position design elements on the page.
One of the common mistakes novice designers make is oversaturation of the composition with all sorts of elements and placing them too close to each other.
They are trying to fit too much information into a small space. Remember that free space is your good friend... It makes it easier for your audience to read your material. Properly used space makes your project look sleeker and easier to read.
.
Here are some examples of modular grids.
Note how diverse and unique they can be.
To illustrate the need for a modular grid, I present here three variations of the same work.
The first two options - with a clearly developed modular grid, and the last one - without.
Example 1
Example 2
Example 3
Look closely at these examples and, as they say, feel the difference. Where design elements are laid out according to the modular grid, the composition feels orderly and meaningful. But in the last version without a modular grid, the elements are arranged chaotically and, accordingly, violate the principles of alignment, unity and correspondence.
The composition of the first two images uses a traditional modular grid. In the first image, the lines are located horizontally and vertically at regular intervals.
The only difference between the second option is that the lines are located obliquely... All elements of the composition are anchored to these oblique lines.
But in the last example, in general there is no modular grid... Intervals between graphic elements absolutely random and therefore there is no sense of unity in the composition.
My aam advice: always use a modular grid to build a beautiful and competent composition (well, of course, if you are not doing art in its purest form, where, as you know, there are no rules)!
Looking forward to your question: Do you, Bob, build a modular grid every time before you start work. And are you not lazy?
Honestly, not always, although I try. But in the early stages of my design career, I did not neglect this. important rule and conscientiously built a modular grid. As you gain experience, you will learn to work with an imaginary grid without having to draw it on the page, and any deviation from the intended markup will be noticeable to your eyes.
Nevertheless, in the course of work, if necessary, it is possible to break the structure of the modular grid. We are, after all, not mathematicians. Such a violation sometimes gives the work lightness and freedom of expression. We just need to remember that this freedom should not destroy the overall structure of the composition.
So what are the benefits of a modular grid?
1. The modular grid helps us adhere to one of the basic design principles - the principle of alignment. Individual elements may not be attached to anything, but it is desirable that the elements in the group are aligned in relation to each other, and the group of elements in relation to other groups.
2. The modular grid helps maintain uniform spacing between elements.
3. The modular grid helps to efficiently use the free space, which makes it easier to read the text and the perception of the entire composition.
Now an example from practice.
Imagine your client asks you to make a 50-page brochure. You do the job according to all the rules good design... The pages of the brochure have a nice modular grid, a lot of free space and are easy and pleasant to read.
But the customer, not understanding such aesthetics, sees only empty space and, not wanting to pay for blank paper, asks to shove 10 more pages into it. How then to be?
Try to explain to the customer that pages that are densely filled with content are unattractive and difficult to read, and the audience is unlikely to want to spend time reading them.
If the customer does not understand this, then invite him to show both options to his friends and ask their opinion. If nothing could enlighten him, then alas, you have no choice but to satisfy his desire. By the way, I have already discussed a similar situation in my article ""
In conclusion, I will give you some advice.
Don't overload your design! White space and margins on a page are important and necessary for visual perception. Remember good design is about fast transfer necessary information, therefore, the design should not hinder, but help the assimilation of this information.
If the page is overloaded with information and there is no clear division of elements into groups, it will be difficult for the viewer to concentrate on the main thing and, most likely, he will not have the desire to understand all this confusion.
On the contrary, when the design is based on a small number of elements with a clear structure of the composition, the viewer will be easy and comfortable, and he will quickly assimilate the necessary information.
"The grid is a help system, but it is not a guarantee, it only has a number of possible uses, and each designer can find a solution that suits his individual style. But you have to learn how to use the grid. It is an art that takes practice."
— Joseph Müller-Brockmann
In fact, the very use of the grid is associated with one of the oldest and most basic design principles - alignment. Our brain wants to simplify everything and make it more understandable. This is why we try to bring order to things that seem chaotic.
Naturally, the faster we organize everything correctly, the faster our brain can identify the model and move on. The grids are so orderly that they require almost no interpretation on our part. .
Consider two page layouts presented in the image below:
Although both of these images are just a few rectangles, the set at the top seems to be fundamentally better than the bottom. We can instantly recognize the pattern, accept it, and move on. The image below, on the other hand, causes visual discomfort, since it does not have a clear picture, order, or purpose and looks like a random set of shapes.
It should be noted that disorganization can also be beautiful. .
In nature, for example, there are no clear lines. Meshes look cold and stiff, but remember that they are a very effective and efficient method to keep your imagination from getting bogged down in structures.
Take a look at some of the most popular websites with top-notch designs. Most likely they used a grid. Grids help stabilize the structure of a web page and provide the designer with a logical template for building a website.
Using a grid doesn't mean your design will have a boring design. A good designer should know and be able to apply the basic rules for using a grid, but this does not mean that he cannot break the rules.
In simple terms, a grid is the division of a layout with vertical and / or horizontal guides including margins, space, and some columns to lay the foundation for organizing your content.
Grids are traditionally used in the printing industry, but they are also commonly used in web design. The mesh is simply a tool that helps with the design.
When starting to learn new skills in a particular area, you must first follow the guidelines. Learning the basics ensures that you can apply the principles effectively. That is, first - theory, and then - practice.
It's worth noting that there are two ways to create a template grid:
Method # 1: Create your own mesh
There are many different ways create your own mesh, but at the end of the day, you are free to choose whichever option suits you best.
You can divide a blank document mathematically, creating an even or odd number of columns to work with. Your network can be complex or simple, you can use the rules of thirds or the golden ratio as you like.
Perhaps the following articles will help you with this:
Here are some examples of meshes created in Photoshop using guides ( View> New Guide):
Plugins for creating meshes in Photoshop
5. Grid System Generator -generator of such popular grids as 960.gs, Golden Grid, 1Kb Grid, Simple Grid / set the necessary parameters and press "GENERATE".
Grids for gummy / responsive sites
Responsive web design is hugely popular today. The main of its principles is the use of a rubber mesh. You can read more about them, but I would like to supplement this collection a little and add a few more resources.
1. - adaptive grid generator
2. Fluid grid calculator - a service that allows you to create a rubber grid. Enter the parameters and get a ready-made code.
How does logo design start? Thinking through the idea of a graphic sign? Or font selection? Or maybe from a modular grid? It is difficult to say, since different approaches are needed in different cases. However, many designers who already have a rough idea of what a logo should look like begin by creating a modular grid. The use of the grid allows you to create a harmonious, geometrically verified and well-organized logo, which can then be reproduced in any size.
The modular grid is a very useful tool in a designer's arsenal. Especially for beginners - even by mastering the basics of working with guides, you can avoid many design mistakes. Most often, a regular square grid with cells of a given size is used, but this does not mean at all that it is necessary to use this option. The structure of the grid for creating a logo can be any, for example, it can be a combination of horizontal, vertical and inclined guides that interact with circles of different diameters. What the modular grid will be is up to the designer himself. If you need to create a strict, simple logo based on the principles of geometric harmony, you cannot do without a modular grid. This is the only way to create a unique logo, in which the width of the letters, the radius of the elements and the distance between the characters will obey certain standards.
Yes, this approach to logo design can be called too mechanical, but logos built on the basis of a modular grid look more "correct" - after all, they are created using certain principles. In addition, do not forget that once developed a logo will then be reproduced by other designers, and if they know what the modular grid looks like, it will be much easier for them to cope with the task.
Modular grids are used in the most different types design. The basic rules for constructing grids were formed a long time ago - the first signs of using guides can be seen, for example, in old manuscripts. Grids were widely used in print, and with the advent of the computer age, they naturally found their way into web design.
What's most interesting is that many people, not only designers, unconsciously follow the rules for constructing modular grids. For example, photographers, trying to get a compositionally verified shot, use the rule of thirds or the rule of the golden ratio. Even the classic expression "the horizon is obstructed" means that the photographer has incorrectly "used" the horizontal guides. So logo designers who don't like to use a grid, saying that it limits their creativity, should be aware that any visual object that has a composition is created using a modular grid. Even if it happened completely by accident.
ADVANTAGES OF THE MODULAR GRID
Which type of mesh to choose depends on many reasons - only the specific case matters. At the same time, it is important not to forget that the designer should be comfortable working in this environment. If the use of a grid is uncomfortable and does not benefit the logo, then its structure needs to be revised. Invisible frames can really get in the way, so you need to be quite calm about the fact that some elements will violate a strict organization. And this is completely normal - after all, the symbols with which the logo is typed have different widths. It is very difficult to adhere to geometric principles in logos that use Cyrillic. The Cyrillic alphabet contains letters that can lead a designer to despair. If we look at the same letter U, it becomes clear that we see a completely ridiculous design, which does not harmonize well with the outline of other letters taken from the Latin alphabet. And the insect-like woman? This is generally a nightmare for any logo designer. But you have to work with what is, and there is no time for a modular grid. Such symbols will still go beyond the boundaries of the guides and you need to come to terms with this.
WHY IT IS WORTH USING A GRID
A logo can be created without using a modular grid. A ready-made font is taken, the brand name is typed in it and that's it. For a graphic sign, you often don't need to work with guides either. There are a great variety of such logos and this often does not affect brand awareness in any way. For example, the Google logo is in Catull. Designer Ruth Kedar only painted the letters in different colors and added shadows.
But if a logo is created from scratch, then using guidelines can be very helpful for a designer. The grid helps you focus and pay more attention to the organizational structure of the logo. Using a modular grid allows you to focus and create a logo that is simple yet consistently relevant. If you look at the logos of companies like Apple, Shell or Nike, you will see that they were created using simple, classic shapes.
Using the grid, you can create a versatile logo that will look great both on a business card and on a huge banner. At the same time, guides, circles and curves do not at all limit the flight of the designer's thought; on the contrary, they make his thinking more flexible. Sometimes you can see many more design options in the grid lines - the cells seem to suggest how you can move the symbols so that they look harmonious. That is, when working with a grid, the designer works more efficiently with the available space.
WHEN YOU DO NOT NEED TO USE THE GRID
In general, as noted above, on any logo created using the basic composition, you can apply a modular grid that will show exactly how it was created. However, there are several arguments against using guides.
The grid can constrain creativity as the designer feels "locked" in the guides. Trying not to go beyond the established boundaries, such a designer experiences discomfort, which does not contribute to the creation of a high-quality logo.
Creating a grid can be very time consuming, especially if the logo is complex. This is often encountered by novice designers who are still new to the laws of composition and therefore cannot quickly create a mesh.
Since the mesh is mathematical in nature, it is easy to get confused in all these shapes and, as a result, forget about the main idea. It should always be remembered that a successful logo is not just a set geometric shapes, and their harmonious combination. The tendency of some designers to "play by the rules" often leads to the fact that they get a faceless and downright bad logo.
CONCLUSION
All logo designers work differently. Some people prefer to sketch on paper first, others immediately start drawing the logo on a computer. Some start out by building a modular mesh, while others prefer to generate an image first and only then make it more coherent. So it cannot be said unequivocally that a modular grid is a must when creating a logo. However, designing a logo can be compared to building a building. A well-designed house will last longer, because it is based on a well-thought-out blueprint. The same applies to the logo: if it is a corporate identity, the face of a brand, then it is best to use a modular grid - after all, the logo will be used by the company for many years. And it will be very good if it is compositionally correct. Well, for any site that is created, as they say, for the soul, a logo typed by any nice font... And the modular grid is not needed in this case.
What is a modular grid.
Modular grid is a system for constructing visual information based on blocks - modules.
(function (w, d, n, s, t) (w [n] = w [n] ||; w [n] .push (function () (Ya.Context.AdvManager.render ((blockId: "RA -269783-9 ", renderTo:" yandex_rtb_R-A-269783-9 ", async: true));)); t = d.getElementsByTagName (" script "); s = d.createElement (" script "); s .type = "text / javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore (s, t);)) (this , this.document, "yandexContextAsyncCallbacks");
Module.
The basis of the modular grid is the module. Module comes from the Latin word modulus - "small measure". A module can be any measure of length, area or volume taken as a unit of a modular grid.
From the history.
Roman architect, Vitruvius, in the 1st century BC wrote about the importance of proportions in constructing a whole.
Is it worth talking about the age of the modular grid? She is literally as old as the world. We can see a proportional modular division in ancient Greek architecture, when the radius or diameter of a column was taken as a basis and on the basis of this division temples and structures were erected, some of which have survived to this day.
What is a modular grid for?
The modular grid allows you to logically structure information, thereby facilitating its perception. A properly constructed grid makes it easy to cope with the layout of both multi-page publications and small one-page advertising layouts.
As a rule, a clear and collected layout leaves a correct, positive impression. A clear and complete compositional presentation of information, aesthetically more logical than chaotic. Using a modular grid allows you to focus entirely on information.
Building a modular grid.
The module can be 2 square meters, 3 by 3 millimeters, or 12 by 12 pixels. It all depends on the measurement system in which we use it.
In web design, modules of 12, 16 or 24 px are mainly used. Some recommend taking the line spacing as a basis, which, in principle, is also logical.
Modular grids can be completely different. The most primitive will be a grid consisting of identical squares lined up close.
More complex modular grids use more elements. For example, we take the X module as a basis and get a grid with a step of 3X horizontally and 4X vertically. In this case, both vertical and horizontal blocks are separated by the X module.
It's easy to guess which option you liked, I personally like the first one, the one on the left. It has a more explicit and distinct structure. Most people will find it more interesting and correct. Despite the fact that the information is the same, it is presented in different ways, and therefore the impressions after what he saw remain completely different.
Modular grid in identity.
The use of a modular grid in identity has become a standard for a long time. Modular construction is used from the development of business cards to the development of billboards. Using the same modular grid across different advertising products creates a sense of integrity and unity for the entire brand.
Typographic grid in magazines and newspapers
(function (w, d, n, s, t) (w [n] = w [n] ||; w [n] .push (function () (Ya.Context.AdvManager.render ((blockId: "RA -269783-10 ", renderTo:" yandex_rtb_R-A-269783-10 ", async: true));)); t = d.getElementsByTagName (" script "); s = d.createElement (" script "); s .type = "text / javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore (s, t);)) (this , this.document, "yandexContextAsyncCallbacks");
Typographic grid is more of a type of modular grid due to the specifics of the typographic business.
Magazines simply cannot do without a grid. A clear and concise structure attracts the eye and makes it easier to read large amounts of information.
The modular grid is optional and its use is also a matter of personal preference and taste. It can be used in different ways.
In Figure 5, you can see a great example of using a modular grid and deliberately violating its boundaries, which in turn looks quite interesting and noticeably enlivens the entire spread.
Newspaper editors were among the first to appreciate all the delights of modular layout, and over the course of a long time, the appearance of the newspaper has changed slightly. We can pick up a century-old newspaper and compare it with a modern one, I think that common features have not undergone major changes.
Building a modular mesh inCorelDraw.
There are several options for using the mesh in the core.
The first is using a standard grid. It is marked with an icon at number 1. By clicking on this icon, we activate the grid. You can also snap to this grid or customize it to your liking.
The second way is to build a grid using guides. We can make the guides visible or invisible with the icon number 2.
An example of a modular grid based on guides in a core is shown in Figure 4.
Here the module is 5 millimeters in size. With the help of it, we built a more complex mesh.
You can come up with your own way, the main thing is that it helps you in organizing information.
Using a modular grid inAdobePhotoshop.
Similarly, the grid is built in Photoshop. But here the designers went further and now you can download various plugins for building a modular mesh with the specified parameters. This greatly facilitates and simplifies the creation of laconic design layouts.
(function (w, d, n, s, t) (w [n] = w [n] ||; w [n] .push (function () (Ya.Context.AdvManager.render ((blockId: "RA -269783-11 ", renderTo:" yandex_rtb_R-A-269783-11 ", async: true));)); t = d.getElementsByTagName (" script "); s = d.createElement (" script "); s .type = "text / javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore (s, t);)) (this , this.document, "yandexContextAsyncCallbacks");
Conclusions.
The modular grid is used everywhere. Its significance is great, and the possibilities should not be underestimated.
Although in many projects you can get by with a banal alignment, this tool should be considered a must-have in your arsenal if you want to make a quality design.
