Website framework, or modular grid in web design
What is a modular grid?
I will explain with an example familiar to you. Open any paper book. You see, the text passing through the entire width of the page, excluding margins? So, here is a typical single-column layout. Now look at a magazine or newspaper. In a magazine, information is traditionally divided into two columns, and in a newspaper, into three or four, or even more.
In general, web design inherited quite a lot of different “tricks” from printing design. These are the principles of working with fonts, and composition rules, and modules. Business card sites and presentation sites may well be content with a single-column structure, home pages with a two-column structure, more complex information projects should, accordingly, have a more complex and thoughtful layout.
Find out more
The modular grid in web design is a single arrangement of all elements and blocks of the site. This wireframe 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 certain modular structure, please, stick to it from the first to the last page of the site.
What should I do if during drawing internal pages you have blocks or elements that do not fit your frame? I don’t want to upset you, but this indicates that your grid is no good, and you did not spend enough time on its design.
What grids are there?
Let’s look at the types of grids for web design.
1. Block grid – rough marking of the area into blocks.
2. Column – having columns in its structure.
3. Modular – consisting of intersecting lines that form modules.
4. Hierarchical – a grid with intuitive placement of blocks, without any logical structure.
Unlike printing 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 as a percentage, and fix the size of the remaining columns.
Find out more
The web design grid 960 Grid System (http://960.gs) corresponds to the concept of a “static” layout, and to create a “rubber” one you can pay attention to the grid of the Bootstrap framework (http://getbootstrap.com/css/#grid ) The 960 GS Modular Frame divides the webpage 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 at the bottom with a resolution of 800×600;
the column that performs the functions of the information module must have a larger width than the column that is defined as a navigation module (menu).
Based on this, the proportion looks like this: 200 pixels. + 550 px or 150 pix. + 620 pixels
In the larger column, it is supposed to place the navigation menu, in the smaller – the directory, or content.
Watch and learn – BBC modular grid site
Consider, for example, the web design grid of a famous site. All BBC sites use a universal structure with columns measuring 61 x 16 pixels, which corresponds to the standard photo and video brand.
As you can see in the picture, the BBC grid is quite flexible and allows you to place any information: from serious analytics to entertainment news. This modular grid is a business card of the company, as it is standard for all its sites. By the way, this thing is a component of the Global Experience Language guide, if anyone is interested.
BBC developers are happy to give advice 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 beginners in the career of a web designer.
1. The process begins by identifying locations for blocks in a higher hierarchy. We introduce ourselves as Sherlock Holmes – masters of deduction and observe the rule “From general to particular, from greater to lesser”.
2. We go down to the next level and place the blocks following in the hierarchy. At the same time, we are based on the priorities of the content, to determine which we analyze the expectations of users and identify our own competitive advantages.
3. Thus, we first work out the overall composition and the largest elements. Then – we refine, refine, detail.