This article will be useful if you make prototypes of sites to bring your ideas to web designers and developers. The tutorial will teach you how to prototype a mesh.
Disclaimer: if you make a prototype without a grid, nothing terrible will happen. A professional designer or web developer will add a grid for you. But if you learn how to work with grids, the quality of prototypes will increase dramatically, and you look at the pages of sites in a different way.
What is a grid and why use it
A grid is a system of vertical or vertical and horizontal lines that divides a page into columns or cells. Created using a grid column or cell form the structure or skeleton of the page, with which designers organize content.
That is, with the help of grids you make a frame on which you wear all the elements of the page: logo, menu, slider, form, image, and so on. Thanks to the skeleton, the elements of the page can be harmoniously positioned, choose their relative and absolute dimensions, set the visual rhythm.
An important point: the grids provide design flexibility, which is needed to adapt the layout to different screen sizes. That is, the use of the frame - a step to create a responsive page.
On the finished page, the grids are usually not visible. But they can be seen on prototypes and layouts.
What are the grids
If you are not engaged in design and web development professionally, it is enough to know about the existence of two types of grids: columnar and modular.
A column grid is a system of vertical lines that divides a page into columns and indents.
Dark and wide areas in the illustration are columns, light and narrow are indents.
The modular grid is a system of vertical and horizontal lines that divides the page into modules.
In this case, the modules are rectangles of 20 by 20 pixels, marked by thicker lines.
If you are not a professional web designer and developer, use a column grid to create prototypes. There are at least two reasons for this. First: the column grids are very popular on the web. They build popular frameworks, for example, Bootstrap, Bulma, Skeleton, which web developers use for page layout.
The second reason: for the prototype of the page, it is enough to use the column grid. If necessary, a professional web designer will add a modular grid when it turns your sketch into a full-fledged layout.
How to use meshes during prototyping
This is a practical section that teaches how to use meshes when creating prototypes.
Where to draw grids
The answer depends on the tools you use for prototyping. Grids can be drawn by hand if the prototype is on a sheet of paper. If the sketch is created using special programs and services, delve into the settings. The tools of most popular prototyping software have grids. Examples below.
To enable the grid in Moqups, click on the Workspace icon and check the Show layout grid option. If you need a modular grid, check the Show paper grid option.
To enable grids in Proto.io, select the Preferences - Grid settings menu.
Check the Show layout option. Select the number of columns, their width, and the width of indents between the columns and along the edges of the page. These settings will be discussed below.
If you need a modular grid, check the Show grid option and specify the settings.
If you are using Justinmind Prototype, in the editor, select the Templates tab and use one of the template grids: 12 or 16 columns.
If you use other prototyping software, find the meshes yourself.
How to build a grid
Build a grid - choose the number of columns, their width, as well as the width of the indents between the columns and along the edges of the page.
Question: how many columns should be in the column grid? The short answer is 12. The point is not even that most CSS frameworks that web developers use are built on 12-column grids. If necessary, the default settings of the frameworks are changed.
The number 12 is almost magical: it is divided into 6, 4, 3 and 2. This means that on a page with a grid of 12 columns in one row you can harmoniously arrange six, four, three or two elements. Since the number is always divisible by itself and by one, you can place 12 or one element in a row.
Moreover, if you do not pay attention to the extreme columns, the grid of 12 columns allows you to harmoniously place in a row of five or 10 elements.
Grids with a different number of columns do not provide such flexibility. For example, 16 is divided into 8, 4, and 2. In order to harmoniously place three or six elements in a row, you can drop two outer columns.
But to put in a row of five or 10 elements, you have to drop the three extreme columns. This is not very convenient.
When choosing the number of columns in the grid, push off the content that you plan to place on the page. For example, if you make a content page without a sidebar, one column or a wide rectangular space in the center of the page is enough. And if you make a portfolio page or a photo gallery, you will need a complex modular grid.
But to create a prototype in 99 cases out of 100 it is convenient to work with a grid of 12 columns. A professional designer or web developer, thanks to the column grid, will turn your prototype into several layouts for different screen sizes.
When building a grid, you need to select the width of the indents at the edges of the page, the width of the indents between the columns and the width of the columns themselves. By and large, during prototyping, it is not necessary to determine these values with pixel accuracy. Later, the designer and web developer will take care of this. But for convenience, use the following recommendations:
- In the chosen program for prototyping, work with the template page for the desktop. The page width should be at least 960 pixels. Leave the approach of mobile first professionals.
- The margins should be at least twice the width of the indents between the columns (gutters). This technique seems to direct the visitor’s view inside the page.
- The wider the space between the columns, the more on the "air" page or free space.
An example of a grid with which to work can be seen in the illustration.
How to use column grid flexibly when planning page layout
Column grid - the basis of the page layout. This can be illustrated with a typical layout from the article "How to create prototype pages" (see photo).
In this case, the header and footer occupy all 12 columns. The main unit and sidebar can occupy 9 and 3 or 10 and 2 columns, respectively.
With the help of the column grid, it is possible to build more complex layouts, for example, with the distribution of columns 5–5–2, 3–6–3, and so on.
That is, using a grid with 12 columns, it is possible to construct layouts consisting of blocks with different widths. There may be several blocks in a row.
When choosing the number and width of blocks, be guided by the content that you plan to publish on the page. Real examples will help to understand this.
On the "Connected" page there is a navigation menu and category cards.
Such a layout can be represented in the form of four blocks three columns in width.
Another example from the site of "Svyaznoy": a directory of phones of one manufacturer with a navigation menu and four product cards in a row.
The layout of this page can be done on a grid with 16 columns. The navigation menu will take four columns, and product cards - three columns each.
A practical example below will help to better understand the principles of working with a column grid.
Using the grid: an example of a prototype page
To make a prototype of the page, I used a grid with 12 columns. Turned on and paper grid, to make it easier to arrange the elements in the vertical direction.
I add a logo, a conversion button and a navigation menu to the header. Pay attention to the alignment of the grid: the elements occupy 4, 4 and 9 columns, respectively.
Under the header add a big slider. It occupies 10 central speakers.
Under the slider I add three product cards, which consist of a photo, text and a navigation button. Cards take up four columns.
Under the cards page is divided into two vertical blocks: the main and sidebar. They occupy 8 and 4 columns respectively.
In the footer add service information. The prototype of the page can be viewed using the Preview button in the upper right corner of the screen.
In preview mode, the grid is not displayed. This allows us to evaluate the prototype without visual interference and, if necessary, return to editing. For example, in the preview mode, the slider seemed too narrow.
I increase the slider width to 12 columns or remove the controllers from the images into the outermost columns of the grid. I remember that next to the navigation menu left room for the search form.
The prototype is ready.
Simple and powerful tool
This is the final characteristic of the grid. With the help of this tool, any specialist without technical training gets a flexible framework on which it is convenient to build prototypes of the page. You can use the grid on a sheet of paper or in popular prototyping programs. In the future, the designer and developer will be able to turn the column grid into a low-level prototype into a full-fledged layout and adaptive page.