Site frame, or modular grid in web design
What is a modular grid?
I will explain on your usual example. Open any paper book. See the text going through the entire width of the page, excluding the margins? So, before you is a typical one-column layout. Now look at the magazine or newspaper. Information in the journal is traditionally divided into two columns, and in the newspaper – into three or four, or even more.
In general, web design quite a lot of different “chips” inherited from the print design. These are principles of working with fonts, and rules of composition, and modules. Business cards and presentation sites may well be content with a one-column structure, home pages with a two-column one, more complex information projects should, accordingly, have a more complex and well thought-out layout.
The modular grid in the web-design is a single layout of all elements and blocks of the site. This framework goes through all the web pages and helps create a visual order on the site.
Grids can be simple and complex, fixed or dynamic, but this is not so important. If in the process of creating a web design you have defined a specific modular structure, please kindly stick to it from the first to the last page of the site.
What to do if during the drawing of the internal pages you have blocks or elements that do not fit your frame? I do not want to upset you, but this indicates that your grid is worthless, and you did not spend enough time on its design.
What are the grids?
Let’s look at the types of grids for web design.
1. Block grid – a rough marking of the area on blocks.
2. Column – having columns in its structure.
3. Modular – consisting of intersecting straight lines that form modules.
4. Hierarchical – grid with intuitive placement of blocks, without any logical structure.
Unlike print design, the grid in web design can be not only fixed, but also dynamic. For example, you can make one or several columns of the layout stretchable, rubber, setting their width in percent, and fixing the size of the remaining columns.
The grid for the 960 Grid System web design (http://960.gs) meets the concept of a “static” layout, and to create a “rubber” one can pay attention to the grid of the Bootstrap framework (http://getbootstrap.com/css/#grid ). Modular frame 960 GS divides the web page into 12, 16 and 24 columns.
When developing a “rubber” structure, do not forget about the maximum width of the screen. It is usually limited to 1280 pixels. If you do not take into account the maximum value in width, then on large monitors the content of the site will be greatly stretched, which will negatively affect its perception.
The most popular and easy to implement is a two-column modular grid, the proportions of which are calculated taking into account the following assumptions:
The most common screen resolution is 1024×768;
the width of the layout should not exceed 770 pixels so that the scroll bar does not appear on the screen with a resolution of 800×600;
The column that functions as an information module should have a wider width than the column, which is defined as a navigation module (menu).
Based on this, the proportion looks like this: 200 pixels. + 550px or 150 pixels. + 620 pixels
In the larger column it is intended to place the navigation menu, in the smaller – the catalog, or the content.
Watch and learn – the modular grid of the BBC website
Consider as an example the web design grid of a famous site. All BBC sites use a universal structure with 61 x 16 pixel columns, which corresponds to the standard photo and video of the brand.
As you can see in the picture, the BBC is quite flexible and allows you to place any information: from serious analytics to entertainment news. This modular grid is the hallmark of the company, as it is standard for all its sites. By the way, this thing is a component of the Global Experience Language gadlan, if anyone is interested.
BBC developers are happy to advise on the design of modular grids in web design. Of course, they did not invent a bicycle for us, but I think it will be interesting for newcomers to a web designer’s career.
1. The process begins with the definition of places for blocks of the highest hierarchy. We represent ourselves as Sherlock Holmes, the masters of deduction, and follow the rule “From general to particular, from large to small.”
2. We get down to the next level and place the blocks following in the hierarchy. At the same time, we are based on the priorities of content, to determine which we analyze user expectations and identify our own competitive advantages.
3. Thus, at first we are working on the overall composition and the largest elements. Then – we refine, we refine, we detail. For this we need to draw a series of rough sketches. Only after a detailed study of the idea of the site with a pencil and paper finally sit down at the computer.
4. We distribute information into blocks, group the content. For example, on the BBC website, virtually every content group has a name that is reflected in the categories of the navigation menu. The names of the blocks serve as visual anchors that allow you to browse the web page, as well as help you understand which category of materials this or that news belongs to.
This approach is widely used by both novices and web design masters. It allows not only to save a lot of time, but also to find original solutions to complex problems.
So, in our today’s course of a young fighter of a web designer, we examined the concept of a modular grid and features of its application. In fact, this is a kind of visual abstraction, with the help of which we locate all the elements and blocks of content at a reasonable distance from each other and at a user-friendly level. You can visualize the modular grid using a separate layer with the image of guides.
Finally, I want to remind you that web design is the creation of not only a beautiful, but also a practical, convenient system. That is why every self-respecting web designer should be able to design a modular navigation system, structure the information and break it into blocks. Thanks to this user, it will be nice to “surf” your site and easily perceive its contents.